Images mehrspaltig und "automatisch" zentriert
( wurde überarbeitet, R533 )
ContentPart: Bilder < div >
verwendetes Template: sample.tmpl
So sehen die Bilder mit dem Template sample.tmpl aus!
ContentPart: Bilder < div >
verwendetes eigenes neues Template (4 Spalten)
Bild 1
Bild 2
Bild 3
Bild 4
Bild 5
ContentPart: Bilder < div >
verwendetes eigenes neues Template (3 Spalten)
Und so mit dem veränderten Template.
Bild 1
Bild 2
Bild 3
Bild 4
Bild 5
ContentPart: Bilder < div >
verwendetes eigenes neues Template (1 Spalten)
Bild 1
Bild 2
Bild 3
Bild 4
Bild 5
Es gibt auch noch die Möglichkeit, das Template so zu gestalten, dass die Angabe der Spalten unrelevant ist und anhand der Bildbreite die Anordnung der Bilder sich auf das umgebende DIV focusziert.
Mit der Konfiguration oben im Template läßt sich das leicht einstellen:
col = 1000
Das war's dann auch schon!
Das veränderte Template!
Dank pepe'S Hinweisen, Knobelei und meiner Nachbearbeitung R533
<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please, do not use comments for value lines
; settings will overwrite ContentPart settings
;
; "center_image" Werteauswahl:
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
center_image = 0
;
;width = 240
;height = 180
;crop = 1
;
;col = 3
;space = 10
;
;zoom = 1
;lightbox = 1
;nocaption = 1
;
<!--IMAGE_SETTINGS_END//-->
<!--IMAGES_HEADER_START//-->
<!-- CSS:
.images { text-align: center; }
.imageEntry { display: inline-block;
border: 1px solid #BBBBBB;
padding: 5px;
margin:3px 0 0 3px; }
.imageEntry p {margin-top: 3px;}
-->
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<div class="images"><!--
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//--> --><div class="imageEntry">
{IMAGE}[CAPTION]
<p>{CAPTION}</p>[/CAPTION]
</div><!-- <!--IMAGES_ENTRY_END//-->
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--> --><br /><!-- <!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
--></div>
<!--IMAGES_FOOTER_END//-->