images special

short descriptiom

Small visual description: of the “capture” function, “info text” and different “images”.

Have a look to the third picture set, they are different.

The cat it 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 capture text for the thumbnail. (We will use the html text).

Please have a look to the following step by step description:

• [_] 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 without an html tag and second the html text including tags.

The output is simply controlled in the template.

E.g.:

[INFOTEXT] ............... [/INFOTEXT]
[INFOHTML] .<b>.......</b> [/INFOHTML]

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;">
        [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>

• [X] hide caption for thumbnails

No caption text for thumbnails is generated, only the info text is shown.

The output:

• [X] hide caption for thumbnails
• [INFOTEXT]……[/INFOTEXT] in template killed

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 capture text

• [X] hide caption for thumbnails
• [INFOTEXT]……[/INFOTEXT] in template killed

The output:

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

1. 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.
2. After a recent call of the CPs this template appears in in the selection list and is selectable.
3. Now we enhances the template at the appropriate place:

<!--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//-->

Shorten the image CAPTION