Forum für CMS/made simple

COR9

Server-Pate

Ort: Dresden

Registriert: 09. November 2010

Beiträge: 281

[GELÖST] Gallery: Algorithmus für 2 verschiedene Thumb-Positionen

ich möchte mir selbst ein Gallerytemplate schreiben. Dabei sind maximal 6 Thumbnails in zwei verschiedenen Bereichen darzustellen. Ich arbeite mit einem YAML-Grid, das mir zwei Spalten mit Bildern nebeneinander zeigen soll:

 Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<div class="ym-grid">
	<div class="ym-g75 ym-gl">
		<div class="ym-gbox">
			<!-- News-Artikel -->
		</div>
	</div> <!-- SCHLUSS ym-g50 ym-gl -->
	<div class="ym-g25 ym-gr">
		<div class="ym-grid">
			<div class="ym-g50 ym-gl">
				<div class="ym-gbox-left">
					<!-- Gallery img 1 -->
					<!-- Gallery img 2 -->
					<!-- ... -->
				</div>
			</div>
			<div class="ym-g50 ym-gr">
				<div class="ym-gbox-right">
					<!-- Gallery img 4 -->
					<!-- Gallery img 5 -->
					<!-- ... -->
				</div>
			</div>
		</div>
	</div>
</div>

Wie »erkläre« ich dem Modul, dass es mir die Thumbnails nach einem bestimmten Algorithmus laden soll? Denkbar wäre Folgendes:

• Lade die ersten 3 Bilder in die linke Spalte, die nächsten 3 in die rechte.

• Lade Bilder, die höher sind als x in die linke Spalte, die andern in die rechte.

Ich wollte ursprünglich jQuery Masonry (viel weinger Markup) einsetzen, aber das wäre bei 4 bis 6 Bildern pro Galerie mit Kanonen auf Spatzen geschossen, andererseits beißt sich mit Photoswipe.

Cherry

arbeitet mit CMS/ms

Registriert: 15. Dezember 2010

Beiträge: 529

Re: [GELÖST] Gallery: Algorithmus für 2 verschiedene Thumb-Positionen

bin nicht ganz sicher ob dir das hier hilft. Ich habe etwas ähnliches vor einiger Zeit mal für das AV-Modul gemacht. Auch mit YAML. Ich wollte die Video Thumbnails auch in einem Raster mit 3 'Spalten' darstellen.

Meine Lösung sieht so aus:

 Hier klicken, um den Code zum Kopieren zu markieren

{foreach from=$itemlist item="item" name="welpenvideos"}

{if $smarty.foreach.welpenvideos.iteration % 3 == 1}
<div class="ym-grid ym-equalize linearize-level-2" style="width: 95%;margin-bottom: 10px;">
	<div class="ym-g33  ym-gl">
		<div style="width: 150px;">
		<h4 class="videotitel">{$item->detaillink}</h4>
		<a href="{$item->detailurl}"><img src="{$item->picture->url}" alt="{$item->name}"/></a>
		</div>
		<div style="font-size: 0.75em; color: #666666; margin-top: 0;">Datum: {$item->date_created|date_format:"%d.%m.%Y"}</div>
	</div>
	{if ($smarty.foreach.welpenvideos.last == 1)}
		<div class="ym-g33  ym-gl">
		&nbsp;
	</div>
		<div class="ym-g33  ym-gr">
		&nbsp;
	</div>
</div>	
	{/if}
	
{elseif $smarty.foreach.welpenvideos.iteration % 3 == 2}
	<div class="ym-g33 ym-gl">
		<div style="width: 150px;">
		<h4 class="videotitel">{$item->detaillink}</h4>
		<a href="{$item->detailurl}"><img src="{$item->picture->url}" alt="{$item->name}"/></a>
		</div>
		<div style="font-size: 0.75em; color: #666666; margin-top: 0;">Datum: {$item->date_created|date_format:"%d.%m.%Y"}</div>
	</div>
		{if ($smarty.foreach.welpenvideos.last == 1)}
		<div class="ym-g33  ym-gr">
		&nbsp;LAST -> LEER REIHE ENDE (MITTE)
		</div>	
</div>
	{/if}
{else}
	<div class="ym-g33 ym-gr">
		<div style="width: 150px;">
		<h4 class="videotitel">{$item->detaillink}</h4>
		<a href="{$item->detailurl}"><img src="{$item->picture->url}" alt="{$item->name}"/></a>
		</div>
		<div style="font-size: 0.75em; color: #666666; margin-top: 0;">Datum: {$item->date_created|date_format:"%d.%m.%Y"}</div>
	</div>
	</div>
<hr>
{/if}
{/foreach}

Ich gehe also die Iterationen der foreach Schleife durch, schau nach dem Rest, der beim Teilen durch 3 übrigbleibt ( das ist dieses %3) und gabe dementsprechend das Gridmodul aus. Müßte sich für andere Aufteilungen und Module anpassen lassen.

COR9

Server-Pate

Ort: Dresden

Registriert: 09. November 2010

Beiträge: 281

Re: [GELÖST] Gallery: Algorithmus für 2 verschiedene Thumb-Positionen

Danke für den schnellen Tipp, sieht vielversprechend aus. Ich werde das gleich mal testen.

COR9

Server-Pate

Ort: Dresden

Registriert: 09. November 2010

Beiträge: 281

Re: [GELÖST] Gallery: Algorithmus für 2 verschiedene Thumb-Positionen

@Cherry
Habe jetzt mit Deinem Ansatz eine super funktionierende Lösung mit 1 und 2 Bildern. Sobald ein 3. dazukommt, wird mir der komplette Markup nochmal drunter gepappt in der Version wie mit einem Bild. Ich verstehe zwar, dass das passiert. Muss ich den ganz Spaß jetzt verschachteln, um dem kleinen Mann in der Gallery zu sagen, wo das 3. Bild hinkommt?
Und wie funktioniert das mit einer Anzahl von n Bildern (also eine Anzahl, die ich nicht kenne)?

Cherry

arbeitet mit CMS/ms

Registriert: 15. Dezember 2010

Beiträge: 529

Re: [GELÖST] Gallery: Algorithmus für 2 verschiedene Thumb-Positionen

eigentlich mußt du nichts verschachteln.
Das sollte so immer weiter durchlaufen, bis eben keine Bilder mehr da sind.

Gedanklich ist das ähnlich, als wenn man ne Tabelle ausgeben möchte.

Ich gehe jetzt mal von ner 3-er Reihe aus. Deshalb das %3 = modulo 3, das heißt der Rest der beim Teilen durch 3 bleibt.
Beim Durchlaufen der Schleife wird also jedesmal der Rest bei Division durch 3 ermittelt (Vom Schleifendurchlauf).

Also Durchlauf 1:
1:3 = 0 Rest 1
Die Null interessiert nicht, nur der Rest.

Ist er = 1, dann habe ich das erste Bild in der Reihe. Es wird also eine neue grid-Reihe class="ym-grid" angefangen, dann darin ein linkes grid Element class="ym-g33  ym-gl" . Darein kommt dann der Thumbnailaufruf und was man sonst noch möchte.
Nun kann es ja sein, daß dieses Bild das letzte überhaupt ist. Dann müssen 2 leere Grids dran, damit die Reihe wieder komplett ist.

Das wir hier abgefragt

 Hier klicken, um den Code zum Kopieren zu markieren

{if ($smarty.foreach.welpenvideos.last == 1)}

Damit wäre der Fall erstes Bild erledigt.

Kommt der Fall Rest = 2
Dann haben wir ein 2.Bild in der Reihe ( das Mittlere).
Dann wird der mittlere Gridcontainer erzeugt: class="ym-g33  ym-gl", darin wieder Thumbnail-aufruf usw.

Auch hier kann es vorkommen, daß es das letzte Bild in der Reihe ist, und man diese ergänzen muß.
Das geht wieder mit der Abfrage wie oben und die Reihe wird gegebenenfalls mit einem leeren grid-container ergänzt.

Der letzte Fall: es bleibt kein Rest beim Teilen
Das ist das 3. Bild in der Reihe ( ganz rechts).
Da muß dann ein class="ym-gr" container hin.
Anschließend den umschließenden Container auch noch beenden mit </div>

Danach geht das Ganze wieder weiter, bis eben keine Bilder mehr da sind.

Ist jetzt ein wenig theoretisch das Ganze ... werde mal versuchen ein Template nachzuliefern.

Das Ganz sollte sich für andere Aufteilungen anpassen lassen, indem man dann eben mit einem andern Teiler arbeitet und die grid-Klassen anpaßt.

Cherry

arbeitet mit CMS/ms

Registriert: 15. Dezember 2010

Beiträge: 529

Re: [GELÖST] Gallery: Algorithmus für 2 verschiedene Thumb-Positionen

sodele ... hier mal eben quick&dirty  eine Template-Idee:

(ich gehe dabei davon aus, daß nur Bilder, keine Verzeichnisse ausgegeben werden. Dazu habe ich momentan noch keine fertige Lösung)

 Hier klicken, um den Code zum Kopieren zu markieren

<b>Templatename: YAML-Fancybox.tpl </b> <br />
{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}
{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}
<p>{$imagecount}</p>
<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>


	
    {* Start: Bildausgabe *}
    
    {foreach from=$images item="image" name="bildausgabe"}
    

{if $smarty.foreach.bildausgabe.iteration % 3 == 1}
<div class="ym-grid ym-equalize linearize-level-2" style="width: 95%;margin-bottom: 10px;">
	<div class="ym-g33  ym-gl">
		<a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
	</div>
	{if ($smarty.foreach.bildausgabe.last == 1)}
		<div class="ym-g33  ym-gl">
		&nbsp;
	</div>
		<div class="ym-g33  ym-gr">
		&nbsp;
	</div>
</div>	
	{/if}
	
{elseif $smarty.foreach.bildausgabe.iteration % 3 == 2}
	<div class="ym-g33 ym-gl">
		<a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
	</div>
		{if ($smarty.foreach.bildausgabe.last == 1)}
		<div class="ym-g33  ym-gr">
		&nbsp;
		</div>	
</div>
	{/if}
{else}
	<div class="ym-g33 ym-gr">
		<a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
	</div>
	</div>
<hr>
{/if}
{/foreach}

   
    {* Ende: Bildausgabe *}

Ich denke mal, das gibt erst mal ne Idee. Sicher muß man dann auch das css vom Gallerytemplate ausmisten/ anpassen. Das habe ich jetzt noch nicht gemacht

COR9

Server-Pate

Ort: Dresden

Registriert: 09. November 2010

Beiträge: 281

Re: [GELÖST] Gallery: Algorithmus für 2 verschiedene Thumb-Positionen

Jetzt passt es, ich habe zwar eine andere Anordnung verwendet. Als ich Dein Template mal in Aktion hatte, fiel es mir wie Schuppen aus den Haaren: Mir reicht was viel simpleres, nämlich lediglich eine Aufteilung aller Bilder auf das vorhandene Grid aus 2 Spalten.

Trotzdem denke ich an mindestens drei Projekte, deren Inhalte sich so viel leichter handhabbar machen lassen. Vielen Dank, Cherry.

Der Vollständigkeit halber meine Lösung. Ich teile die Bilder einfach über eine Abfrage nach gerade und ungerade auf (noch ungestylte Thumb-Lösung für photoswipe):

 Hier klicken, um den Code zum Kopieren zu markieren

[== Schnipsel Gallery-Template ==]
<div class="ym-g40 ym-gr">
    	<div class="ym-grid ps-gallery">
			<div class="ym-g50 ym-gl">
				<div class="ym-gbox-left">
                {foreach from=$images item="image"}
				{if $image->fileid is even}{if $image->isdir}{strip}<a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb}" alt="{$image->titlename}" /></a><br />{$image->titlename}
{else}
   <a href="{$image->file}" title="{$image->titlename}" class="gal">
    <img src="{$image->thumb}" alt="{$image->titlename} - {$image->comment}" title="{$image->titlename}"></a>{strip}{/if}
                {/if}
                {/foreach}				
				</div>
			</div>			
			<div class="ym-g50 ym-gr">
				<div class="ym-gbox-right" style="text-align:right;">
				{foreach from=$images item="image"}
    			{if $image->fileid is odd}{if $image->isdir}<a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb}" alt="{$image->titlename}" /></a><br />{$image->titlename}
{else}
   <a href="{$image->file}" title="{$image->titlename}" class="gal">
    <img src="{$image->thumb}" alt="{$image->titlename} - {$image->comment}" title="{$image->titlename}">
    </a>{/if}
                {/if}
                {/foreach}
				</div>
			</div>
		</div>
</div>

Cherry

arbeitet mit CMS/ms

Registriert: 15. Dezember 2010

Beiträge: 529

Re: [GELÖST] Gallery: Algorithmus für 2 verschiedene Thumb-Positionen

Das freut mich, daß du eine Lösung gefunden hast :-)