Differences

This shows you the differences between two versions of the page.

deutsch:phpwcms-system:artikel:contentparts:bilder-spezial [2009/10/06 08:41]
Knut Heermann (flip-flop)
deutsch:phpwcms-system:artikel:contentparts:bilder-spezial [2018/06/03 18:08] (current)
Line 4: Line 4:
-FIXME Grobbeschreibung+FIXME deutsche Grafiken (KH)
 +
 +
 +**Kleine visuelle Beschreibung:** der "Bildunterzeile //(caption)//" -Funktion, "Infotext" und verschiedene Bilder in einem Set.
 +
 +===== Backend: =====
 +
 +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 vergrößerten Bild angezeigt.
 +  * Im Template können wir bestimmen, welcher Text beim Vorschaubild angezeigt wird.\\ Wir werden einen der beiden Infotexte verwenden und schalten den Bildunterzeilentext (//caption)// für die Vorschaubilder aus. //(In diesem Beispiel entscheiden wir uns für den HTML-Text)//.
 +
 +Eine kurze Step by Step Beschreibung:
 +
 +\\
 +
 +
 +{{:english:phpwcms-system:article:contentparts:images-special:image-special_be01_1.gif|}}
 +
 +\\
 +~~UP~~
 +
 +===== Frontend: =====
 +
 +==== [_] Vorschaubild ohne Bildunterzeile  ====
 +
 +  * [_] Vorschaubild ohne Bildunterzeile
 +
 +Der Bildunterzeilentext und der Infotext sind eingeschaltet.
 +Wir sehen zwei verschiedene Versionen des Bildunterzeilentextes, erstens einen einfachen Text ohne HTML-Unterstützung und zweitens einen Text mit HTML-Unterstützung. \\
 +
 +Die gewünschte Ausgabe wird mit dem Template gesteuert.
 +
 +Z.B.:\\
 +<code html>
 +[INFOTEXT] ..{INFOTEXT}.. [/INFOTEXT] <!-- no html tags availabe //-->
 +[INFOHTML] ..{INFOTEXT}.. [/INFOHTML] <!-- html tags rendered    //-->
 +</code>
 +
 +\\
 +
 +==== Die Ausgabe: ====
 +
 +
 +{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe01_1.gif|}}
 +
 +
 +==== Template: ====
 +
 +**Ort:** template/inc_cntpart/imagespecial/my_default.tmpl
 +
 +\\
 +**Auszug zwischen:**
 +<file><!--IMAGES_ENTRY_START//--> .... <!--IMAGES_ENTRY_END//--></file>
 +
 +<code html|h my_default.tmpl snippet|h>
 +<!--IMAGES_ENTRY_START//-->
 + <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>
 +<!--IMAGES_ENTRY_END//-->
 +</code>
 +
 +\\
 +
 +
 +**Das komplette Template:**
 +
 +<code html|h my_default.tmpl|h>
 +<!--IMAGES_HEADER_START//-->
 +
 +[TITLE]<h1>{TITLE}</h1>[/TITLE]
 +[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
 +[TEXT]{TEXT}[/TEXT]
 +
 +<div class="images" id="images{ID}">
 +<!--IMAGES_HEADER_END//-->
 +
 +
 +<!--IMAGES_ENTRY_START//-->
 + <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>
 + <!--
 + Article-ID:      {CURRENT_ARTICLEID}
 + Category-ID:     {CURRENT_CATEGORYID}
 + Thumbnail image: {THUMB_NAME}
 +  ID/Hash/Ext:      {THUMB_ID}/{THUMB_HASH}/{THUMB_EXT}
 +  relative:         {THUMB_REL}
 +  absolute:         {THUMB_ABS}
 +  height/width:     {THUMB_HEIGHT}px/{THUMB_WIDTH}px
 +  height/width max: {THUMB_HEIGHT_MAX}px/{THUMB_WIDTH_MAX}px
 +  columns:          {THUMB_COLUMNS}
 +
 + If you are not sure wrap zoomed image:
 + [ZOOM]
 + Zoomed (big) image: {IMAGE_NAME}
 +  ID/Hash/Ext:      {IMAGE_ID}/{IMAGE_HASH}/{IMAGE_EXT}
 +  relative:         {IMAGE_REL}
 +  absolute:         {IMAGE_ABS}
 +  height/width:     {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px
 + [/ZOOM]
 +
 + Image URL: {IMAGE_URL}, Target: {IMAGE_TARGET}
 +
 + [EFFECT_1]Yes Effect 1[/EFFECT_1]
 + [EFFECT_2]Yes Effect 2[/EFFECT_2]
 + [EFFECT_3]Yes Effect 3[/EFFECT_3]
 +
 + //-->
 +<!--IMAGES_ENTRY_END//-->
 +
 +
 +<!--IMAGES_ENTRY_SPACER_START//-->
 +
 + <!-- space between images {SPACE}px -->
 +
 + <div style="float:left;"><img src="img/leer.gif" alt="" border="0" height="150" width="{SPACE}"></div>
 +
 +<!--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//-->
 +</code>
 +
 +
 +<note>**Dieser "abgeschnittene ..." Bildunterzeilentext //(caption)// ist eine spezielle Funktion.** \\
 +//(Der rote Text)//. -> [[deutsch/ersetzer_rts/frontend_init/cp_trigger/bildunterzeile-kuerzen]]</note>
 +
 +\\
 +
 +==== [X] Vorschaubild ohne Bildunterzeile ====
 +
 +  * [X] Vorschaubild ohne Bildunterzeile
 +
 +Es wird kein  Bildunterzeilentext //(caption)// für das Vorschaubild //(Thumbnail)// generiert, nur der Infotext wird angezeigt. //(Aber wir sehen den Bildunterzeilentext (caption) im vergrößerten Bild).// :!:
 +
 +**Die Ausgabe:**
 +
 +
 +{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe02_1.gif|}}
 +
 +\\
 +
 +==== [INFOTEXT]......[/INFOTEXT] im Template gelöscht ====
 +
 +  * [X] Vorschaubild ohne Bildunterzeile
 +  * <del>[INFOTEXT]......[/INFOTEXT]</del> im Template gelöscht
 +
 +**Die Ausgabe:**
 +
 +
 +{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe03_1.gif|}}
 +
 +
 +<code html|h my_default.tmpl|h>
 + <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>
 +</code>
 +
 +\\
 +
 +
 +==== LightBox-Ausgabe ====
 + 
 +Im vergrößerten Bild ist der Bildunterzeilentext //(caption)// vorhanden. :-)
 +
 +  * [X] Vorschaubild ohne Bildunterzeile
 +  * <del>[INFOTEXT]......[/INFOTEXT]</del> im Template gelöscht
 +
 +**Die Ausgabe:**
 +
 +
 +{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe04_1.gif|}}
 +
 +\\
 +~~UP~~
 +
 +===== {INFOTEXT} & LightBox: =====
 + 
 +
 +OG hat mit **{LIGHTBOX_CAPTION}** einen Tag eingeführt der auch gleichzeitig die Textübergaberegel für die LightBox beinhaltet, die lautet:\\
 +**title="mein Text für die LightBox"**(Allerdings in einer speziellen Formatierung ([[http://de.selfhtml.org/html/referenz/zeichen.htm|HTML-Entities]])-> aus **<**br /**>** wird  **&lt;**br /**&gt;**).
 +
 +
 +Also wenn z.B. der InfoText in die Lightbox soll, dann würde
 +
 +[ZOOM]<a href="{IMAGE_ABS}" **{LIGHTBOX_CAPTION}**target="_blank"{LIGHTBOX}>
 +
 +getauscht gegen
 +
 +[ZOOM]<a href="{IMAGE_ABS}" ##title="{INFOTEXT}"## target="_blank"{LIGHTBOX}>
 +
 +technisches: \\
 +----
 +
 +Die korrekte Form wäre (INFOTEXT geht nicht, daher INFOHTML):
 +
 +[ZOOM]<a href="{IMAGE_ABS}" ##title="&lt;p&gt;[PHP] echo html_entities(nl2br('{INFOHTML}'));[/PHP]&lt;/p&gt;"## target="_blank"{LIGHTBOX}>
 +
 +----
 +
 +Verwendet ruhig die erste Variante, sollte funktionieren.
 +
 +<note important>
 +Bitte das nun hinzugekommene Leerzeichen zwischen  ......**''title="{INFOTEXT}"## ##target="''**........
 +beachten.
 +</note>
 +
 +~~UP~~
===== Spaltenanzahl und Bildabstand ===== ===== Spaltenanzahl und Bildabstand =====
deutsch/phpwcms-system/artikel/contentparts/bilder-spezial.1254811296.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0