{{indexmenu_n>150}}

====== Bilder spezial ======


FIXME deutsche Grafiken (KH)



**Kleine visuelle Beschreibung:** der "Bildunterzeile //(caption)//" -Funktion, "Infotext" und verschiedene Bilder in einem Set. 

===== Backend: =====

Bitte schaue dir das dritte Bilderset an, die Bilder sind unterschiedlich. 

Der Kater is das Thumb und der kleine Hund das zu vergrößernde Bild. Wir brauchen also zu jedem Bild einen eigenen Beschreibungstext. 

  * Der Bildunterzeilentext wird generell beim vergrößerten Bild angezeigt. 
  * 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)//.

Eine kurze Step by Step Beschreibung:

\\


{{:english:phpwcms-system:article:contentparts:images-special:image-special_be01_1.gif|}}

\\
~~UP~~

===== Frontend: =====

==== [_] Vorschaubild ohne Bildunterzeile  ====

  * [_] Vorschaubild ohne Bildunterzeile

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

Die gewünschte Ausgabe wird mit dem Template gesteuert.

Z.B.:\\
<code html>
[INFOTEXT] ..{INFOTEXT}.. [/INFOTEXT] <!-- no html tags availabe //-->
[INFOHTML] ..{INFOTEXT}.. [/INFOHTML] <!-- html tags rendered    //-->
</code>

\\

==== Die Ausgabe: ====


{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe01_1.gif|}}


==== 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}">
		{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//-->
</code>

\\


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

\\

==== [X] Vorschaubild ohne Bildunterzeile ====

  * [X] Vorschaubild ohne Bildunterzeile

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


{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe02_1.gif|}}

\\

==== [INFOTEXT]......[/INFOTEXT] im Template gelöscht ====

  * [X] Vorschaubild ohne Bildunterzeile
  * <del>[INFOTEXT]......[/INFOTEXT]</del> im Template gelöscht

**Die Ausgabe:** 


{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe03_1.gif|}}


<code html|h my_default.tmpl|h>
	<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>
</code>

\\


==== LightBox-Ausgabe ====
 
Im vergrößerten Bild ist der Bildunterzeilentext //(caption)// vorhanden. :-)

  * [X] Vorschaubild ohne Bildunterzeile
  * <del>[INFOTEXT]......[/INFOTEXT]</del> im Template gelöscht

**Die Ausgabe:** 


{{:english:phpwcms-system:article:contentparts:images-special:image-special_fe04_1.gif|}}

\\
~~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 =====

Damit die Ausgabe auch die/den eingstellte/n Spaltenanzahl und Bildabstand generiert, muss das Template erweitert werden. 

  - Die Datei ##/template/inc_default/imagespecial.tmpl## wird nach ##/template/inc_cntpart/imagespecial/mytemplate.tmpl## kopiert und umbenannt. //Für **mytemplate.tmpl** kann ein eigener Name verwendet werden. //
  - Nach einem neuerlichen Aufruf des CPs erscheint dieses Template in der Auswahlliste und wird selektiert. 
  - Nun wird das Template an der entsprechenden Stelle bearbeitet bzw. erweitert mit: 

<code html>
<!--IMAGES_ENTRY_START//-->
        <div style="float:left;" class="imageEntry" id="img{IMGID}">
</code>
<code html|h Template erweitert |h>
<!--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//-->
</code>

\\

===== Siehe auch: =====

[[deutsch/ersetzer_rts/frontend_init/cp_trigger/bildunterzeile-kuerzen]]