Help With Image Selection In ListIt2

[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.

[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

[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

Code: Select all

{html_image}

so I could assign a name to it, and then I have within the files= location got another smarty which is

Code: Select all

{root_url}

, 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

Code: Select all

{html_image}

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.

[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...

{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

[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.

[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}

[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}
                                &nbsp;
                            {/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.

[velden]

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_....}

[psy]

Learn something new every day.
Thanks velden.