Zum Inhalt springen

Bildausgabe aus Spalte einzeln wrappen

Erstellt am 14. Januar 2010 · 3 Antworten · letzte Antwort am 14. Januar 2010

Tags: Bilder, Frage

koko11 ·

Guten Morgen,

nachdem ich bereits die Suche bemüht habe, und nur ähnliche Themen gefunden habe, die mir leider nicht ganz weiterhelfen, mache ich mal einen neuen Thread auf.

Ich möchte, dass Bilder aus einer Extra Spalte in einem bestimmten Bereich so gewrappt angezeigt werden, wie es dieses praktische Addon erwartet.

Hier mal mein schwachsinniger Code, aber ich denke ihr versteht was ich meine:

COVERFLOW < styles.content.getAdditional
COVERFLOW {
                stdWrap.wrap = <ul id="showcase">|</ul>
                stdWrap.wrapItemAndSub = <li> | </li> #funktioniert hier nicht, weiß ich
                  table = tt_content
                  select {
                  where = colPos = 4
                  max = 100
 
                }

              }

Durch diesen Tipp bin ich schonmal so weit gekommen:

<div id="coverflow">
 <ul id="showcase">
  <div class="csc-textpic-imagerow" style="width: 474px;">
   <ul>
     <li class="csc-textpic-image csc-textpic-firstcol" style="width: 232px;">
     </li>
     <li class="csc-textpic-image csc-textpic-lastcol" style="width: 232px;">
     </li>
   </ul>
  </div>
  <div class="csc-textpic-imagerow csc-textpic-imagerow-last" style="width: 474px;">
   <ul>
     <li class="csc-textpic-image csc-textpic-firstcol" style="width: 227px;">
     </li>
   </ul>
  </div>
 </ul>
</div>

Eigentlich sollte das dann so aussehen:

<a href="#next" class="controls" rel="next">Next</a>
<a href="#previous" class="controls" rel="previous">Previous</a>	
<ul id="showcase">
	<li><img src="images/1.jpg" alt="1" /></li>
	<li><img src="images/2.jpg" alt="2" /></li>
	<li><img src="images/3.jpg" alt="3" /></li>		
	...
	<li><img src="images/n.jpg" alt="n" /></li>
</ul>

Ich weiß nicht, ob ich da auch nicht ganz auf dem Holzweg bin... Gibts da eventuell einen eleganteren Ansatz?

Michaelh74 ·

Das geht sicher auch irgendwie mit Typo3.
Ich hab mir aber vor einiger Zeit ein kleines aber nützliches Plugin geschrieben, mit dem man einfach Bilder in einer Liste ausgeben kann.
Man kann einzelne Bilder wählen oder alternativ einen kompletten Ordner.
Ausgabe erfolgt komplett über stdWrap und somit mehr oder weniger beliebig konfigurierbar.
Diese Ext. ist aber noch nicht im TER verfügbar.
Bei Interesse einfach melden.

Gruß
Michael

koko11 ·

So, hab leider die Geduld verloren und die Holzhammer-Methode angewandt.

Einfach die Bilder per PrototypeJS aus dem CSC-Typo3-Müll rausnehmen und mir selbst das Gerüst bauen.

Ist nicht schön, funktioniert aber... bevor ich mich noch stundenlang mit Typoscript rumschlage 🙂

function cf() {
	var cfimg = [];
    var roots = $A($('coverflow').descendants());
    roots.each(function(el){
    	if(el.tagName == 'IMG') {
    		cfimg.push(el);
    	}
    });
    
    $('coverflow').down(0).hide();
    cfimg.each(function(img){
    	$('showcase').insert({bottom: img.wrap('li')});
    });
    
    initcf();
}

function initcf() {
	new Showcase.Horizontal($$('#showcase li'), $$('a.controls'), {duration: 0.3});
}
COVERFLOW {
stdWrap.wrap = |<div id="cfcont"><a href="#next" class="controls" rel="next">Next</a><a href="#previous" class="controls" rel="previous">Previous</a>  <ul id="showcase"></ul></div>
...
}