Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Module ›

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

Eingetragen von niklaseberhoefer (4)
am 11.04.2025 - 15:27 Uhr in
  • Module
  • Drupal 7.x

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!

‹ Word DOC Export Modul/Funktion gesucht ECA validiere Felder mit unlimitierter Eingabe ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Na ja, dass ist was Bildstile

Eingetragen von dinmikkith (1573)
am 12.04.2025 - 19: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 :⁠-⁠)

  • Anmelden oder Registrieren um Kommentare zu schreiben

per css sollte man das ändern

Eingetragen von caw (2762)
am 12.04.2025 - 15:28 Uhr

per css sollte man das ändern können.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Vielen Dank für deine

Eingetragen von niklaseberhoefer (4)
am 14.04.2025 - 10: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? :)

  • Anmelden oder Registrieren um Kommentare zu schreiben

Nein leider nicht ohne die

Eingetragen von dinmikkith (1573)
am 14.04.2025 - 11: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.

  • Anmelden oder Registrieren um Kommentare zu schreiben

auch das ginge evtl. rein per

Eingetragen von caw (2762)
am 14.04.2025 - 11:53 Uhr

auch das ginge evtl. rein per css

  • Anmelden oder Registrieren um Kommentare zu schreiben

Das ist richtig, wäre aber

Eingetragen von dinmikkith (1573)
am 14.04.2025 - 12:03 Uhr

Das ist richtig, wäre aber sehr wahrscheinlich schon aufgefallen. Beide Stellen zu prüfen schadet sicher nicht.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Das wäre die Seite:

Eingetragen von niklaseberhoefer (4)
am 14.04.2025 - 12: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.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Davon gibt es sogar zwei

Eingetragen von dinmikkith (1573)
am 14.04.2025 - 13: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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ah perfekt. Es hat an der

Eingetragen von niklaseberhoefer (4)
am 14.04.2025 - 14:07 Uhr

Ah perfekt. Es hat an der Dimensionierung gelegen. Damit hat sich alles erledigt. Vielen Dank für die Hilfe :)

  • Anmelden oder Registrieren um Kommentare zu schreiben

Prima, dann schreib bitte

Eingetragen von dinmikkith (1573)
am 14.04.2025 - 15:04 Uhr

Prima, dann schreib bitte [gelöst] an den Beginn des Diskussionstitel. Sehr gern geschehen.

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Medien und andere Daten mit Feeds von Drupal 7 auf Drupal 10 migrieren
  • für drupal11 ein Slider Modul
  • [gelöst] W3CSS Paragraphs Views
  • Drupal 11 neu aufsetzen und Bereiche aus 10 importieren
  • Wie erlaubt man neuen Benutzern auf die Resetseite zugreifen zu dürfen.
  • [gelöst] Anzeigeformat Text mit Bild in einem Artikel, Drupal 11
  • Social Media Buttons um Insteragram erweitern
  • Nach Installation der neuesten D10-Version kein Zugriff auf Website
  • Composer nach Umzug
  • [gelöst] Taxonomie Begriffe zeigt nicht alle Nodes an
  • Drupal 11 + Experience Builder (Canvas) + Layout Builder
  • Welche KI verwendet ihr?
Weiter

Neue Kommentare

  • Inzwischen sind wir bei
    vor 1 Tag 12 Stunden
  • Migrieren von D7 auf D8/ D10/ D11
    vor 2 Tagen 4 Stunden
  • melde mich mal wieder, da ich
    vor 7 Wochen 6 Tagen
  • Hey danke
    vor 8 Wochen 3 Stunden
  • Update: jetzt gibt's ein
    vor 8 Wochen 21 Stunden
  • Hallo, im Prinzip habe ich
    vor 8 Wochen 5 Tagen
  • Da scheint die Terminologie
    vor 8 Wochen 5 Tagen
  • Kannst doch auch alles direkt
    vor 9 Wochen 2 Tagen
  • In der entsprechenden View
    vor 9 Wochen 2 Tagen
  • Dazu müsstest Du vermutlich
    vor 9 Wochen 2 Tagen

Statistik

Beiträge im Forum: 250235
Registrierte User: 20462

Neue User:

  • marouane.blel
  • capilclinic
  • Quabzibboter

» Alle User anzeigen

User nach Punkten sortiert:
wla9461
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3857
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 15 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association