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:



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

[INFOTEXT] ..{INFOTEXT}.. [/INFOTEXT] <!-- no html tags availabe //-->
[INFOHTML] ..{INFOTEXT}.. [/INFOHTML] <!-- html tags rendered    //-->


The output:

Template:

Location: template/inc_cntpart/imagespecial/my_default.tmpl


Snippet between:

<!--IMAGES_ENTRY_START//--> .... <!--IMAGES_ENTRY_END//-->

my_default.tmpl snippet

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

my_default.tmpl

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

This “truncated …” caption text is a special function. (The red one).
Shorten the image CAPTION


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


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

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

The output:

my_default.tmpl

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


LightBox output

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

The output:


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.

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

Template

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


quod vide:

english/phpwcms-system/article/contentparts/images-special.txt · Last modified: 2009/11/26 11:20 by Knut Heermann (flip-flop)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0