Page 1 of 1

[Solved]CGSmartImage and Products module

Posted: Sun Aug 25, 2013 3:04 am
by jasnick
Good afternoon

Apologies for bumping but am getting nowhere with this.

Part of detail template

Code: Select all

<li><div>
<a href="{$entry->file_location}/{$entry->fields.photo1->value}"><img src="{$entry->file_location}/{$entry->fields.photo1->thumbnail}"></a></div></li>
When thumbnail is clicked, large image opens. What I need to achieve is that
whatever size image the editor uploads, it will resize to 900.

Something like

Code: Select all

{CGSmartImage src="$entry->file_location/$entry->fields.photo1->value" filter_resize='w,900' }
but not sure where to add it in the existing code. Have tried various combinations but it doesn't work.

There are also existing thumbnails of a certain size not done via CGSmartImage. Should I be adding a thumbnail size parameter for these?

Am just learning CGSI so some advice would be appreciated.

Thanks

Re: CGSmartyImage and Products module

Posted: Sun Aug 25, 2013 4:18 am
by calguy1000

Code: Select all

<a href="{CGSmartImage src1="$entry->file_location" src2="$entry->fields.photo1->value" width=900 noembed=1}">
   {CGSmartImage src1="$entry->file_location" src2="$entry->fields.photo1->value" width=100}
</a>
I am not sure if the noembed=1 is required on the larger image, but its a safe bet.

Re: CGSmartyImage and Products module

Posted: Tue Sep 17, 2013 7:57 am
by jasnick
Thanks calguy1000

Used as suggested:

Code: Select all

<a href="{CGSmartImage src1="$entry->file_location" src2="$entry->fields.photo1->value" width=900 noembed=1}">
   {CGSmartImage src1="$entry->file_location" src2="$entry->fields.photo1->value" width=180}
</a>
Thumbnail is on main stock page and when clicked, the correct (detail) page opened but the content is unstyled and no photos evident.
When I checked page source, it showed the following error:

Code: Select all

<a href="<br />
<b>Catchable fatal error</b>:  Object of class stdClass could not be converted to string in ....<b> /tmp/templates_c/^6c8b9d4ace12834e672408708d31fd02650ce164.module_db_tpl.Products;detail_ammodetails.php</b> on line <b>58</b><br />
which is

Code: Select all

<a href="<?php echo CGSmartImage::function_plugin(array('src1'=>((string)$_smarty_tpl->tpl_vars['entry']->value)."->file_location",'src2'=>((string)$_smarty_tpl->tpl_vars['entry']->value)."->fields.photo1->value",'width'=>900,'noembed'=>1),$_smarty_tpl);?>
">
   <?php echo CGSmartImage::function_plugin(array('src1'=>((string)$_smarty_tpl->tpl_vars['entry']->value)."->file_location",'src2'=>((string)$_smarty_tpl->tpl_vars['entry']->value)."->fields.photo1->value",'width'=>180),$_smarty_tpl);?>
</a>
The main stock page has the thumbnail and the detail page has a series of thumbnails including the one on the main page, all of which should open to a large image when clicked. The code given in my first post achieves this but obviously I need to get to grips with CGSmartImage so I can use it for this site and others in the future.
Thanks!

[Later]
I should mention that there is an option for up to 12 images - so Photo1 through to Photo12. Does this need to be set up on each <li> or is it possible to use a <foreach>?

Code: Select all

<div id="imagebox">
 <ul class="img">
 <li><div>
<a href="{CGSmartImage src1="$entry->file_location" src2="$entry->fields.photo1->value" width=900 noembed=1}">
   {CGSmartImage src1="$entry->file_location" src2="$entry->fields.photo1->value" width=100}
</a></div></li>
... up to Photo12....
</ul></div>
Also, in Products module Prefs, do I leave that blank or fill in the sizes of the thumbnail and preview image (which I am assuming is the larger image)?

Re: CGSmartImage and Products module

Posted: Tue Sep 17, 2013 8:18 am
by Rolf
I used it in this example http://www.cmscanbesimple.org/blog/buil ... ade-simple It might help you... Note the use and not-use of "

Re: CGSmartImage and Products module

Posted: Wed Sep 18, 2013 2:36 am
by jasnick
Ah yes! Thanks Rolf - I see what you mean about use or not of "

Am much further forward now using:

Code: Select all

<div id="imagebox">
 <ul class="img">
 <li><div>
<a href="{CGSmartImage src1=$entry->file_location src2=$entry->fields.photo1->value width='900' noembed=1}
   {CGSmartImage src1=$entry->file_location src2=$entry->fields.photo1->value width='180'}</a></div></li>
.....and so on to </ul>
</div> 
However note the " after <a href=. Wherever I put this to close it ">, either after the noembed=1, or before the closing </a>, I get "> visible on the detail page and although the lightbox opens, the large image does not.

I feel I am almost there but something is still not right.

Re: CGSmartImage and Products module

Posted: Wed Sep 18, 2013 6:42 am
by Rolf
try something like:

Code: Select all

<div id="imagebox">
<ul class="img">
  <li>
    <a href="{CGSmartImage src1=$entry->file_location src2=$entry->fields.photo1->value width='900' notag=1 noembed=1}">
      {CGSmartImage src1=$entry->file_location src2=$entry->fields.photo1->value width='180'}
    </a>
  </li>
</ul>
</div>

Re: CGSmartImage and Products module

Posted: Wed Sep 18, 2013 7:52 am
by jasnick
Rolf - thank you so much ! Nearly there.

Display page works probably as you intended - one thumbnail that when clicked opens first large image of the bike then via the lightbox Next and Prev will show the rest of the descriptive images for that particular bike.

Client is used to seeing all the descriptive images at once in a grid. The grid is laid out but currently only the first space is filled with the first image.

To recap - the summary page has a single thumbnail for each bike. The detail page (when a summary page thumbnail is clicked) should have all descriptive thumbnails on display at once and when the first is clicked - or any of them for that matter - the lightbox appears and Next and Prev can be used to scroll though them all.
Can that be done using the current code in some way?
Thanks - I appreciate the help!
Test showing 4 bikes each with 4 descriptive pics.
Detail page - should have 4 pics
Detail page - should have 4 pics
Summary page
Summary page

Re: CGSmartImage and Products module

Posted: Fri Sep 20, 2013 3:51 am
by jasnick
I added the <div> back into the code and can now say it works!

Code: Select all

 <li><div>
 <a href="{CGSmartImage src1=$entry->file_location src2=$entry->fields.photo1->value width='900' notag=1 noembed=1}">
      {CGSmartImage src1=$entry->file_location src2=$entry->fields.photo1->value width='180'}
    </a></div></li> 
That is, it works in the test directory. Page source shows the CGSmartImage code for the image and I uploaded a vey large image to see if it would resize it and it did.

So I will mark this Solved - thanks - and will need to start a new thread about the site proper as it is not working there.