Gallery/CGSmartImage, view/resize all images for mobile user

[blackhorse]

Hello,

I am attempting to create a different output for mobile users. I need for them to view all images in all galleries and the images must be no larger than 320 px wide.

I am using this mobile detection code and a second content block "Mobile."

http://www.i-do-this.com/blog/14/Make-y ... bile-ready

(That really isn't completely pertinent to my questions but for anyone searching, this solution works very well.)

So, CGSmartImage allows for all images in a specific directory to be displayed (it's sub-directories) and that is what I need.

I've read the help file for the module and code is provided for accomplishing what I want but I don't need some of what is in it. Also I don't really understand where to place it. I don't know if I should place it in the template, the gallery template, the content block.... I'm thinking this particular page "Photos" on the website needs it's own template?

The smaller tags are easy enough and work fine. Obviously though that is not what I'm after (a particular image):

Code: Select all

{CGSmartImage src='uploads/images/picture.jpg'}

I've tried a few things but I'm getting errors and after hours of trying, getting nowhere. Here is the code in the example. I changed to reflect my url/directory (uploads/imgages/Gallery). I also took out the line numbers of course and fixed the script lines.

Code: Select all

 1: <__script__ type="text/javascript">{literal}
 2: jQuery(document).ready(function(){
 3:  jQuery('a.fancybox').fancybox();
 4: });
 5: {/literal}</__script>
 6: {assign var='files' value='uploads/album/*.jpg'|glob}
 7: {if count(\$files)}
 8: <div style="width: 100%; height: 150px; overflow: auto;">
 9: {foreach from=\$files item='file'}
10:  <a rel='simple_album' class="fancybox" href="{CGSmartImage src=\$file filter_rotate=90 filter_watermark=1 filter_resize='h,500' notag=1 noembed=1}">
11:  {CGSmartImage src=\$file filter_rotate=90 filter_grayscale=1 filter_watermark=1 filter_resize='h,150'}
12:  </a>
13: {/foreach}
14: </div>
15: {/if}

If anyone could please just help by:

- confirming where this code should go, if it needs to be split up, if a new template needs to be created for the "Photos" page
- strip to a basic code that just shows all images in the "uploads/images/Gallery" directory - I don't need watermarking, resizing, rotating etc.

If you can help, thanks, really appreciated!

[calguy1000]

1. Later versions of the CGSmartImage module will automatically downsize the image to the maximum size allowable by a mobile device. Unless yo.tell it not to

2. Embedding is probably a good idea for mobile devices as it reduces the number of requests... particularly for thumbnail images.

3. Your code directly bypasses the gallery module (as far as I can tell) and queries the filesystem directly. Therefore there's probably no need to put it in a gallery template, You just need that code directly in a place that is only accessed via mobile devices.

4. You can take the options out of the call to CGSmartImage and just use width= height= or max_width= and max_height= arguments. CGSI will automatically re-scale to those parameters.

[blackhorse]

Thanks calguy.

I am using CMSMS 1.11.2, Gallery 1.6 and CGSmartImage 1.9.5 (I am running a completely fresh install to test this all out).

I just now placed this code in the new separate ("Mobile") content block:

Code: Select all

<__script__ type="text/javascript">

{literal}
jQuery(document).ready(function(){jQuery('a.fancybox').fancybox();});
{/literal}

</__script>

{assign var='files' value='uploads/images/Gallery/*.jpg'|glob}

{if count(\$files)}
<div style="width: 100%; height: 150px; overflow: auto;">

{foreach from=\$files item='file'}
<a rel='simple_album' class="fancybox" href="{CGSmartImage src=\$file filter_resize='h,300'}">{CGSmartImage src=\$file filter_resize='h,300'}</a>
{/foreach}

</div>

{/if}

(There is not a line break there between <a> and </a>)

And got this error:

ERROR: at line 701 in file /home/nevermind/public_html/cmsmadesimple/lib/smarty/sysplugins/smarty_internal_templatecompilerbase.php:

Message:

Syntax Error in template "b7c077c678b41029dc74d16106f62ab908cb4869" on line 11 "{if count(\$files)}" - Unexpected "\", expected one of: "","" , ")"

[uniqu3]

No idea where you got that "\" infront of smarty variables but that shouldn't be there.

[blackhorse]

OK It was from the example from the help file. So there were 3 and I took them all out. Now there are no errors but the page (content area) is blank. There are images/galleries, I was using {Gallery} before I started all of this.

Maybe I shouldn't have taken them all out? I have no bluddy idea this is all always trial and error for me.

[uniqu3]

Code: Select all

<__script__ type="text/javascript">

{literal}
jQuery(document).ready(function(){jQuery('a.fancybox').fancybox();});
{/literal}

</__script>

{assign var='files' value='uploads/images/Gallery/*.jpg'|glob}

{if count($files)}
<div style="width: 100%; height: 150px; overflow: auto;">

{foreach from=$files item='file'}
<a rel="simple_album" class="fancybox" href="{CGSmartImage src=$file filter_resize='h,300'}">{CGSmartImage src=$file filter_resize='h,300'}</a>
{/foreach}

</div>

{/if}

[blackhorse]

Thanks uniqu3. BTW I am really enjoying your code for the mobile detection/content. My sites are really simplified for mobile users now and being able to just add the simplified content in a separate content block is super easy for clients.

I copied/pasted that (I believe the same as removing the 3 "\", which is what I tried, but copied/pasted yours anyway) with the same result, content area is blank.

There are settings for the CGSmartImage module. I didn't touch anything, I don't know if I should have or not. I'm going to play around with "Image Url Prefix:" there.

[uniqu3]

Look in Admin log, good chance there will be some kind of error logged, else turn debug on in config.php or look in php error logs if enabled on server.

[blackhorse]

There are no errors logged in Admin, just some editing.

Thanks, will look into the rest tonight.

[blackhorse]

Well, nothing found in error_log regarding this installation/module. Debug is on, the content area is still blank when viewing on cpu - I'm going to change that content area back to "{Gallery}." I cannot copy/paste mobile debugging here. At this point I have no idea what I'm doing and am about to abandon this and just create a separate gallery which will have all images, mobile users can click on that.

Thanks anyway for trying to help guys