Responsive Bilder / Image Cropping

[kartenmann]

Hallo zusammen,

ich stolpere immer wieder über das Thema responsiver Bilder. Klar, die CSS Media Querys sind hilfreich, allerdings hilft das häufig nur bei Hintergrundbildern. Darüber hinaus würde ich unsere Redakteure mit CSS Querys definitiv überfordern.

Gibt es ein Plugin mit welchem es möglich einem Element verschiedene Bilder für unterschiedliche Displaygrößen zuzuordnen?
Dabei denke ich z.B. an <picture> von HTML5: https://webdesign.tutsplus.com/tutor...ges--cms-21015
Sehr edel wäre es natürlich, wenn man die Grafik für verschiedene Auflösungen zuschneiden (croppen) könnte.

Leider habe ich noch keine Erfahrung im Entwickeln von Contao Erweiterungen, aber das Thema lässt mich nicht los.

Für Hinweise bin ich sehr dankbar!

Beste Grüße
Kartenmann

[Andreas]

Dies ist alles onboard inkl. croppen. Siehe Layout-Themes-Bildgrößen. Dazu gibt es ein Tutorial bei https://rocksolidthemes.com/de/conta...picture-contao und ein sehr gutes Video https://www.youtube.com/watch?v=ub8yROSQyQ4

[lucina]

Damit solltest Du weiterkommen: https://rocksolidthemes.com/de/conta...picture-contao. Contao kann das seit mehreren Jahren ... ;-)

[kartenmann]

Okay.... dafür mag ich ja Contao, - man wird immer wieder positiv überrascht

Vielen Dank euch!

[BeaB]

Hallo Contao Fans,

ich stehe gerade vor dem gleichen Problem wie der TE.

Gibt es ein Plugin mit welchem es möglich einem Element verschiedene Bilder für unterschiedliche Displaygrößen zuzuordnen?

Dies ist alles onboard inkl. croppen. Siehe Layout-Themes-Bildgrößen. Dazu gibt es ein Tutorial bei https://rocksolidthemes.com/de/conta...picture-contao und ein sehr gutes Video https://www.youtube.com/watch?v=ub8yROSQyQ4

Hört bei dem Video bitte mal ab 36:10 rein. Dort sagt Peter Müller "Es ist mit der Picture Lösung auch möglich, komplett andere Grafiken auszuliefern. Das kann Contao aber nicht."

Mir ist auch unklar, wie das gehen soll, denn ich habe unter "Bildgrößen" keine Möglichkeit im Feld "Media Query" verschiedene Dateinamen einzufügen.


Viele Grüße von Bea

[Andreas]

Die Frage von @Kartenmann ist mit Nein zu beantworten, wenn das Core-Feature mit unterschiedlichen Größen und Wichtigem Teil nicht ausreicht.

Da musst du selber ran. Spontan fällt mir rocksolid-custom-elements ein, oder eine passende Ordnerstruktur

file/
  images/
    big/
    medium/
    small/

Das Bild aus big/ zuordnen und im Template die entsprechenden Versionen holen.

CSS-Hintergrundbilder kann man dynamisch mit JS zuweisen.