Drupal 7 Focal Point – Bild auf Desktop vollständig anzeigen, nur in Responsive zuschneiden

am 11.04.2025 - 16:27 Uhr in
Hallo zusammen,
wir betreuen eine mit Drupal 7 umgesetzte Website. Auf der Startseite befindet sich ein Slider, der Bilder im Format 1920 x 1080 Pixel anzeigt.
Unser Kunde hat uns nun darauf hingewiesen, dass auf mobilen Geräten bzw. in responsiven Ansichten der falsche Bildausschnitt angezeigt wird – wichtige Bildelemente sind teilweise nicht sichtbar. Um das zu korrigieren, haben wir überlegt, das Focal Point Modul von Drupal zu verwenden, mit dem man einen Fokuspunkt auf einem Bild setzen kann.
Das Problem: Sobald wir einen Focal Point definieren, wird das Bild auch in der Desktop-Ansicht beschnitten, was wir nicht möchten. Auf dem Desktop soll das Bild in voller Originalgröße (1920 x 1080) angezeigt werden. Nur bei kleineren Bildschirmgrößen soll der Fokuspunkt verwendet werden, um den Bildausschnitt automatisch anzupassen.
Eine zusätzliche Herausforderung: Die Seite wurde ursprünglich von einem früheren Mitarbeitenden umgesetzt, der nicht mehr bei uns im Team ist. Daher kennen wir nicht alle Details der bisherigen Umsetzung.
Unsere Ziele:
Das Bild soll auf Desktop-Geräten vollständig dargestellt werden (ohne Zuschnitt).
Nur auf kleineren Viewports (mobil, Tablet, etc.) soll der Fokuspunkt genutzt werden, um das Bild sinnvoll zuzuschneiden.
Hat jemand Erfahrung mit dem Focal Point Modul in Drupal 7 in diesem Zusammenhang? Oder gibt es alternative Lösungen oder Best Practices, um genau dieses Verhalten umzusetzen?
Vielen Dank vorab für jede Hilfe!
- Anmelden oder Registrieren um Kommentare zu schreiben
Na ja, dass ist was Bildstile
am 12.04.2025 - 20:11 Uhr
Na ja, dass ist was Bildstile tun. Was ihr vergesst ist, dass das Theme auch noch einen Brakepoint Braut und Drupal ein Modul, welches dafür sorgt, dass Bildstile abhängig von diesem Brakepoint geladen werden.
Jetzt hab ich eine Frage: Sind im Theme der Website des Kunden denn überhaupt Brakepoints definiert?
Also ihr könnt einen neuen Bildstil anlegen und mit Focalpoint den Zuschnitt auf dem Bild auswählen, der angezeigt werden soll.
Wenn ihr aber den gleichen Bildstil dafür verwendet wie den, der die Desktop-Bilder erzeugt, dann sind die halt kaputt. Das scheint eure Ausgangslage zu sein.
https://www.drupal.org/project/responsive_image_styles
https://youtu.be/VSGqHE6WIs0?si=rZmWDsEUFIHX3SgL
https://www.drupal.org/project/flexslider/releases
Ich muss leider sagen, dass ich mich mit Drupal 7 nicht besonders viel beschäftigt habe, weil es tot ist. Ich hab ab 8 wieder angefangen und kann da deshalb nicht viel helfen, aber ihr solltet euch das Video mal ansehen. Dass ist zwar 10 Jahre alt, aber wenn es euer Problem löst hab ich zumindest gut gegoogelt, was ca. 30 Sekunden gedauert hat. Wenn's funktioniert wüsste ich gern, was ihr eurem Kunden für einmal YouTube gucken, nachbauen und testen ob es wie gewünscht funktioniert verlangt :-)
per css sollte man das ändern
am 12.04.2025 - 16:28 Uhr
per css sollte man das ändern können.
Vielen Dank für deine
am 14.04.2025 - 11:48 Uhr
Vielen Dank für deine Antwort.
Ich habs nun hingekriegt, indem ich einen Brakepoint erstellt habe. Nun funktioniert es, wie gewünscht.
Wir verrechnen ihm wenn überhaupt eine Stunde, länger habe ich nun tatsächlich nicht gebraucht.
Das Einzige, was mir jedoch noch aufgefallen ist, dass einzelne Bilder nicht richtig zugeschnitten werden und dadurch einen schwarzen Rand untendran bekommen. Weisst du woran das liegt? :)
Nein leider nicht ohne die
am 14.04.2025 - 12:03 Uhr
Nein leider nicht ohne die Seite gesehen zu haben. Ich würde den betreffenden Bildstil prüfen. Vielleicht wird ein Image Effekt angewendet.
auch das ginge evtl. rein per
am 14.04.2025 - 12:53 Uhr
auch das ginge evtl. rein per css
Das ist richtig, wäre aber
am 14.04.2025 - 13:03 Uhr
Das ist richtig, wäre aber sehr wahrscheinlich schon aufgefallen. Beide Stellen zu prüfen schadet sicher nicht.
Das wäre die Seite:
am 14.04.2025 - 13:28 Uhr
Das wäre die Seite: https://www.bkarchitektur.ch/. Im Responsive (Mobile) ist das zweite Bild im Slider so komisch zugeschnitten mit einem schwarzen Rand.
Davon gibt es sogar zwei
am 14.04.2025 - 14:09 Uhr
Davon gibt es sogar zwei Bilder.
Vermutung 1 (ich hab dasdingbis jetzt nur auf dem Tablet offen gehabt) Das schwarze ist der Hintergrund des Sliders.
Vermutung 2 die beiden betroffenen Bilder sind insgesamt anders dimensioniert als die, bei denen das passt. Ich würde höhe und breite der Originaldateien mal vergleichen. Ansonsten schau ich mir das später noch mal im Browser auf dem Rechner an, dann kann ich was dazu sagen
Ah perfekt. Es hat an der
am 14.04.2025 - 15:07 Uhr
Ah perfekt. Es hat an der Dimensionierung gelegen. Damit hat sich alles erledigt. Vielen Dank für die Hilfe :)
Prima, dann schreib bitte
am 14.04.2025 - 16:04 Uhr
Prima, dann schreib bitte [gelöst] an den Beginn des Diskussionstitel. Sehr gern geschehen.