use CGSmartImage in news or cgblog summary or detail page

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by carasmo »

To help with estimating time/cost, I can make the interface in photoshop (all fast and loose) so you can see how an it can ideally be for really non-technical people (if you can use your email, you can update your site). Right. ;-)
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by carasmo »

Sorry. Since I'm not rolling in the dough at the moment, I'd like to do the following since I dig this idea for the plug into the editor for non-techies (I fall into this category):

Situation one:
Pay you for it
Charge 10.00 for the plug in until it's paid for
Then it's free

Raise the money from the CMSMS userbase and if it's not raised, then don't do it.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by carasmo »

Okay scratch that idea about the plugin for the editor.

Here's an email, for reference, from Matt Willcox the developer behind adaptive images:


It turns out that the problem [in firefox] is intermittent (which is why I thought it was fixed but sometimes it isn't).

The short answer is: switch it to FALSE for now, which guarantees that people using Firefox on the desktop will get the right size images every time instead of broken looking mobile resolution images. FF desktop is liekly a far larger audience than mobile for now.

The reason is: there's a race condition in all browsers - and Firefox isn't consistent with how that resolves. The browser is in a race to set a cookie and load all the HTML. Which happens first is what decides whether AI works properly on the very first page load. Webkit always sets the cookie first, so the $mobile_first flag is safe and always honoured. Gecko and Trident don't always set the cookie first, so the $mobile_first needs to be set to false or else you get the issue you see here.

What happens to mobile: depends on the browser the device is running. Most mobile devices seem to run a version of webkit these days, so it should work as expected - the cookie is set before the images are requested and the right sizes get delivered first time. If, for whatever reason, the cookie is not set before the images are requested then the very first page load on the mobile device will request some images that are larger than the display needs. This will mean the initial page load is slower than expected but the display of the images will appear correct. I should stress that this is a very-first page load issue, and as the cookie is set for the domain every subsequent page load will work properly.

What I'm doing about it: I'm looking into ways to detect the browser engine and have AI automatically adjust the $mobile_first setting for browser engines known to suffer from the race condition problem. It already does this for IE.
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by calguy1000 »

The issue of 'serving images to devices no larger than they can handle' is simple in principle, but difficult in practice. in principle it's:
a: detect the browsers maximum resolution (if possible)
b: cross-reference that with the sizes that you want to output and output the image (caching would be really nice here).
c: allow the browser to cache the image.

In practice though it's problematic. There are two basic methods:
a: The javascript approach
pros:
it's simple, set a cookie or send the resolution via ajax to the server
cons:
it's problematic and browser dependant. If the cookie (lets say we're using a cookie) is not already sent, then it is set by the javascript. The javascript may not be executed before the images are requested (browsers tend to be asynchronous and do a few things at a time). This could mean that the first time a user on an iphone browses a page he gets the massive images, and since the images are cached on the browser, that's all he gets. Additionally, if the images are resized and cached in the same request that gets the initial HTML for the page (the way CGSmartImage currently behaves) then there may be no resolution data for the program to use to resize the image.


b: Use a web service approach
- on request grab the server details send them to another service to do a database lookup and return the device capabilities.
pros:
- it happens on initial request of the HTML, so that if the data in the web service is up-to-date the rest of the image processing will have the resolution information to play with.
- this request info can be cached for performance purposes so that every request to your page does not have to go to the remote web service.
cons:
- it depends on the accuracy of the web service, and the throughput of your outgoing host (and whatever QOS stuff has been setup).
- it is extra overhead on each request, at least (when using caching) until a reasonable database of your most frequent devices is built up.

Since the goal of CGSmartImage is primarily to improve performance and make image processing simpler, not necessarily to make the 'developers life easier'... if I were to implement adaptive images into CGSmartImage I would probably go with the second approach, and chose a free (and untested by me at this time) web service like: http://www.deviceidentifier.com/
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by calguy1000 »

For laughs and giggles (and to try to reproduce a problem with CGSmartImage) I installed the Gallery module for the first time (nice module by the way).

I tweaked the foreach loop of the Lytebox Fancybox template like this:

Code: Select all

{foreach from=$images item=image}
	<div class="img">
	{if $image->isdir}
		<a href="{$image->file}" title="{$image->titlename}">{CGSmartImage src=$image->thumb filter_croptofit=150,150,tc alt="$image->titlename"}</a><br />
		{$image->titlename}
	{else}
   <a class="group" rel="gallery-{$galleryid}" title="{$image->titlename}" href="{CGSmartImage src=$image->file alt=$image->titlename filter_croptofit=800,600,tc alt=$image->titlename notag=1 noembed=1}">{CGSmartImage src=$image->file filter_croptofit=150,150,tc alt=$image->titlename}</a>
	{/if}
	</div>
{/foreach}
And CGSmartImage works well. The advantages to this are:
a: Better thumbnails
- I don't use the gallery thumbnails, CGSmartImage creates them on the fly given the parameters I want (if I want watermarks on the thumbnailed images, and want them in greyscale I can do that). In this case I am cropping-to-fit the thumbnails to 150x150 and cropping to the top-center

b: Performance
- Thumbnails are base64 embedded into the page to minimize requests. This may not work with all of the templates. I tried it, and it worked with Lytebox Fancybox. you cannot embed the image targets to my knowledge though.

c: Automatic orientation
- I uploaded some jpeg images from my ipod. These were automatically corrected to show 'upright'. Which is handy as customers don't have to rotate images before uploading.

d: Ease of Modification
- Adjusting the size of the popup images, or the size of the thumbnails is as easy as changing the values in the template. CGSmartImage will then re-process the images on the fly. All I have to do after that is tweak stylesheets.

Either way, Gallery is a nice module... and with a minimal amount of modification you can have your cake and eat it too wrt thumbnails and ease of use for your customers.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by carasmo »

I'm running into an issue with cgblog. II delete the image, say I have a post and add an image, then decide that I don't want an image on that post and don't want any image at all, I click the delete next to the image yet this is what happens on the post: it still prints the figure and the image tags and this is the error:

Code: Select all

<img src="<br />
<b>Warning</b>:  file_get_contents(http://domain.name/uploads/cgblog/id6/testcrop.jpg) [<a href='function.file-get-contents'>function.file-get-contents</a>]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found
 in <b>/home/username/public_html/domain/directornam/modules/CGSmartImage/lib/class.cgsi_utils.php</b> on line <b>322</b><br />
string(71) "Smarty error: Attempt to create a CGImageBase object with invalid input"
" alt=''/>
Any help is deeeeeeeeeeeply appreciated.
User avatar
micahgodbolt
Forum Members
Forum Members
Posts: 149
Joined: Thu Jul 29, 2010 11:09 pm
Location: Portland, OR

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by micahgodbolt »

That's the first time you've installed Gallery Calguy? Man, I love that module and CGSmartImage is crucial for how I set up my Gallery templates.
howey
Forum Members
Forum Members
Posts: 158
Joined: Fri Sep 14, 2007 1:05 pm

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by howey »

Hi

I tried a variation on your code to get an alt tag and link information into my summary news template.

However I am having a problem with the CGSmartImage module. My template looks like this:

Code: Select all

{foreach from=$items item=entry}

<div class="homeHighlightTop">

{capture name=page_alias assign=pageAlias}
{if isset($entry->fields)}
  {foreach from=$entry->fields item='field'}
     {if $field->name == 'pagealias'}
          {$field->value}
        {/if}
  {/foreach}
{/if}
{/capture}

{capture name=image_alt assign=imageAlt}
{if isset($entry->fields)}
  {foreach from=$entry->fields item='field'}
     {if $field->name == 'imagealt'}
          {$field->value}
        {/if}
  {/foreach}
{/if}
{/capture}

<h2><a href='{cms_selflink href="$pageAlias"}'>{$entry->title}</a></h2>


{if isset($entry->fields)}
  {foreach from=$entry->fields item='field'}
     {if $field->type == 'file' && $field->name == 'highlightimage'}
          <img src="{CGSmartImage src1=$entry->file_location src2=$field->value  filter_resize=w,20}" alt='$imageAlt'/>
          {* <img src="{$entry->file_location}/{$field->value}" alt="$imageAlt"/> *}
     {/if}
  {/foreach}
{/if}

{if $entry->content}
<p>{eval var=$entry->content}</p>
{/if}

</div>

<div class="homeHighlightBottom">
    <p><a href='{cms_selflink href="$pageAlias"}'>Tell me more</a></p>
</div>

{/foreach}
I have tried it with a simple

Code: Select all

{CGSmartImage src1=$entry->file_location src2=$field->value  filter_resize=w,20}
without the img tag as well. But I get the error code:

Code: Select all

string(143) "Smarty error: [in module_db_tpl:News;summaryhomepagehighlight line 33]: [plugin] unknown tag - 'CGSmartImage' (core.load_plugins.php, line 198)" string(155) "Smarty error: [in module_db_tpl:News;summaryhomepagehighlight line 33]: syntax error: unrecognized tag 'CGSmartImage' (Smarty_Compiler.class.php, line 590)" 
I have used the CGSmartImage within the Products module (Thanks to help from callguy - big thumbs up).

But now have this problem - it is probably something really simple that I have missed.
howey
Forum Members
Forum Members
Posts: 158
Joined: Fri Sep 14, 2007 1:05 pm

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by howey »

Hi, just a quick note - I got the capture bit wrong. Now all OK, but still have a problem with the CGSmartImage causing an error.

Cheers
howey
Forum Members
Forum Members
Posts: 158
Joined: Fri Sep 14, 2007 1:05 pm

Re: use CGSmartImage in news or cgblog summary or detail pag

Post by howey »

Hi

Having gone through the template again I decided to start from scratch and re installed all the modules.

It's now working!

Cheers
Post Reply

Return to “Tips and Tricks”