[SOLVED] ListIt2 - display images

[delve2013]

How do I display an image and not a link to the image in the category display? By default ListIt2 only displays a link to your image.

[velden]

What about creating an image tag around the link to your image yourself? In the appropriate template of the LI2 instance.

Don't know the exact usage but something like:

Code: Select all

<img src="{$category->image_link}" alt="{$category->title}" />

[(M)]

I had the same problem.

Also the images have the wrong link or pad to it. They missing '/uploads/images/' in it. I get; "http://www.domain.com/imageholder.jpg instate of "http://www.domain.com/uploads/images/imageholder.jpg

How can I style (with css) a list or list-item? I get a very plane list with no classes or something like that.

The code you suggest, were will a put it in a template and witch template?

[gocreative]

If you're talking about outputting LI2 items in a summary template, you can just use this:

<img src="uploads/{$item->image}">

The above assumes your image field alias is "image". This would be added outside of the inner FOREACH loop. I always remove the default templates and write my own.

[(M)]

Thanx, gocreative

I already solve it with code from this French forum;
http://www.cmsmadesimple.fr/forum/viewt ... 191#p32191

Code: Select all

{foreach from=$items item=item}
{assign var=screen value=$item->fielddefs.image.value}

<img src="/uploads/images/{$screen}" />

If you write your own code maybe you have a solution for another problem a want to fix;

Is there a way to show Details of a Summary item on the same page. To show the detail in a div. For example the link <a href="{$item-> url} "> more </ a>

The intention is that all ListIt2 Summary items remain displayed while on the same page the Detail of an item is selected. Similar to the functionality of a gallery.

[gocreative]

If you're using the latest version of LI2, you don't need this line:

Code: Select all

{assign var=screen value=$item->fielddefs.image.value}

You can simply use this variable in your template:

Code: Select all

{$item->image}

As for your other issue, you could probably call the LI2 module again within your summary template using the search parameter. For example, in your summary template within the FOREACH loop:

Code: Select all

{ListIt2YourModule detailtemplate="mytemplate" action="detail" search_alias="my_alias"}

Where it says "search_alias" you can change this to the alias of any of your fields (e.g. "search_title" to search your "title" field). And then change "my_alias" to whatever you're searching for, e.g. the alias of the current item.

So basically what you're doing here is loading the detail template from within your summary template, and using the search feature to find the exact item you're looking for (since all aliases are unique) and display it.

[delve2013]

Thank you.

[(M)]

@gocreative

Finally a got some time to finish it. I try but I don't understand your explanation very well. It don't work for me. Maybe you could give me some help.

Where in the summary template must I put my detail code;

Code: Select all

{ListIt2test2 detailtemplate="vimeo2" action="detail" search_vimeo_code="Vimeo code"}

The are two {foreach} positions.

And the code;

Code: Select all

action="detail" 

is giving me this;
"missing parameter, this should not happen"

The Field Definition is calling; Vimeo code
and the Alias; vimeo_code

[velden]

As far as I know you don't need the extra calls to LI2.

In the summary view all fields are available that are in the detail view. So you can populate your 'detail' divs with the content you need from summary view.

That said, if it's a large list it could be more efficient to look for a Ajax way to show the details. Then, the initial page will load faster because the browser does not need to load (and then hide) all the content. Only when a visitor is clicking for more details the the data is loaded and displayed.

Should be very easy to implement (stole it from this blog article)

Create the div you want to display the details in and give it a unique id. You can do this somewhere in your page template or in the summary template OUTSIDE the foreach loop (else you would get a detail div for every item and you probably don't need that).

At the top of the summary template include some javascript.

In the summary template, change the default 'more url link' to do the ajax stuff:

Example template below. Javascript added at the top. Custom more link at the end of the {foreach from=$items item=item} loop and after that loop the <div id="details"></div>.

Code: Select all

{if $items|@count > 0}

{* javascript stuff that will perform ajax calls *}
<__script__ type='text/javascript'>
/* <![CDATA[ */
{literal}
function ajax_load(url,dest)
{  
 var tmp = url + "&showtemplate=false";
 var tmp2 = tmp.replace(/amp;/g,'');
 $(dest).load(tmp2); 
}
{/literal}
/* ]]> */
</__script>

	{if $pagecount > 1}
	<!-- pagination -->
	<p>
		{if $pagenumber > 1}
			{$firstpage}&nbsp;{$prevpage}&nbsp;
		{/if}
			{foreach from=$pagelinks item=page}
				{$page->link}
			{/foreach}
		{if $pagenumber < $pagecount}
			&nbsp;{$nextpage}&nbsp;{$lastpage}
		{/if}
	</p>
	<!-- pagination //-->
	{/if}
	
	<!-- items -->
	{foreach from=$items item=item}
	<!-- item -->
	<div class="item">
	
		<h2 class="item-title">{$item->title}</h2>
	
		{if !empty($item->fielddefs)}
		<!-- field definitions -->
		<div class="item-properties">
			{foreach from=$item->fielddefs item=fielddef}
	
			{*
				Categories were moved to field definitions.
				If you need Categories, create new Field definition with alias "category"
				and Categories will be available again.
			*}
	
			{if $fielddef.type == 'Categories' && ($fielddef.value != '')}
	
			{* use ListIt2Loader plugin if you need Category information in default module action templates *}
			{ListIt2Loader item='category' force_array=1 value=$fielddef.value assign='cats'}
	
			<!-- categories -->
			<div class="item-category">
				Category: {$cats|implode:','}
			</div>
			<!-- categories //-->
			{/if}
	
			{if $fielddef.value && $fielddef.type != 'Categories'}
				{if $fielddef.type == 'SelectFile' || $fielddef.type == 'FileUpload'}
					{$fielddef.name}: <a href="{$fielddef->GetImagePath(true)}/{$fielddef.value}">{$fielddef.value}</a><br />
				{elseif $fielddef.type == 'SelectDateTime'}
					{$fielddef.name}: {$fielddef.value|cms_date_format}<br />
				{else}
					{*$fielddef.name}: {$fielddef.value*}<br />
				{/if}
			{/if}
	
			{/foreach}
		</div>
		<!-- field definitions //-->
		{/if}
	
		<a href="{$item->url}" onclick="ajax_load('{$item->url}','#details'); return false;">more</a>
	</div>
	<!-- item //-->
	{/foreach}
	<!-- items //-->
<div id="details"></div>
{/if}

[(M)]

@velden
Many thanks. Finally a have it working.
it took me some time before I had to realize that the double underscore around <__script__> was a problem for functioning

Code: Select all

<__script__ type=  ... </__script> 

To make it complete, i use this variable in my template to display images;

Code: Select all

{assign var=screen value=$item->image}

in combination with

Code: Select all

<img src="/uploads/images/{$screen}">

Code: Select all

{if $items|@count > 0}

{* javascript stuff that will perform ajax calls *}
<__script__ type='text/javascript'>
/* <![CDATA[ */
{literal}
function ajax_load(url,dest)
{  
 var tmp = url + "&showtemplate=false";
 var tmp2 = tmp.replace(/amp;/g,'');
 $(dest).load(tmp2); 
}
{/literal}
/* ]]> */
</__script>

   {if $pagecount > 1}
   <!-- pagination -->
   <p>
      {if $pagenumber > 1}
         {$firstpage}&nbsp;{$prevpage}&nbsp;
      {/if}
         {foreach from=$pagelinks item=page}
            {$page->link}
         {/foreach}
      {if $pagenumber < $pagecount}
         &nbsp;{$nextpage}&nbsp;{$lastpage}
      {/if}
   </p>
   <!-- pagination //-->
   {/if}
   
   <!-- items -->
   {foreach from=$items item=item}
   
   <!-- om de plaatjes te tonen -->
   	{assign var=screen value=$item->image}

   <!-- item -->
   <div class="item">
   
      <h2 class="item-title">{$item->title}</h2>
   
      {if !empty($item->fielddefs)}
      <!-- field definitions -->
      <div class="item-properties">
         {foreach from=$item->fielddefs item=fielddef}
   
         {*
            Categories were moved to field definitions.
            If you need Categories, create new Field definition with alias "category"
            and Categories will be available again.
         *}
   
         {if $fielddef.type == 'Categories' && ($fielddef.value != '')}
   
         {* use ListIt2Loader plugin if you need Category information in default module action templates *}
         {ListIt2Loader item='category' force_array=1 value=$fielddef.value assign='cats'}
   
         <!-- categories -->
         <div class="item-category">
            Category: {$cats|implode:','}
         </div>
         <!-- categories //-->
         {/if}
   
         {if $fielddef.value && $fielddef.type != 'Categories'}
            {if $fielddef.type == 'SelectFile' || $fielddef.type == 'FileUpload'}	
			<span class="thumbnail"><img src="/uploads/images/{$screen}" alt="image" class="thumb" width="200" height="180" /></span>
			<br />
            {elseif $fielddef.type == 'SelectDateTime'}
               {$fielddef.name}: {$fielddef.value|cms_date_format}<br />
            {else}
               {*$fielddef.name}: {$fielddef.value*}<br />
            {/if}
         {/if}
   
         {/foreach}
      </div>
      <!-- field definitions //-->
      {/if}
   
      <a href="{$item->url}" onclick="ajax_load('{$item->url}','#details'); return false;">more</a>
   </div>
   <!-- item //-->
   {/foreach}
   <!-- items //-->
<div id="details"></div>
{/if}