Re: [TYPO3-german] Bilder je nach Erscheinungsbild für das Bild rendern
Hallo Heike,
1.
Löst es dein String-Problem, wenn du in Type.html
ersetzt mit:
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:
{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:
ersetzen mit:
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:
Oder eben feste Breiten oder Maximalbreiten passend zum Layout eingeben.
VG Birgit
> Am 14.01.2019 um 09:51 schrieb Heike Herzog-Kuhnke :
>
> 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.
>>>
>>>
>>>
>>> ...
>>>
>>>
>>> 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
http://typo3.
Re: [TYPO3-german] Bilder je nach Erscheinungsbild für das Bild rendern
Hallo Heike,
Dein gebautes Switch-Konstrukt ist nicht XML- bzw. HTML-valide.
Besser ware eine Inline-Notation.
...
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
http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers";
data-namespace-typo3-fluid="true">
{data.bodytext}
---
Media/Gallery.html
--
http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers";
xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers";
data-namespace-typo3-fluid="true">
arguments="{file: column.media, dimensions: column.dimensions, data:
data, settings: settings}" />
---
Hier klappt alles wunderbar mit den Switches.
---
Media/Type/Image.html
---
http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers";
xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers";
data-namespace-typo3-fluid="true">
title="{file.title}">
arguments="{file: file, dimensions: dimensions, settings: settings}" />
configuration="{settings.media.popup}">
arguments="{file: file, dimensions: dimansions, settings: settings}" />
arguments="{file: file, dimensions: dimensions, settings: settings}" />
{file.description}
--
--
Media/Rendering/Image.html
http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers";
data-namespace-typo3-fluid="true">
width="{dimensions.width}" height="{dimensions.height}"
alt="{file.alternative}" title="{file.title}" />
---
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:
---
file="{file}" alt="{file.alternative}" title="{file.title}" />
file="{file}" alt="{file.alternative}" title="{file.title}" />
alt="{file.alternative}" title="{file.title}" />
file="{file}" alt="{file.alternative}" title="{file.title}" />
---
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 Opti
Re: [TYPO3-german] Bilder je nach Erscheinungsbild für das Bild rendern
Hallo Heike,
Du musst {data.layout} an die Partials übergeben, damit der Parameter dort
verfügbar und auswertbar ist.
VG Birgit
> 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
>
> http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers";
> data-namespace-typo3-fluid="true">
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>condition="{gallery.position.noWrap}">
>
>
>
> {data.bodytext}
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ---
> Media/Gallery.html
> --
>
> http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers";
> xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers";
> data-namespace-typo3-fluid="true">
>
>
>
>
>
>
>
>
>
>
>
>partial="Media/Type" arguments="{file: column.media, dimensions:
> column.dimensions, data: data, settings: settings}" />
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> ---
>
> Hier klappt alles wunderbar mit den Switches.
>
> ---
> Media/Type/Image.html
> ---
> http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers";
> xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers";
> data-namespace-typo3-fluid="true">
>
>
>
>title="{file.title}">
>arguments="{file: file, dimensions: dimensions, settings: settings}" />
>
>
>
>
>
>configuration="{settings.media.popup}">
>partial="Media/Rendering/Image" arguments="{file: file, dimensions:
> dimansions, settings: settings}" />
>
>
>
>partial="Media/Rendering/Image" arguments="{file: file, dimensions:
> dimensions, settings: settings}" />
>
>
>
>
>
>
> {file.description}
>
>
>
>
>
> --
>
>
> --
> Media/Rendering/Image.html
>
> http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers";
> data-namespace-typo3-fluid="true">
> width="{dimensions.width}" height="{dimensions.height}"
> alt="{file.alternative}" title="{file.title}" />
>
>
> ---
>
> 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.
>
> De
