[TYPO3-german] Re: Bilder je nach Erscheinungsbild für das Bild rendern
Heike Herzog-Kuhnke
hhk at kuhnke-owl.de
Mon Jan 14 15:50:27 CET 2019
Hallo Birgit,
danke für Deine ausführliche Erklärung.
Ich probiere das aus.
Ich habe eine Bootstrap Vorlage, die ich so angepasst habe, bis sie mir
gefiel und habe dann angefangen diese Vorlage umzusetzen. Nachdem das
Carousel, dass ich in dieser Vorlage so cool fand mit meinen bisherigen
Typoscript-Kenntnissen nicht wirklich so einfach umsetzbar war und ich
auch schon etwas eingerostet bin, dachte ich mir es würde Sinn machen,
wenn ich das Ganze dann auch mit Fluid umsetzen würde. Wenn wieder damit
neu beschäftigen, dann mit dem aktuellen Stand.
Dafür habe ich mir einige Videos angesehen und hatte sowieso schon die
Struktur mit Partials etc. in meinem fileadmin angelegt.
Als ich an den Punkt kam, dass ich andere Klassen benötige, habe ich
überlegt, wie die Umsetzung der gewünschten Teile im Backend nicht zu
unübersichtlich wird und nach dem Erstellen von Backend-Layouts
entschieden, dass ich aus dem Verzeichnis von FLuid-Template die
benötigten Dateien in meine Struktur kopiere und entsprechend anpasse,
was bis zu einem gewissen Grad auch funktioniert hat.
Ich schaue mir das mal an. Das mit er Größe nervt nämlich wirklich. Ich
würde die gerne wie gewohnt im Backend beim Erscheinungsbild für die
Bilder angeben. Ich hatte wegen dem einfach nicht klappen wollenden
Class: img-circle schon überlegt, ob ich an der Stelle einfach was
ähnliches mache wie für ColPos 0, weil ich hier auch nur eine bestimmte
Sorte von ColPos habe, wo ich es benötige. Wenn ich ehrlich bin gewöhne
ich mich allerdings schon dran, dass meine Bilder auf der Seite rund sind.
Trotzdem probiere ich Deine Tipps, weil es mich wurmt, dass ich das
nicht hinbekomme.
Vielen Dank für Deine Geduld :)
LG
HEike
Am 14.01.19 um 12:02 schrieb Birgit:
> Hallo Heike,
>
> 1.
>
> Löst es dein String-Problem, wenn du in Type.html
>
> <f:render partial="Media/Type/Image" arguments="{file: file, dimensions: dimensions, data: data, settings: settings}" />
>
> ersetzt mit:
>
> <f:render partial="Media/Rendering/Image" arguments="{file: file, dimensions: dimensions, settings: settings, data:data}" />
>
>
> 2.
>
> Prüfe zuerst, ob die Bildgröße per CSS gesetzt wird. Alles, was du im Fluid-Template als Bildgröße setzt, wird dann außer Kraft gesetzt und mit CSS überschrieben.
>
>
> 3.
>
> Image.html:
>
> <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
>
> {dimensions.width}, {dimensions.height} sind errechnete Werte, die sich aus der maxWidthinText (Typo3 Constants) der Anzahl der Spalten (tt_content-Element), deren Zwischenräumen (Typo3 Constants) und und Rahmen um die Bilder (Typo3 Constants) ergeben.
>
> Programmiert ist das in:
> typo3/sysext/frontend/Classes/Data-Processing/GalleryProcessor
>
>
> Was genau in welcher Reihenfolge ausgewertet - und jeweils wieder überschrieben - wird, kannst du dort nachlesen.
>
> Ich benutze die mitgelieferten TextPic-, Pic- und Media-Templates gar nicht, sondern baue mir für jeden Anwendungsfall passende Contentelemente.
> Die meisten Redakteure sind damit überfordert, sich aus den Standard-Templates selbst jeweils die passenden Varianten zusammenzustellen.
>
>
> Die Möglichkeiten zur Bilddarstellung im Frontend sind vielfältig und verwirrend, wenn man die Historie nicht kennt.
>
> Den Gallery-Prozessor brauchst du nicht, wenn du z.B. Bootstrap verwendest.
> Dann kannst du in eigenen Templates/Partials mit Bootstrap Grids oder Cards arbeiten.
>
>
> Wo gibst du die Bildgröße ein - und welche Eingaben willst du demzufolge auswerten?
>
> 3.1. In den TCA Feldern Bildbreite, Bildhöhe
> dann kommen die Werte aus der Tabell tt_content und die Parameter heißen: {data.imagewidth}, {data.imageheight}
>
> Media/Type/Image.html:
>
> <f:media class="image-embed-item" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
>
> ersetzen mit:
>
> <f:media class="image-embed-item" file="{file}" width="{data.imagewidth}" height="{data.imageheight}" alt="{file.alternative}" title="{file.title}" />
>
> Dabei können die Bilder allerding verzerrt werden, wenn die Ausgangsgröße nicht das entsprechende Seitenverhältnis hat.
> Deswegen nur entweder Höhe oder Breite angeben.
>
>
>
> 3.2. Beschnitt-Varianten des einzelnen Bilder (Bild zuschneiden) berücksichtigen
>
> Dann greift die Crop Variante für das einzelne Bild. Hier treten keine Verzerrungen auf, weil eine Kopie der Bilddatei angelegt und tatsächlich beschnitten und skaliert wird.
>
> Ich habe es nicht geprüft, aber vermutlich wird im Gallery-Prozessor dann die Crop-Variante einberechnet in die Anzahl der Spalten usw.
>
> Wenn du die Cropvariante und die im Backend definierte Breite übernehmen willst:
>
> <f:media class="image-embed-item" file="{file}" width="{data.imagewidth}" cropVariant="default" alt="{file.alternative}" title="{file.title}" />
>
> Oder eben feste Breiten oder Maximalbreiten passend zum Layout eingeben.
>
>
>
> VG Birgit
>
>
>
>
>
>> Am 14.01.2019 um 09:51 schrieb Heike Herzog-Kuhnke <hhk at kuhnke-owl.de>:
>>
>> Ach fast vergessen neben dem Problem mit der Klasse, mit dem ich fast leben könnte, wenn es sein muss, habe ich das etwas nervigere Problem, dass typo3 die im Backend eingegebene Größe für das Bild völlig ignoriert.
>>
>> Das wäre toll, wenn ich das hinbekommen könnte, weil diese Funktionalität ja durchaus sinnvoll ist.
>>
>> LG
>> Heike
>>
>> Am 14.01.19 um 08:00 schrieb Heike Herzog-Kuhnke:
>>> Danke Euch beiden.
>>> Ich schaue, dass ich da heute noch mal dran gehe.
>>> Entschuldigung für die falsche und irreführende Formulierung.
>>> Das ist das erste Mal, dass ich mit Fluid arbeite und für mich Neuland.
>>> Ich melde mich :)
>>> LG
>>> Heike
>>> Am 13.01.19 um 22:04 schrieb _doc:
>>>> Hallo Heike,
>>>>
>>>> Dein gebautes Switch-Konstrukt ist nicht XML- bzw. HTML-valide.
>>>>
>>>> Besser ware eine Inline-Notation.
>>>>
>>>> <div class="{f:if(condition:'{data.layout}<=1 || {data.layout}>3',then:'col-md-push-5', else:'')}{f:if(condition:'{data.layout}<=2',then:'col-md-push-7', else:'')}{f:if(condition:'{data.layout}==3',then:'col-md-push-7', else:'col-lg-4')}">
>>>>
>>>> ...
>>>> </div>
>>>>
>>>> Noch übersichtlicher wäre eine eigene Section, die du mit den jeweils gewünschten Parameter im Switch direkt im f:render notierst und zur Section durchreichst. Das geht zwar auf die Performance, ist aber insgesamt übersichtlicher. Vielleicht kannst du bei diesem Refactoring dann auch den Fehler ausmerzen.
>>>>
>>>> Mit besten Grüßen
>>>>
>>>> Dieter Porth
>>>>
>>>> P.S. Dein abgebildeter Code ist eine Fluid-Template und keine TypoScript.
>>>>
>>>> Am 13.01.2019 um 08:46 schrieb Heike Herzog-Kuhnke:
>>>>> Liebe Liste,
>>>>>
>>>>> weil es so gut geklappt hat, hätte ich noch eine Frage. Nicht dass es schlimm wäre, dass meine Bilder alle in Kreisform angezeigt werden, aber irgendwie war das anders geplant...
>>>>>
>>>>> Ich habe für meine Seite das Problem gehabt, dass ich die Bilder je nach Erscheinungsbild unterschiedlich darstellen muss. Dafür habe ich das Fluid-Element TextPic verwendet, was für die Div-Klassen auch wunderbar funktioniert.
>>>>>
>>>>> Jetzt sollen aber eigentlich für das Layout Teaser (Layout 3) die Bilder mit einer Klasse "img-circle" versehen werden, die dafür sorgt, dass die Bilder rund dargestellt werden. Zusätzlich sollten diese Bilder eigentlich auf das Format 140 x 140 Pixel zugeschnitten werden (bzw. verkleinert.
>>>>>
>>>>> Mit beiden Aufgaben komme ich nicht weiter. Eine Angabe der Bildgröße im Backend scheint leider keine Auswirkung mehr auf meine Bilder zu haben und ich bekomme es nicht hin, dass ich je nach Layout eine andere Klasse zum Bild dazu spiele.
>>>>>
>>>>> Hier mein Typoskript:
>>>>>
>>>>> ----------------------------
>>>>> TextPic.html
>>>>> ----------------------------
>>>>> <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
>>>>> <f:layout name="Default" />
>>>>> <f:section name="Header">
>>>>> <f:if condition="{gallery.rows}">
>>>>> <f:switch expression="{data.layout}">
>>>>> <f:case value="1"><div class="col-md-7 col-md-push-5"> </f:case>
>>>>> <f:case value="2"><div class="col-md-7"></f:case>
>>>>> <f:case value="3"><div class="col-lg-4"></f:case>
>>>>> <f:defaultCase><div class="col-md-7 col-md-push-5"></f:defaultCase>
>>>>> </f:switch>
>>>>>
>>>>> <f:if condition="{data.layout} == 3">
>>>>> <f:render partial="Media/Gallery" arguments="{_all}" />
>>>>> </f:if>
>>>>>
>>>>> <f:if condition="{gallery.position.noWrap} != 1">
>>>>> <f:render partial="Header/Header" arguments="{
>>>>> header: data.header,
>>>>> layout: data.header_layout,
>>>>> positionClass: 'featurette-heading',
>>>>> default: settings.defaultHeaderType}" />
>>>>> </f:if>
>>>>>
>>>>> </f:if>
>>>>> </f:section>
>>>>>
>>>>> <f:section name="Main">
>>>>>
>>>>> <f:if condition="{data.bodytext}">
>>>>>
>>>>> <f:then>
>>>>> <f:if condition="{gallery.position.noWrap}">
>>>>> <f:render partial="Header/Header" arguments="{
>>>>> header: data.header,
>>>>> layout: data.header_layout,
>>>>> positionClass: 'featurette-heading',
>>>>> default: settings.defaultHeaderType}" />
>>>>> </f:if>
>>>>> <f:format.html>{data.bodytext}</f:format.html>
>>>>> <f:if condition="{data.layout} != 3">
>>>>> </div>
>>>>> </f:if>
>>>>>
>>>>> </f:then>
>>>>> <f:else>
>>>>> <f:if condition="{gallery.position.noWrap}">
>>>>> <f:if condition="{data.header}">
>>>>> <f:render partial="Header/Header" arguments="{
>>>>> header: data.header,
>>>>> layout: data.header_layout,
>>>>> positionClass: 'featurette-heading',
>>>>> default: settings.defaultHeaderType}" />
>>>>> </div>
>>>>> </f:if>
>>>>> </f:if>
>>>>> </f:else>
>>>>> </f:if>
>>>>> <f:if condition="{data.layout} != 3">
>>>>> <f:render partial="Media/Gallery" arguments="{_all}" />
>>>>> </div>
>>>>> </f:if>
>>>>> <f:if condition="{data.layout} == 3">
>>>>> <f:render partial="Header/SubHeader" arguments="{
>>>>> subheader: data.subheader,
>>>>> layout: data.header_layout,
>>>>> positionClass: 'btn btn-default',
>>>>> link: data.header_link,
>>>>> default: settings.defaultHeaderType}" />
>>>>> </div>
>>>>> </f:if>
>>>>>
>>>>>
>>>>> </f:section>
>>>>> </html>
>>>>>
>>>>> ---------------------------
>>>>> Media/Gallery.html
>>>>> --------------------------
>>>>>
>>>>> <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
>>>>> <f:if condition="{gallery.rows}">
>>>>> <f:switch expression="{data.layout}">
>>>>> <f:case value="1"><div class="col-md-5 col-md-pull-7"> </f:case>
>>>>> <f:case value="2"><div class="col-md-5"></f:case>
>>>>> <f:case value="3"></f:case>
>>>>> <f:defaultCase></f:defaultCase>
>>>>> </f:switch>
>>>>>
>>>>> <f:for each="{gallery.rows}" as="row">
>>>>> <f:for each="{row.columns}" as="column">
>>>>> <f:if condition="{column.media}">
>>>>> <f:render partial="Media/Type" arguments="{file: column.media, dimensions: column.dimensions, data: data, settings: settings}" />
>>>>> </f:if>
>>>>> </f:for>
>>>>> </f:for>
>>>>> <f:if condition="{gallery.position.horizontal} == 'center'">
>>>>> </f:if>
>>>>> <f:switch expression="{data.layout}">
>>>>> <f:case value="1"></div></f:case>
>>>>> <f:case value="2"></div></f:case>
>>>>> <f:case value="3"></f:case>
>>>>> <f:defaultCase></f:defaultCase>
>>>>> </f:switch>
>>>>>
>>>>> </f:if>
>>>>> </html>
>>>>>
>>>>> ---------------------------
>>>>>
>>>>> Hier klappt alles wunderbar mit den Switches.
>>>>>
>>>>> ---------------------------
>>>>> Media/Type/Image.html
>>>>> ---------------------------
>>>>> <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
>>>>> <figure class="image">
>>>>> <f:if condition="{file.link}">
>>>>> <f:then>
>>>>> <f:link.typolink parameter="{file.link}" title="{file.title}">
>>>>> <f:render partial="Media/Rendering/Image" arguments="{file: file, dimensions: dimensions, settings: settings}" />
>>>>> </f:link.typolink>
>>>>> </f:then>
>>>>> <f:else>
>>>>> <f:if condition="{data.image_zoom}">
>>>>> <f:then>
>>>>> <ce:link.clickEnlarge image="{file}" configuration="{settings.media.popup}">
>>>>> <f:render partial="Media/Rendering/Image" arguments="{file: file, dimensions: dimansions, settings: settings}" />
>>>>> </ce:link.clickEnlarge>
>>>>> </f:then>
>>>>> <f:else>
>>>>> <f:render partial="Media/Rendering/Image" arguments="{file: file, dimensions: dimensions, settings: settings}" />
>>>>> </f:else>
>>>>> </f:if>
>>>>> </f:else>
>>>>> </f:if>
>>>>> <f:if condition="{file.description}">
>>>>> <figcaption class="image-caption">
>>>>> {file.description}
>>>>> </figcaption>
>>>>> </f:if>
>>>>> </figure>
>>>>> </html>
>>>>>
>>>>> ------------------------------
>>>>>
>>>>>
>>>>> ----------------------
>>>>> Media/Rendering/Image.html
>>>>> ------------------------
>>>>> <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
>>>>> <f:media class="img-circle {f:if(condition: '{data.layout} != 3', then: 'featurette-image img-responsive center-block')}" file="{file}" width="{dimensions.width}" height="{dimensions.height}" alt="{file.alternative}" title="{file.title}" />
>>>>>
>>>>> </html>
>>>>> ---------------------------
>>>>>
>>>>> Immer wenn ich hier um img-circle herum einer Condition eingebe, um je nach Layout die passende Klasse auszugeben, dann bleibt class leer. Mit dieser Variante wird die Klasse im alternativen Layout hinzugefügt, aber es scheint als müsste ich mindestens eine Klasse angeben.
>>>>>
>>>>> Der Versuch es mit diesem switch zu lösen, wie in Gallery.html bringt in dieser Variante ein Oops:
>>>>>
>>>>> ---------------------------
>>>>> <f:if condition="{gallery.rows}">
>>>>> <f:switch expression="{data.layout}">
>>>>> <f:case value="1">
>>>>> <f:media class="featurette-image img-responsive center-block" file="{file}" alt="{file.alternative}" title="{file.title}" />
>>>>> </f:case>
>>>>> <f:case value="2">
>>>>> <f:media class="featurette-image img-responsive center-block" file="{file}" alt="{file.alternative}" title="{file.title}" />
>>>>> </f:case>
>>>>> <f:case value="3">
>>>>> <f:media class="img-circle" file="{file}" alt="{file.alternative}" title="{file.title}" />
>>>>> </f:case>
>>>>> <f:defaultCase>
>>>>> <f:media class="featurette-image img-responsive center-block" file="{file}" alt="{file.alternative}" title="{file.title}" />
>>>>> </f:defaultCase>
>>>>> </f:switch>
>>>>> ---------------------------
>>>>>
>>>>> Nicht dass es schlimm ist, wenn alle Bilder der Homepage in rund angezeigt werden, wenns nicht anders geht, dann kann ich damit leben. Dass ich aber irgendwie die Option verloren habe im Backend die Größe zu manipulieren ärgert mich schon. Dass ich nicht verstehe, wie ich es richtig mache oder wo mein Fehler mit den Klassen ist, ärgert mich natürlich auch, nachdem der Rest so gut funktioniert hat.
>>>>>
>>>>> Ich wäre sehr dankbar, wenn mir hier auch noch auf die Sprünge geholfen werden könnte :)
>>>>>
>>>>> LG
>>>>> Heike
>>>>>
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> TYPO3-german mailing list
>>>>> TYPO3-german at lists.typo3.org
>>>>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
>>>>
>>
>> _______________________________________________
>> TYPO3-german mailing list
>> TYPO3-german at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german
>
More information about the TYPO3-german
mailing list