Page 1 of 1
Help With Image Selection In ListIt2
Posted: Tue Oct 07, 2014 10:51 am
by govicinity
CMS Made Simple™ 1.11.11 “San Cristobal”
CGExtensions 1.41.2
CGSimpleSmarty 1.7.4
CGSmartImage 1.16.2
ListIt2 1.4.1
I am using List It 2, great plugin, one of my favourites. I have a query on some coding I am doing with it. In my summary view I currently have this code.
Code: Select all
<ul class="teampage">
{foreach from=$items item=item}
<li class="team">
{cgsi_convert filter_croptofit='125,125,c,1' quality='100'}<img src="{root_url}/uploads/images/StaffMembers/{$item->fielddefs.photo.value}" />{/cgsi_convert}
<h2>{$item->fielddefs.name.value}</h2>
<h4>{$item->fielddefs.position.value}</h4>
<p class="description">{$item->fielddefs.role_description.value|truncate:100:"...":false|strip_tags}</p>
<p><a href="{$item->url}" title="more on {$item->fielddefs.name.value}">more on {$item->fielddefs.name.value}...</a></p>
</li>
{/foreach}
</ul>
I would like to put an {if} around the image so it doesn't show / give a missing image icon if there is no image selected.
I am playing with this code at the moment:
Code: Select all
<ul class="teampage">
{foreach from=$items item=item}
<li class="team">
{cgsi_convert filter_croptofit='125,125,c,1' quality='100'}
{html_image assign='Team_Image' file='{root_url}/uploads/images/StaffMembers/{$item->fielddefs.photo.value}'}
{if !empty($Team_Image)}
{$Team_Image}
{/if}
{/cgsi_convert}
<h2>{$item->fielddefs.name.value}</h2>
<h4>{$item->fielddefs.position.value}</h4>
<p class="description">{$item->fielddefs.role_description.value|truncate:100:"...":false|strip_tags}</p>
<p><a href="{$item->url}" title="more on {$item->fielddefs.name.value}">more on {$item->fielddefs.name.value}...</a></p>
</li>
{/foreach}
</ul>
Obviously this is not working by putting a smarty within a smarty, does anyone have an idea as you will save me a massive amount of head scratching.
Re: Help With Image Selection In ListIt2
Posted: Tue Oct 07, 2014 10:57 am
by Jo Morg
In your code:
Code: Select all
...
{if !empty($Team_Image)}
{$Team_Image}
{/if}
...
...
{$Team_Image} is NEVER empty so the check will fail.
Try:
Code: Select all
...
{if !empty($item->fielddefs.photo.value)}
{$Team_Image}
{/if}
...
HTH
Re: Help With Image Selection In ListIt2
Posted: Tue Oct 07, 2014 11:45 am
by govicinity
Hi Jo, thanks for the info, unfortunately this isn't working, I don't think it's what you've provided me with, I think it's with the second lot of code I have listed in my original post, as I have the
so I could assign a name to it, and then I have within the files= location got another smarty which is
, personally not sure if that should work, I was looking on the smarty 3 website to see how I can get an img to work without using
Code: Select all
<img src="{root_url}/uploads/images/StaffMembers/{$item->fielddefs.photo.value}" />
which does work of course, but also leaves me with a missing image box/icon if there is no image selected, so thought I'd try the
as it should parse to img, but I need it to put the image that I have chosen through file select in ListIt2 dynamically, not tell it to look at a particular filename i.e.
Code: Select all
{html_image file='directory/thisismyjpgsname.jpg'}
.
Hope this makes sense.
Re: Help With Image Selection In ListIt2
Posted: Tue Oct 07, 2014 12:05 pm
by Jo Morg
I'm not sure about what you are trying to accomplish, but:
- This won't work because I don't think {$Team_Image} will ever be empty...
govicinity wrote: {html_image assign='Team_Image' file='{root_url}/uploads/images/StaffMembers/{$item->fielddefs.photo.value}'}
{if !empty($Team_Image)}
{$Team_Image}
{/if}
- I would expect that {$item->fielddefs.photo.value} to be empty if there is no image assigned for that item, thus my code should work, unless {$item->fielddefs.photo.value} contains anything that PHP wouldn't consider as empty (I never used the module myself, but it wouldn't make sense for it not to be empty);
- The snippet I provided was a replacement for part of the code from your 2nd sample;
- Of course the code could be further optimized by skipping all unneeded processing in case {$item->fielddefs.photo.value} is empty;
You may need to debug a bit more:
http://docs.cmsmadesimple.org/troublesh ... plate_vars
Re: Help With Image Selection In ListIt2
Posted: Tue Oct 07, 2014 12:06 pm
by velden
And if JoMorg's suggestion works I'd suggest to move the {html_image ...} tag inside the if-statement for better efficiency. IMO it's a waste of resources to try to build an image tag while it might not be possible/needed.
Then, html_image is not the most efficient function to generate an img tag, especially if you know the image dimensions because you resize it using cgsi_convert
Then, I *think* {cgsi_convert} is not the most efficient way to do what you do. I'd rather use {CGSmartImage}. It will do both things; resize the image and generate the img tag with (optionally) width/height attributes.
Let me look for an example:
EDIT: just realise I'm using GBFilePicker module to select the images which gives another value than the LI2 select file fielddef.
Code: Select all
{if $item->fielddefs.afbeelding->value != ''}
<img class="tooltip" src="{CGSmartImage src=$item->fielddefs.afbeelding->value filter_resizetofit='194,100,#ffffff' noembed=1 notag=1}" width="194" height="100" alt="{$item->title|cms_escape:htmlall}" />
{else}
your alternative no-image solution
{/if}
In this example I built the img tag myself, just because I like to have control. Read help of CGSmartImage (cgsi) module how to let cgsi build the tag.
Re: Help With Image Selection In ListIt2
Posted: Tue Oct 07, 2014 12:31 pm
by govicinity
Hi Jo, thanks for the help, I have just sat down in a dark quiet room and worked this out, I deconstructed my code and used a sample template and have now got this to work:
Code: Select all
{if $items|@count > 0}
<ul class="teampage">
<!-- items -->
{foreach from=$items item=item}
<!-- item -->
<li class="team">
<!-- field definitions -->
{foreach from=$item->fielddefs item=fielddef}
{cgsi_convert filter_croptofit='125,125,c,1' quality='100'}
{if $fielddef.value && $fielddef.type != 'Categories'}
{if $fielddef.type == 'SelectFile' || $fielddef.type == 'FileUpload'}
<a href="{$item->url}"><img src="{root_url}/uploads/images/StaffMembers/{$item->fielddefs.photo.value}" /></a>
{/if}
{/if}
{/cgsi_convert}
{/foreach}
<!-- field definitions //-->
<h2 class="item-title">{$item->title}</h2>
{if !empty($item->fielddefs)}
<h4>{$item->fielddefs.position.value}</h4>
<p class="description">{$item->fielddefs.role_description.value|truncate:100:"...":false|strip_tags}</p>
<p><a href="{$item->url}" title="more on {$item->fielddefs.name.value}">more on {$item->fielddefs.name.value}...</a></p>
{/if}
</li>
<!-- item //-->
{/foreach}
<!-- items //-->
</ul>
{/if}
Re: Help With Image Selection In ListIt2
Posted: Thu Oct 09, 2014 10:38 pm
by psy
This works for me where 'icon' is an image in a LI2 instance fielddef:
Code: Select all
{if isset($item->fielddefs.icon) && $item->fielddefs.icon->value != ''}
<img src="{$item->fielddefs.icon->GetImagePath(true)}/{$item->fielddefs.icon->value}" alt="{$item->title|cms_escape}" />
{else}
{/if}
</div>
You could assign {$item->fielddefs.icon->GetImagePath(true)}/{$item->fielddefs.icon->value} to a var and use the var as the src param in the CGSmartImage href only option.
Re: Help With Image Selection In ListIt2
Posted: Fri Oct 10, 2014 7:46 am
by velden
psy wrote:
You could assign {$item->fielddefs.icon->GetImagePath(true)}/{$item->fielddefs.icon->value} to a var and use the var as the src param in the CGSmartImage href only option.
In that case I'd prefer to use the 'src1' and 'src2' parameter of CGSmartImage:
Code: Select all
{CGSmartImage src1=$item->fielddefs.icon->GetImagePath(true) src2=$item->fielddefs.icon->value filter_....}
Re: Help With Image Selection In ListIt2
Posted: Fri Oct 10, 2014 7:49 am
by psy
Learn something new every day.
Thanks velden.
