Liste der Anhänge anzeigen (Anzahl: 1)
Artikel anteasern, animiert mit Überblendung
Moin alle,
nach einem Wochenende der Suche ohne wirkliches Ergebnis frage ich Euch mal um Rat.
Für eine Aufmacherseite suche ich die Möglichkeit, interessante Artikel, die irgenwo im Seitenbaum sind, anzuteasern gemäß dieses Mockups (siehe auch spox):
http://www.contao-community.de/attac...3&d=1309825137
Klick auf die kleinen Teaser bringen sie in den oberen großen Teaser-Bereich und ein Klick dort geht dann zum Artikel. Voraussichtlich soll auch mit niedriger Frequenz automatisch durch die Artikel-Teaser geblättert werden (wie bei spox).
Die Texte sollen (möglichst) die Artikel-Teaser sein (unten per CSS overflow: hidden; verkürzt, Überschrift unten mit display: none; oder so ausgeblendet). Die Bilder sollen die Teaser-Bilder sein (also ist Einsatz von [teaserimages] geplant). Sie müssten aber natürlich automatisch herunterskaliert werden
Ich habe so ziemlich alles überflogen, das mit Sliding/Überblenden zu tun hat: alle reinen Bild-Galerie-Varianten scheiden aus. Aus meiner Sicht bleibt zur Zeit nur noch wenig übrig: die Erweiterungen, die nicht nur Bilder, sondern auch beliebiege Inhalts-Elemente schieben/überblenden können und eine Art von Paginierung besitzen, die beliebiges HTML erlaubt (für die kleinen Teaser), so dass man mit Insert Tags arbeiten kann.
- pk_noobslide: hat gerade das Überblenden gelernt. Aber die Paginierung kann man so gar nicht beeinflussen (außer per Template-Anpassung).
- ce_slider: sieht recht vielversprechend aus, wenn auch nur rc1. Habe ich aber noch nicht installiert/genau genug angesehen, um zu entscheiden, ob es beliebiges HTML in der Paginierung beherrscht.
- tabcontrol: kann im Prinzip in den Tabs beliebiges HTML haben. Ist ansonsten nicht sehr komfortabel zu bedienen und kann bisher kein Überblenden.
- ma_accessibleTabs: guter Ansatz, aber hat es nie ins Repository geschafft. Auch der Downloadlink sieht schon "strange" aus und eine kurze Besichtigung zeigt: der Entwickler hatte keine Zeit, das Ding fertig zu stellen: nur DE Übersetzung, die dann ein Mix aus EN/DE ist, mit reichlich Tippfehlern. Sehr schade ... ich habe mich bisher noch nicht getraut, diese Erweiterung zu installieren.
Aber eventuell/voraussichtlich habe ich etwas übersehen und nicht nach den richtigen Dingen gesucht. Inzwischen gibt es ja so unglaublich viele Erweiterungen.
Für jeden Hinweis bin ich dankbar.
LG, Georg
Liste der Anhänge anzeigen (Anzahl: 1)
Hi Oliver,
vielen Dank für den umgehenden Bugfix ... das waren ja nur wenige Minuten zwischen Meldung und Fix! Toll. Die Lösung mit $GLOBALS['TL_CSS']['news_slideshow'] ist auch ideal: so sieht jeder die Slideshow schon mal "life und in Farbe" direkt nach der Installation und kann dennoch das CSS außerhalb von system/modules anpassen. Andere machen es auch so (habe bei pk_NoobSlide nachgesehen).
Deine Erweiterung ist echt gut und ich konnte damit genau das machen, was ich wollte. Siehe Bild in der Anlage. Die Anpassung war im Wesentlichen CSS Styling (noch nicht wirklich schön). 2 Kleinigkeiten habe ich im Template news_slideshow.tpl (updatesicher an einer Kopie im Template Ordner) angepasst, die eventuell von allgemeinem Interesse sind bzw. sogar von Hause aus mitgebracht werden könnten:
- Große Bilder verlinkt, damit man auch bei Klick auf das Bild zum Artikel kommt und nicht erst genau auf die H3 Überschrift zielen muss.
- Archivnamen in einen Span gepackt, damit man ihn anders formatieren kann
Die Änderung für den Span ist ja trivial; für den Link um das Bild zeige ich hier 2 Varianten. Beide sind in der ersten foreach Schleife anzubringen, die die List Items mit den Images ausgibt (im ul.news_slideshow_pictures).
Simpel, ohne Titel-Attribut:
PHP-Code:
<ul id="pictures<?php echo $this->id1; ?>" class="news_slideshow_pictures">
<?php foreach ($this->items as $item): ?>
- <li><img src="<?php echo $item['image_src']; ?>" alt="bild"></li>
+ <li>
+ <?php if ($item['link']): ?><a href="<?php echo $item['link']; ?>"><?php endif; ?>
+ <img src="<?php echo $item['image_src']; ?>" alt="bild">
+ <?php if ($item['link']): ?></a><?php endif; ?>
+ </li>
<?php endforeach; ?>
</ul>
Besser, mit Titel-Attribut generiert durch Contao (siehe Anhang):
PHP-Code:
<ul id="pictures<?php echo $this->id1; ?>" class="news_slideshow_pictures">
<?php foreach ($this->items as $item): ?>
- <li><img src="<?php echo $item['image_src']; ?>" alt="bild"></li>
+ <li>
+ <?php if ($item['link']) { echo preg_replace('/^(<[^>]+>).*/', '$1', $item['linkHeadline']); } ?>
+ <img src="<?php echo $item['image_src']; ?>" alt="bild">
+ <?php if ($item['link']): ?></a><?php endif; ?>
+ </li>
<?php endforeach; ?>
</ul>
Eine letzte kleine Template-Änderung für meine Zwecke war, auch die Unterüberschrift des News-Teasers als H4 mit auszugeben ... aber das ist dann wirklich nicht mehr unbedingt von allgemeinem Interesse. Wie immer, kann sich ja jeder mit <?php echo $this->showTemplateVars(); ?> mal anschauen, welche Variablen/Werte verfügbar sind und das Beste daraus machen.
Deine Erweiterung funktioniert dann auch 100% in allen guten XP-Browsern (Opera, FireFox 3, Safari, Chrome). In IE8 XP funktioniert praktisch auch alles ... nur das Überblenden/Fade der großen Bilder nicht. Stattdessen wird hart umgeschaltet. Nicht, dass mich das wirklich bekümmert, aber MooTools sollte das doch eigentlich hinbekommen, oder? Tests mit W7 und FireFox 4 bzw. diversen Mac-Browsern stehen noch aus.
Ein dickes, dickes Lob und Dankeschön für diese äußerst nützliche Erweiterung!!!
LG, Georg
