NAVIGATION
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 **<**br /**>**). | ||
+ | |||
+ | |||
+ | 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="<p>[PHP] echo html_entities(nl2br('{INFOHTML}'));[/PHP]</p>"## 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 ===== |