NAVIGATION
Small visual description: of the “caption” function, “info text” and different “images”.
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.
Please have a look to the following step by step description:
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.:
[INFOTEXT] ..{INFOTEXT}.. [/INFOTEXT] <!-- no html tags availabe //--> [INFOHTML] ..{INFOTEXT}.. [/INFOHTML] <!-- html tags rendered //-->
Location: template/inc_cntpart/imagespecial/my_default.tmpl
Snippet between:
<!--IMAGES_ENTRY_START//--> .... <!--IMAGES_ENTRY_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;"> [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//-->
The complete template:
<!--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//-->
<note>This “truncated …” caption text is a special function. (The red one).
→ Shorten the image CAPTION</note>
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:
The output:
<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>
Have a look to the caption text, in zoomed images the text is always on.
The output:
So that the output also generates the number of columns and the picture distance, the template must be extended.
<!--IMAGES_ENTRY_START//--> <div style="float:left;" class="imageEntry" id="img{IMGID}">
<!--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//-->