{{indexmenu_n>150}}

====== images special ======


**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:

\\


{{:english:phpwcms-system:article:contentparts:images-special:image-special_be01_1.gif|}}

\\
~~UP~~

===== Frontend: =====

==== [_] hide caption for thumbnails  ====

  * [_] hide caption for thumbnails

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: ====



{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe01_1.gif|}}


==== 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}
		<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>

\\


**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>

\\

==== [X] hide caption for thumbnails ====

  * [X] hide caption for thumbnails

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:** 


{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe02_1.gif|}}

\\

==== [INFOTEXT]......[/INFOTEXT] in template killed ====

  * [X] hide caption for thumbnails
  * <del>[INFOTEXT]......[/INFOTEXT]</del> in template killed

**The output:** 


{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe03_1.gif|}}


<code php|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 output ====
 
Have a look to the caption text, in zoomed images the text is always on. :-)

  * [X] hide caption for thumbnails
  * <del>[INFOTEXT]......[/INFOTEXT]</del> in template killed

**The output:** 


{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe04_1.gif|}}

\\
~~UP~~

===== Number of columns and picture distance =====

So that the output also generates the number of columns and the picture distance, the template must be extended.

  - Copy and rename the file ##/template/inc_default/imagespecial.tmpl## to ##/template/inc_cntpart/imagespecial/mytemplate.tmpl##. //For **mytemplate.tmpl** you can set your own name. //
  - After a recent call of the CPs this template appears in in the selection list and is selectable. 
  - Now we enhances the template at the appropriate place: 

<code html>
<!--IMAGES_ENTRY_START//-->
        <div style="float:left;" class="imageEntry" id="img{IMGID}">
</code>
<code html|h Template |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>

\\

===== quod vide: =====

[[english/phpwcms_replacer_rts/frontend_init/cp_trigger/shorten-img-caption-text]]