Bilder spezial

Grobbeschreibung

Kleine visuelle Beschreibung: der “Bildunterzeile (caption)” Funktion, “Infotext” und verschiedene Bilder in einem Set.

Bitte schaue dir das dritte Bilderset an, die Bilder sind unterschiedlich.

Der Kater is das Thumb und der kleine Hund das zu vergrößernde Bild. Wir brauchen also zu jedem Bild einen eigenen Beschreibungstext.

• Der Bildunterzeilentext wird generell beim vergößerten Bild angezeigt.
• Im Template können wir bestimmen, welcher Text beim Vorschaubild erscheinen soll.
  Wir werden einen der beiden Infotexte verwenden und schalten den Bildunterzeilentext (caption) für die Vorschaubilder aus. (Wir werden den HTML-Text verwenden).

Nun folgt eine Step by Step Beschreibung:

• [_] Vorschaubild ohne Bildunterzeile

DEr Bildunterzeiletext und der Infotext sind eingschaltet. Wir sehen zwei verschiedene Versionen des Bildunterzeilentextes, erstens einen einfachen Text ohne HTML-Unterstützung und zweitens einen HTML-Text mit Unterstützung.

Die Ausgabe wird einfach mit dem Template gesteuert.

Z.B.:

[INFOTEXT] ..{INFOTEXT}.. [/INFOTEXT] <!-- no html tags availabe //-->
[INFOHTML] ..{INFOTEXT}.. [/INFOHTML] <!-- html tags rendered    //-->

Die Ausgabe:

    <div style="float:left;" class="imageEntry" id="img{IMGID}">
        {IMAGE}
        <div style="color: red;">
        [CAPTION]<p><span class="cut_caption-c30">{CAPTION}</span></p>[/CAPTION][CAPTION_ELSE]<p>{IMGNAME}</p>[/CAPTION_ELSE]
        </div>
        <div style="width:{THUMB_WIDTH}px;">
        [INFOTEXT]
            <div style="color: green;">
            <!-- auto <p>info text</p> text -->
            {INFOTEXT}
            </div>
        [/INFOTEXT]
        [INFOHTML]
            <div style="color: blue;">
            <!-- pure HTML info text -->
            {INFOHTML}
            </div>
        [/INFOHTML]
        </div>
    </div>

<note>Dieser “abgeschnittene …” Bildunterzeilentext (caption) ist eine spezielle Funktion. (Der rote Text).
→ Bildunterzeile kürzen</note>

• [X] Vorschaubild ohne Bildunterzeile

Es wird kein Bildunterzeilentext (caption) für das Thmbnail generiert, nur der Infotext wird angezeigt. (Aber wir sehen den Bildunterzeilentext (caption) im vergrößerten Bild).

Die Ausgabe:

• [X] hide caption for thumbnails
• [INFOTEXT]……[/INFOTEXT] in template killed

TDie Ausgabe:

    <div style="float:left;" class="imageEntry" id="img{IMGID}">
        {IMAGE}
        <div style="color: red;">
        [CAPTION]<p><span class="cut_caption-c30">{CAPTION}</span></p>[/CAPTION][CAPTION_ELSE]<p>{IMGNAME}</p>[/CAPTION_ELSE]
        </div>
        <div style="width:{THUMB_WIDTH}px;">
 
        [INFOHTML]
            <div style="color: blue;">
            <!-- pure HTML info text -->
            {INFOHTML}
            </div>
        [/INFOHTML]
        </div>
    </div>

Have a look to the caption text, in zoomed images the text is always on.

• [X] hide caption for thumbnails
• [INFOTEXT]……[/INFOTEXT] in template killed

Die Ausgabe:

Damit die Ausgabe auch die/den eingstellte/n Spaltenanzahl und Bildabstand generiert, muss das Template erweitert werden.

1. Die Datei /template/inc_default/imagespecial.tmpl wird nach /template/inc_cntpart/imagespecial/mytemplate.tmpl kopiert und umbenannt. Für mytemplate.tmpl kann ein eigener Name verwendet werden.
2. Nach einem neuerlichen Aufruf des CPs erscheint dieses Template in der Auswahlliste und wird selektiert.
3. Nun wird das Template an der entsprechenden Stelle bearbeitet bzw. erweitert mit:

<!--IMAGES_ENTRY_START//-->
        <div style="float:left;" class="imageEntry" id="img{IMGID}">

<!--IMAGES_ENTRY_SPACER_START//-->
 
   <div style="float:left;"><img src="img/leer.gif" alt="" border="0" height="150" width="{SPACE}"></div> <!-- space between images {SPACE}px -->
 
<!--IMAGES_ENTRY_SPACER_END//-->
 
 
<!--IMAGES_ROW_SPACER_START//-->
 
   <div style="clear:both;"><img src="img/leer.gif" alt="" border="0" height="{SPACE}" width="100"></div><!-- space between image rows {SPACE}px -->
 
<!--IMAGES_ROW_SPACER_END//-->
 
 
<!--IMAGES_FOOTER_START//-->
 
   <div style="clear:both;"><!-- clear //--></div>
 
</div>
 
<!--IMAGES_FOOTER_END//-->

Bildunterzeile kürzen