Differences

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

--- deutsch:phpwcms-system:artikel:contentparts:bilder-spezial [2009/04/25 08:06]
127.0.0.1 external edit
+++ 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 =====
+Damit die Ausgabe auch die/den eingstellte/n Spaltenanzahl und Bildabstand generiert, muss das Template erweitert werden.
+  - 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. //
+  - Nach einem neuerlichen Aufruf des CPs erscheint dieses Template in der Auswahlliste und wird selektiert.
+  - Nun wird das Template an der entsprechenden Stelle bearbeitet bzw. erweitert mit:
+<code html>
+<!--IMAGES_ENTRY_START//-->
+        <div style="float:left;" class="imageEntry" id="img{IMGID}">
+</code>
+<code html|h Template erweitert |h>
+<!--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//-->
+</code>
+\\
+===== Siehe auch: =====
+[[deutsch/ersetzer_rts/frontend_init/cp_trigger/bildunterzeile-kuerzen]]

deutsch/phpwcms-system/artikel/contentparts/bilder-spezial.1240639579.txt.gz · Last modified: 2018/06/03 18:06 (external edit)

Show page Old revisions