[TYPO3-german] Re: Re: Bilder je nach Erscheinungsbild für das Bild rendern
Heike Herzog-Kuhnke
hhk at kuhnke-owl.de
Thu Jan 17 18:55:28 CET 2019
Hmhhh, irgednwie klappt das nicht so wie gewünscht.
Wobei witzigerweise die Bilder in den Main-Elementen verkleinert werden,
aber die für den Teaser nicht...
Hoffe ich komme am Wochenende wieder dazu mehr zu machen.
LG
Heike
Am 14.01.19 um 15:50 schrieb Heike Herzog-Kuhnke:
> 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