Differences

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

--- english:phpwcms-system:article:contentparts:images-special [2009/11/21 22:17]
Knut Heermann (flip-flop)
+++ english:phpwcms-system:article:contentparts:images-special [2018/06/03 18:09] (current)
@@ Line 3: / Line 3: @@
 ====== images special ======
-FIXME short descriptiom
-**Small visual description:** of the "capture" function, "info text" and different "images".
+**Small visual description:** of the "caption" function, "info text" and different "images".
+===== Backend: =====
+Have a look to the third picture set, they are different.
+The "cat" is the thumb and the little "dog" the zoomed image. So we need an own description text for each image.
+  * The caption text is generally displayed in the zoomed image. :!:
+  * In the template, we can choose what text is to appear below the thumbnail.\\ We use one of the two info texts and turn off the caption text for the thumbnail. //(In this example we will use the html text)//.
+Please have a look to the following step by step  description:
+\\
-==== Backend: ====
 {{:english:phpwcms-system:article:contentparts:images-special:image-special_be01_1.gif|}}
@@ Line 20: / Line 31: @@
   * [_] hide caption for thumbnails
-Have a look to the third picture set, they are different.
+Caption text is on and the info text too.
+We have two different version for the info text, first only the plain text //(can´t render html tags)// and second the html text including rendered tags. \\
+The output is simply controlled in the template.
+E.g.:\\
+<code html>
+[INFOTEXT] ..{INFOTEXT}.. [/INFOTEXT] <!-- no html tags availabe //-->
+[INFOHTML] ..{INFOTEXT}.. [/INFOHTML] <!-- html tags rendered    //-->
+</code>
+\\
+==== The output: ====
-**The output:**
 {{:english:phpwcms-system:article:contentparts:images-special:image-special_fe01_1.gif|}}
-<code html|h my_default.tmpl|h>
+==== Template: ====
+**Location:** template/inc_cntpart/imagespecial/my_default.tmpl
+\\
+**Snippet between:**
+<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 48: / Line 81: @@
 		</div>
 	</div>
+<!--IMAGES_ENTRY_END//-->
 </code>
+\\
+**The complete 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>**This "truncated ..." caption text is a special function.** //(The red one)//. \\
+-> [[english/phpwcms_replacer_rts/frontend_init/cp_trigger/shorten-img-caption-text]]</note>
 \\
@@ Line 56: / Line 182: @@
   * [X] hide caption for thumbnails
-No caption text for thumbnails is generated, only the info text is shown.
+No caption text for thumbnails is generated, only the info text is shown. //(But we will see the caption text by zooming the image).// :!:
 **The output:**
@@ Line 68: / Line 194: @@
   * [X] hide caption for thumbnails
-  * [INFOTEXT]......[/INFOTEXT] in template killed
+  * <del>[INFOTEXT]......[/INFOTEXT]</del> in template killed
 **The output:**
@@ Line 99: / Line 225: @@
 ==== LightBox output ====
-Have a look to the capture text
+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
+  * <del>[INFOTEXT]......[/INFOTEXT]</del> in template killed
 **The output:**

english/phpwcms-system/article/contentparts/images-special.1258838251.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show page Old revisions