images special

FIXME short descriptiom

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

Backend:

Frontend:

The output: * [_] hide caption for thumbnails

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

The output: * [X] hide caption for thumbnails

[INFOTEXT]……[/INFOTEXT] in template killed

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>

The output: LightBox (have a look to the capture text) * [X] hide caption for thumbnails

[INFOTEXT]……[/INFOTEXT] in template killed

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:

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

Shorten the image CAPTION

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

Show pagesource Old revisions