Zum Inhalt springen

Bilder in SINGLE Ansicht formatieren

Erstellt am 21. Juli 2007 · 9 Antworten · letzte Antwort am 8. Oktober 2008

Tags: Bilder, tt_news, Frage

Active ·

Hallo an alle,

ich habe folgendes Problem:
In der Single Ansicht des tt_news werden die Bilder am rechten Rand untereinander angezeigt.

Ich hätte diese gerne von links ab horizontal angeordnet.

Mein tt_news_template.html:

<div class="news-single-item">

<h2>###NEWS_TITLE###</h2>
<div class="news-single-timedata">###NEWS_DATE### ###NEWS_TIME### </div>
###CATWRAP_B### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###
###NEWS_AUTHOR###
###NEWS_SUBHEADER###
###NEWS_CONTENT###
###NEWS_IMAGE###

<div class="news-single-backlink">
<!--###LINK_ITEM###-->###BACK_TO_LIST###<!--###LINK_ITEM###-->
</div>
<hr class="clearer" />
###ADDINFO_WRAP_B###

###TEXT_RELATED###
###NEWS_RELATED###

###TEXT_FILES###
###FILE_LINK###

###TEXT_LINKS###
###NEWS_LINKS###

###TEXT_RELATEDBYCATEGORY###
###NEWS_RELATEDBYCATEGORY###

###ADDINFO_WRAP_E###
###NEWS_SINGLE_PAGEBROWSER###

</div>

Der entstandene Quelltext:

<div class="news-single-item">

<h2>BRAND 1 - GELÖSCHTER BRAND</h2>
<div class="news-single-timedata">21.07.2007 12:03 </div>
<div class="news-single-category"> </div>

<p class="news-single-author"> </p>
<h3>Sofa brannte, während Bewohnerin schlief...</h3>
<p class="bodytext">Ein Sofa hatte in einer Wohnung im 1. OG gebrannt. Die Bewohnerin hatte das Feuer selbst nicht bemerkt, wurde aber durch andere Hausbewohner geweckt. Die Bewohner brachten den Brand dann selbst unter Kontrolle. <br />Entfernen des Sofas aus der Brandwohnung. Ablöschen der Glutnester im Sofa mit 1 C-Rohr. Belüften der Brandwohnung und des Treppenhauses mittels Überdrucklüfter.<br />Die Bewohnerin wurde wegen Verdacht auf Rauchvergiftung vorsorglich vom Rettungsdienst ins Krankenhaus gebracht.
</p>
<p class="bodytext">Einsatz Nr. 10<br />Datum: 07. Mai 2006<br />Alarmierungszeit: 01:47 Uhr<br /><br />Einsatzdauer: 2:43 Std.<br /><br />Fahrzeuge im Einsatz: 2<br />Mann im Einsatz: 7</p>

<div class="news-single-img"><a href="index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2FLF1612_g7_01.jpg&width=500m&height=500&bodyTag=%3Cbody%20bgColor%3D%22%23ffffff%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=7cd997fb80c8077afd04c553a8e2216a" onclick="openPic('index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2FLF1612_g7_01.jpg&width=500m&height=500&bodyTag=%3Cbody%20bgColor%3D%22%23ffffff%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=7cd997fb80c8077afd04c553a8e2216a','ca8ae77fa6c26cdf12fe59376510133b','width=451,height=520,status=0,menubar=0'); return false;" target="thePicture"><img src="typo3temp/pics/49f5e13897.jpg" width="78" height="90" border="0" alt="" title="" /></a><p class="news-single-imgcaption"></p><a href="index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2FLF1612_l_01.jpg&width=500m&height=500&bodyTag=%3Cbody%20bgColor%3D%22%23ffffff%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=dbd334d24bba78813f0a8d9665d895e1" onclick="openPic('index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2FLF1612_l_01.jpg&width=500m&height=500&bodyTag=%3Cbody%20bgColor%3D%22%23ffffff%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=dbd334d24bba78813f0a8d9665d895e1','2eb6a8f6862d742e4a632c2e9c45b2b3','width=517,height=353,status=0,menubar=0'); return false;" target="thePicture"><img src="typo3temp/pics/0d4f339fb1.jpg" width="120" height="80" border="0" alt="" title="" /></a><p class="news-single-imgcaption"></p><a href="index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2FLF1612_g4_01.jpg&width=500m&height=500&bodyTag=%3Cbody%20bgColor%3D%22%23ffffff%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=d6ddecbe1efe01d56155c2809fdb12e6" onclick="openPic('index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2FLF1612_g4_01.jpg&width=500m&height=500&bodyTag=%3Cbody%20bgColor%3D%22%23ffffff%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=d6ddecbe1efe01d56155c2809fdb12e6','775cae7a278feeb9db7b861e7ba3cc60','width=459,height=520,status=0,menubar=0'); return false;" target="thePicture"><img src="typo3temp/pics/facfbe5d3a.jpg" width="80" height="90" border="0" alt="" title="" /></a><p class="news-single-imgcaption"></p></div>

<div class="news-single-backlink">
<a href="index.php?id=15" target="_top"><- Zurück zu: EINSÄTZE 2007</a>
</div>

Mich wundert jetzt eben, woher das <div class="news-single-img"> kommt, obwohl es im Template gar nicht angegeben ist.

Kann mir jemand bei der Formatierung der Bilder helfen bitte ?

brokemeister ·

Schau dir mal die Manueal an mit den Wrappern. Du kannst die auch mal das Standard Setup-Template anschauen dort wird das ganze formatiert...

Wenn du schon deinen Quelltext reinkopierst kürze in doch passend, damit solchen URLS niemand das lesen kann. Darum kann man dazu auch nix sagen...

Aber damit die Bilder nebeneinander kommen müssen die Bild-Element z.B. mit "float:left" mit CSS formatiert werden...

Active ·

Hallo,

danke erstmal für deine Tip.
Leider komme ich damit nicht ganz klar.

Mich wundert z.B. warum in meiner Vorlage nur "###NEWS_IMAGE###" steht und im Quelltext dann plötzlich das <div class="news-single-img"> und <p class="news-single-imgcaption"></p> auftaucht.

Hat den jemand das so im Einsatz, mit den Bildern horizontal ? Wie seht denn eure CSS und HTML-Style aus ?

Danke !

project_gonz ·

Hola,

Hatte auch das Problem.. nach langem suchen hab ich die Lösung auch gefunden.

geh mal in die: static/ts_old/setup.txt
ziemlich weit unten steht dann:

    imageCount = 2
    imgAltTextField = imagecaption
    imageWrapIfAny (
     <table border="0" cellpadding="0" cellspacing="0" align="right" width="1"><tr><td> | </td>
     <td><img src="clear.gif" width="15" height="1" border="0" /></td> </tr></table>
    )

einfach das

align="right" in "left"

ändern...
bei mir hats geklappt...

Active ·

Hallo,

danke für Deinen Tip.
Aber es klappt leider nicht #angry#
Ich habe es in zwei Installationen ausprobiert.

Ich habe jetzt den Marker (NEWS_IMANGE)so verschoben, daß er unter dem Text kommt:

<div class="news-single-item">

<h2>###NEWS_TITLE###</h2>
<div class="news-single-timedata">###NEWS_DATE### ###NEWS_TIME### </div>
###CATWRAP_B### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###
###NEWS_AUTHOR###
###NEWS_SUBHEADER###
###NEWS_CONTENT###
###NEWS_IMAGE###

<div class="news-single-backlink">
<!--###LINK_ITEM###-->###BACK_TO_LIST###<!--###LINK_ITEM###-->
</div>
<hr class="clearer" />
###ADDINFO_WRAP_B###

###TEXT_RELATED###
###NEWS_RELATED###

###TEXT_FILES###
###FILE_LINK###

###TEXT_LINKS###
###NEWS_LINKS###

###TEXT_RELATEDBYCATEGORY###
###NEWS_RELATEDBYCATEGORY###

###ADDINFO_WRAP_E###
###NEWS_SINGLE_PAGEBROWSER###

</div>

Jetzt werden die Bilder rechts angezeigt.
Mit dem folgenden Eintrag werden sie dann links rübergeschoben, aber eben immer noch untereinander:

plugin.tt_news.displaySingle.imageWrapIfAny = |

Ich glaub ich muss da nochmals neu anfangen 😢

project_gonz ·

hmm...

Habe gesehen du benutzt auch ein eigenes Template.
Ich habe ja das normale von tt_news im einsatz und
umgebaut. und das Template greift halt auf die oben beschriebene Datei zu.

Wenn nich kopierst du dein Template in das tt_news rein und dann sollte es gehen...

Active ·

Moin auch,

ich habe eigentlich nur das normale "tt_news_v2_template" genommen und einige Felder rausgeschmissen. Daher heißt die Datei jetzt anderst.

Auf diese verweise ich mit "templateFile = fileadmin/systemplates/tt_news_template.html"

Bei Include Static habe ich "CSS-based tmpl (tt_news)" ausgewählt.

Was meinst du mit reinkopieren vom Template ?

project_gonz ·

Dann musst du die Zeilen die ich oben gepostet habe in: static/ts_new/setup.txt
suchen.
Am besten benutzt du dazu auch das Template was von tt_news zugewiesen wird.
Da kannst du deinen Code ja reinsetzen!

gunther ·

Hallo,

es geht incl. der Bildunterschrift und dem CSS-based Template auch so:

plugin.tt_news.displaySingle{
    image.file.maxW >
    image.file.maxW =300
    imageWrapIfAny = <div>|</div><div style="clear:both;">&nbsp;</div>
    image.wrap = </div><div style="float:left; margin-right:10px;">|
}

- der image.wrap beginnt mit "</div>", floatet nach left, das wird dann mit dem imageWrapIfAny korrigiert und alle Bilder setzten sich horizontal nebeneinander.

Grüße

Seneca ·

Hallo,

wo kann man denn das Single-View-Img. das dei der Einstellung "bei Klick vergrößern" im Pop-up-Fenster erscheint in der Größe formatieren?

Kann mir jemand weiterhefeln?
Dank!
Seneca