Drupal 7.9 und flexible Bilder

Drupal 7.9 führt Höhen- und Breitenattribute wieder in Bilder ein. Ich verstehe, dass dies zur Verbesserung der Front-End-Leistung beiträgt, aber es gibt mir Probleme bei der Verwendung flexibler Bilder im Sinne eines reaktionsschnellen Webdesigns.

Dies ist das gleiche Problem wie bei whitefleaCH, das in diesem Beitrag erwähnt wird: Wie kann ich verhindern, dass Höhen- / Breitenattribute für Bilder, die über das Themensystem ausgeführt werden, verwendet werden?

Bei Verwendung der maximalen Breite in CSS werden Bilder immer noch skaliert, die Höhe bleibt jedoch wie im Markup definiert. Weiß jemand, wie man dies entweder in CSS korrigiert oder die Höhen- / Breitenattribute aus Bildern zusammen entfernt?

Check out theme_image():

foreach (array('width', 'height', 'alt', 'title') as $key) {
  if (isset($variables[$key])) {
    $attributes[$key] = $variables[$key];
  }
}
return '<img' . drupal_attributes($attributes) . ' />';

Sie müssen also Breite und Höhe als Schlüssel der obersten Ebene, aber auch aus dem Attribut-Array bereinigen:

function mymodule_preprocess_image(&$variables) {
  unset(
    $variables['width'],
    $variables['height'],
    $variables['attributes']['width'],
    $variables['attributes']['height']
  );
}

Und ja, in Drupal 7 können jetzt variable Prozessfunktionen für alle Theming-Hooks verwendet werden . Vergessen Sie nicht, Ihren Cache zu leeren, damit die neue Vorverarbeitungsfunktion übernommen wird.

function YOUR_THEMENAME_image($vars) {
  $attributes = $vars['attributes'];
  $attributes['src'] = file_create_url($vars['path']);

  // remove width and height attributes
  foreach (array('alt', 'title') as $key) {
    if (isset($vars[$key])) {
      $attributes[$key] = $vars[$key];
    }
  }
  return '<img' . drupal_attributes($attributes) . ' />';
}

Vielleicht möchten Sie das Adaptive Image-Modul ausprobieren :

Das Adaptive Image-Modul bietet gerätegerechte Versionen von Bildern aus Ihren Feldern. Sie können adaptive Bilder aktivieren, indem Sie einem Ihrer Bildstile einen adaptiven Effekt hinzufügen.

In CSS sollte das Überschreiben der aktuell definierten Höhe durch Setzen der Höhe auf "Auto" den Trick tun.