Differences

This shows you the differences between two versions of the page.

deutsch:phpwcms-system:artikel:contentparts:bilder-spezial [2009/11/21 23:51]
Knut Heermann (flip-flop)
deutsch:phpwcms-system:artikel:contentparts:bilder-spezial [2018/06/03 18:08] (current)
Line 10: Line 10:
**Kleine visuelle Beschreibung:** der "Bildunterzeile //(caption)//" -Funktion, "Infotext" und verschiedene Bilder in einem Set. **Kleine visuelle Beschreibung:** der "Bildunterzeile //(caption)//" -Funktion, "Infotext" und verschiedene Bilder in einem Set.
-==== Backend: ====+===== Backend: =====
Bitte schaue dir das dritte Bilderset an, die Bilder sind unterschiedlich. Bitte schaue dir das dritte Bilderset an, die Bilder sind unterschiedlich.
Line 17: Line 17:
  * Der Bildunterzeilentext wird generell beim vergrößerten Bild angezeigt.   * Der Bildunterzeilentext wird generell beim vergrößerten Bild angezeigt.
-  * Im Template können wir bestimmen, welcher Text beim Vorschaubild erscheinen soll.\\ Wir werden einen der beiden Infotexte verwenden und schalten den Bildunterzeilentext (//caption)// für die Vorschaubilder aus. //(Hier verwenden wir beispielhaft den HTML-Text)//.+  * Im Template können wir bestimmen, welcher Text beim Vorschaubild angezeigt wird.\\ Wir werden einen der beiden Infotexte verwenden und schalten den Bildunterzeilentext (//caption)// für die Vorschaubilder aus. //(In diesem Beispiel entscheiden wir uns für den HTML-Text)//.
-Nun folgt eine kurze Step by Step Beschreibung:+Eine kurze Step by Step Beschreibung:
\\ \\
Line 35: Line 35:
  * [_] Vorschaubild ohne Bildunterzeile   * [_] Vorschaubild ohne Bildunterzeile
-Der Bildunterzeiletext und der Infotext sind eingschaltet.+Der Bildunterzeilentext und der Infotext sind eingeschaltet.
Wir sehen zwei verschiedene Versionen des Bildunterzeilentextes, erstens einen einfachen Text ohne HTML-Unterstützung und zweitens einen Text mit HTML-Unterstützung. \\ Wir sehen zwei verschiedene Versionen des Bildunterzeilentextes, erstens einen einfachen Text ohne HTML-Unterstützung und zweitens einen Text mit HTML-Unterstützung. \\
-Die richtige Ausgabe wird einfach mit dem Template gesteuert.+Die gewünschte Ausgabe wird mit dem Template gesteuert.
Z.B.:\\ Z.B.:\\
Line 48: Line 48:
\\ \\
-**Die Ausgabe:** +==== Die Ausgabe: ====
{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe01_1.gif|}} {{:english:phpwcms-system:article:contentparts:images-special:image-special_fe01_1.gif|}}
-<code html|h my_default.tmpl|h>+ 
 +==== Template: ==== 
 + 
 +**Ort:** template/inc_cntpart/imagespecial/my_default.tmpl 
 + 
 +\\ 
 +**Auszug zwischen:**  
 +<file><!--IMAGES_ENTRY_START//--> .... <!--IMAGES_ENTRY_END//--></file> 
 + 
 +<code html|h my_default.tmpl snippet|h
 +<!--IMAGES_ENTRY_START//-->
<div style="float:left;" class="imageEntry" id="img{IMGID}"> <div style="float:left;" class="imageEntry" id="img{IMGID}">
{IMAGE} {IMAGE}
Line 74: Line 84:
</div> </div>
</div> </div>
 +<!--IMAGES_ENTRY_END//-->
</code> </code>
-<note>**Dieser "abgeschnittene ..." Bildunterzeilentext //(caption)// ist eine spezielle Funktion.** //(Der rote Text)//. \\ +\\ 
--> [[deutsch/ersetzer_rts/frontend_init/cp_trigger/bildunterzeile-kuerzen]]</note>+ 
 + 
 +**Das komplette Template:** 
 + 
 +<code html|h my_default.tmpl|h> 
 +<!--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//--> 
 +</code> 
 + 
 + 
 +<note>**Dieser "abgeschnittene ..." Bildunterzeilentext //(caption)// ist eine spezielle Funktion.** \\  
 +//(Der rote Text)//. -> [[deutsch/ersetzer_rts/frontend_init/cp_trigger/bildunterzeile-kuerzen]]</note>
\\ \\
Line 85: Line 186:
  * [X] Vorschaubild ohne Bildunterzeile   * [X] Vorschaubild ohne Bildunterzeile
-Es wird kein  Bildunterzeilentext //(caption)// für das Thmbnail generiert, nur der Infotext wird angezeigt. //(Aber wir sehen den Bildunterzeilentext (caption) im vergrößerten Bild).// :!:+Es wird kein  Bildunterzeilentext //(caption)// für das Vorschaubild //(Thumbnail)// generiert, nur der Infotext wird angezeigt. //(Aber wir sehen den Bildunterzeilentext (caption) im vergrößerten Bild).// :!:
**Die Ausgabe:** **Die Ausgabe:**
Line 105: Line 206:
-<code php|h my_default.tmpl|h>+<code html|h my_default.tmpl|h>
<div style="float:left;" class="imageEntry" id="img{IMGID}"> <div style="float:left;" class="imageEntry" id="img{IMGID}">
{IMAGE} {IMAGE}
Line 141: Line 242:
~~UP~~ ~~UP~~
 +===== {INFOTEXT} & LightBox: =====
 + 
 +
 +OG hat mit **{LIGHTBOX_CAPTION}** einen Tag eingeführt der auch gleichzeitig die Textübergaberegel für die LightBox beinhaltet, die lautet:\\
 +**title="mein Text für die LightBox"**(Allerdings in einer speziellen Formatierung ([[http://de.selfhtml.org/html/referenz/zeichen.htm|HTML-Entities]])-> aus **<**br /**>** wird  **&lt;**br /**&gt;**).
 +
 +
 +Also wenn z.B. der InfoText in die Lightbox soll, dann würde
 +
 +[ZOOM]<a href="{IMAGE_ABS}" **{LIGHTBOX_CAPTION}**target="_blank"{LIGHTBOX}>
 +
 +getauscht gegen
 +
 +[ZOOM]<a href="{IMAGE_ABS}" ##title="{INFOTEXT}"## target="_blank"{LIGHTBOX}>
 +
 +technisches: \\
 +----
 +
 +Die korrekte Form wäre (INFOTEXT geht nicht, daher INFOHTML):
 +
 +[ZOOM]<a href="{IMAGE_ABS}" ##title="&lt;p&gt;[PHP] echo html_entities(nl2br('{INFOHTML}'));[/PHP]&lt;/p&gt;"## target="_blank"{LIGHTBOX}>
 +
 +----
 +
 +Verwendet ruhig die erste Variante, sollte funktionieren.
 +
 +<note important>
 +Bitte das nun hinzugekommene Leerzeichen zwischen  ......**''title="{INFOTEXT}"## ##target="''**........
 +beachten.
 +</note>
 +
 +~~UP~~
===== Spaltenanzahl und Bildabstand ===== ===== Spaltenanzahl und Bildabstand =====
deutsch/phpwcms-system/artikel/contentparts/bilder-spezial.1258843885.txt.gz · Last modified: 2018/06/03 18:06 (external edit)
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