Differences

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

--- deutsch:phpwcms-system:artikel:contentparts:bilder-spezial [2009/11/21 23:47]
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.
+**Kleine visuelle Beschreibung:** der "Bildunterzeile //(caption)//" -Funktion, "Infotext" und verschiedene Bilder in einem Set.
-==== Backend: ====
+===== Backend: =====
 Bitte schaue dir das dritte Bilderset an, die Bilder sind unterschiedlich.
@@ Line 16: / Line 16: @@
 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.
+  * Der Bildunterzeilentext wird generell beim vergröß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)//.
+  * 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)//.
-Nun folgt eine Step by Step Beschreibung:
+Eine kurze Step by Step Beschreibung:
 \\
@@ Line 35: / Line 35: @@
   * [_] Vorschaubild ohne Bildunterzeile
-DEr Bildunterzeiletext und der Infotext sind eingschaltet.
+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 HTML-Text mit Unterstützung. \\
+Wir sehen zwei verschiedene Versionen des Bildunterzeilentextes, erstens einen einfachen Text ohne HTML-Unterstützung und zweitens einen Text mit HTML-Unterstützung. \\
-Die Ausgabe wird einfach mit dem Template gesteuert.
+Die gewünschte Ausgabe wird mit dem Template gesteuert.
 Z.B.:\\
@@ Line 48: / Line 48: @@
 \\
-**Die Ausgabe:**
+==== Die Ausgabe: ====
 {{:english:phpwcms-system:article:contentparts:images-special:image-special_fe01_1.gif|}}
-<code html|h my_default.tmpl|h>
+==== 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}
@@ Line 74: / Line 84: @@
 		</div>
 	</div>
+<!--IMAGES_ENTRY_END//-->
 </code>
-<note>**Dieser "abgeschnittene ..." Bildunterzeilentext //(caption)// ist eine spezielle Funktion.** //(Der rote Text)//. \\
+\\
--> [[deutsch/ersetzer_rts/frontend_init/cp_trigger/bildunterzeile-kuerzen]]</note>
+**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>
 \\
@@ Line 85: / Line 186: @@
   * [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).// :!:
+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:**
@@ Line 105: / Line 206: @@
-<code php|h my_default.tmpl|h>
+<code html|h my_default.tmpl|h>
 	<div style="float:left;" class="imageEntry" id="img{IMGID}">
 		{IMAGE}
@@ Line 141: / Line 242: @@
 ~~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 =====

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

Show page Old revisions