Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 16. Februar 2012 18:44

mike-r
arbeitet mit CMS/ms
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Listit2 mit Thumbnails

Listit2 bringt von Haus aus keine Thumbnailfunktion mit, also müssen wir Supersizer verwenden.

Wir benötigen:

  • ListIt2 (klar...)

  • function.supersizer.php*

  • ein template

  • CSS zum aufhybschen

  • gegebenenfalls ein Lightbox-JS

Das Template:

<div id="listit">
{foreach from=$items item=item}
 {* capture image *}
 {capture assign='thumb'}uploads/{$item->fielddefs.bild.value}{/capture}
<h2>{$item->title|cms_escape}</h2>
{if !empty($item->fielddefs)}

<dl>{if !empty($item->fielddefs.bild.value)}<dt class="refbild">
<a rel="lightbox" href="uploads/{$item->fielddefs.bild.value|cms_escape}" title="{$item->title|cms_escape}">
{supersizer class="thumb" path=$thumb width='150' height='150' fill_attr='true' crop='true' strip_tags='true'}</a></dt>  
{/if}
    {foreach from=$item->fielddefs item=fielddef} 
{if !empty($fielddef.value) && ($fielddef.name != 'Bild')}  
					<dt>  {$fielddef.name|cms_escape}:</dt> 
					<dd> {$fielddef.value|cms_escape}</dd>
			{/if}
    {/foreach}
    </dl>
{/if}
{/foreach}
</div>

Der Code sollte einigermassen selbsterklärend sein. Der Schnipsel zu Supersizer erstellt aus unserem Upload-extrafeld (wahlweise auch Auswahl-extrafeld) ein 150x150 grosses Thumbnail.
Dieses Thumbnail ist mit dem Extrafeld "bild" (das Original in gross) verlinkt. rel="lightbox" wird verwendet, wenn wir ein Lightbox-JS anbieten, welches das Bild hybsch "über" der Seite anzeigt.
Der Schnipsel:

{if !empty($fielddef.value) && ($fielddef.name != 'Bild')}  

bewirkt, dass das Bild (bzw. der Link) in der Auflistung nicht ein weiteres Mal auftaucht.

mein Beispiel-CSS:

#listit dt {
	float:left;
	min-width:6em;
	}
	#listit dt.refbild {
		padding-right:15px
}
#listit h2 {
	clear:both;
	padding-top:15px;
}

Screenshot:
mini_listit-thumbs.png

Edit:
* der Ordner (/uploads/)SuperSizerTmp sollte möglichst per FTP erstellt werden um Zugriffsprobleme zu umgehen. (Siehe Referenz 1)

Referenzen:

  1. [GELÖST] ListIt2 Thumbs (Bilder)?

  2. [GELÖST] Listit2 Extrafeld aus Loop ausschliessen (nicht anzeigen)

  3. Using ListItExtended module and Isotope jQuery plugin for nice showcase page (engl.)

Beitrag geändert von mike-r (16. Februar 2012 20:45)


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#2 16. Februar 2012 20:36

nockenfell
Moderator
Ort: Lenzburg, Schweiz
Registriert: 09. November 2010
Beiträge: 2.916
Webseite

Re: Listit2 mit Thumbnails

Danke für die Anleitung


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#3 16. Februar 2012 21:02

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Listit2 mit Thumbnails

Danke für deine Mühe, hier noch mal die Essenz deiner Erfahrungen zusammenzufassen!!!

Machen (leider) nur die wenigsten ...

Offline