Responsive Images in WordPress with Cloudinary, Teil 2

In Teil 1 dieser Serie habe ich einige Hintergründe zu responsiven Bildern gegeben und beschrieben, wie Sie srcset und sizes Attribute zu einem img Element hinzufügen können, um entsprechend dimensionierte Bilddateien für Nutzer einer Website basierend auf der Größe und den Fähigkeiten ihres Browsers und Geräts bereitzustellen. Ich habe auch gezeigt, wie WordPress seine native Bildskalierungsfunktionalität nutzt, um srcset und sizes automatisch zu implementieren, und wie Sie einen externen Bilderdienst wie Cloudinary nutzen können, um die native Implementierung von WordPress zu erweitern.

In dieser Folge gehe ich näher darauf ein, wie die Bildskalierung in WordPress funktioniert. Ich erkläre, wie ich integrierte WordPress-Hooks zusammen mit der Cloudinary Application Programming Interface (API) – und deren PHP-Integrationsbibliothek – verwendet habe, um ein WordPress-Plugin zu erstellen, das die Skalierung und Optimierung responsiver Bilder an Cloudinary auslagert.

Erste Schritte

Dieser Artikel setzt voraus, dass Sie wissen, wie man ein WordPress-Plugin erstellt. Wenn nicht, lesen Sie den Artikel im WordPress Codex Writing a Plugin, bevor Sie fortfahren. Für mein Beispiel habe ich WP-CLI verwendet, um über die Kommandozeile ein Gerüst für mein Plugin zu erstellen.

Folgen Sie als Nächstes den Anweisungen im WordPress PHP Getting Started Guide, um die Cloudinary PHP-Bibliothek herunterzuladen und in Ihr Plugin einzubinden. Speichern Sie die Bibliotheksdateien im Verzeichnis `/lib/cloudinary_php/` innerhalb Ihres Plugins und binden Sie sie mit dem folgenden Code in Ihre Haupt-Plugin-Datei ein.

// Load dependencies.
require 'lib/cloudinary_php/src/Cloudinary.php';
require 'lib/cloudinary_php/src/Uploader.php';
require 'lib/cloudinary_php/src/Api.php';

Konfigurieren Sie abschließend Cloudinary mit den Konfigurationsparametern, die Sie in Ihrer Cloudinary Management Console finden, und definieren Sie diese als Konstanten in Ihrer `wp-config.php`-Datei, da es keine gute Idee ist, Kontoinformationen direkt in Ihrem Plugin zu speichern. So sieht die Konfiguration in meinem Plugin aus.

Cloudinary::config( array(
 "cloud_name" => CLD_CLOUD_NAME,
 "api_key"    => CLD_API_KEY,
 "api_secret" => CLD_API_SECRET
) );

Nun, da Sie Ihr Plugin so konfiguriert haben, dass es mit der Cloudinary API kommunizieren kann, können Sie mit dem Aufbau der Funktionalität Ihres Plugins beginnen.

Bildskalierung in WordPress

Bei der Planung meines Plugins wollte ich nahtlos in das Standard-Benutzererlebnis für die Verwaltung von Bildern in WordPress integrieren. Ich wollte auch lokale Kopien meiner Dateien beibehalten, damit alles weiterhin funktioniert, auch wenn ich mich entscheide, das Plugin zu deaktivieren. Um diese Ziele zu erreichen, ist es hilfreich zu verstehen, was WordPress tut, wenn Sie ein Bild hochladen.

Wenn Sie ein Bild hochladen, führt WordPress die Funktion media_handle_upload() aus, die die hochgeladene Datei auf dem Server speichert und einen neuen Beitrag in der Datenbank erstellt, der das Bild repräsentiert, mithilfe der Funktion wp_insert_attachment(). Nachdem der Beitrag erstellt wurde, ruft media_handle_upload() wp_generate_attachment_metadata() auf, um zusätzliche Metadaten über das Bild zu erstellen. Während dieses Schritts erstellt WordPress zusätzliche Bildgrößen und fügt Informationen über diese Größen in die Anhangsmetadaten ein. Hier ist ein Beispiel dafür, wie Anhangsmetadaten in WordPress standardmäßig aussehen.

array(
  'width' => 1500,
  'height' => 1500,
  'file' => '2016/11/image.jpg',
  'sizes' => array(
    'thumbnail' => array(
      'file' => 'image-150x150.jpg',
      'width' => 150,
      'height' => 150,
      'mime-type' => 'image/jpeg',
    ),
    'medium' => array(
      'file' => 'image-300x300.jpg',
      'width' => 300,
      'height' => 300,
      'mime-type' => 'image/jpeg',
    ),
    'large' => array(
      'file' => 'image-1024x1024.jpg',
      'width' => 1024,
      'height' => 1024,
      'mime-type' => 'image/jpeg',
    ),
  ),
)

Wie Sie sehen können, kennt WordPress nun den Dateinamen und die Abmessungen für die ursprüngliche Bilddatei und für alle zusätzlichen Größen, die von WordPress nach dem Hochladen des Bildes erstellt wurden. WordPress bezieht sich auf diese Metadaten, um die HTML-Markup zu erstellen, die für die Anzeige des Bildes auf einer Webseite benötigt wird. Dies sind die Informationen, die wir erweitern werden, indem wir Informationen einbeziehen, die von der Cloudinary API generiert wurden.

WordPress mit Cloudinary integrieren

Für den Rest dieses Artikels werde ich mich auf die Klasse Cloudinary_WP_Integration im Plugin beziehen. Hier ist der vollständige Quellcode dieser Klasse. In dieser Klasse habe ich eine Methode namens register_hooks() hinzugefügt, die all meine benutzerdefinierte Funktionalität durch die Nutzung der integrierten Filter-Hooks von WordPress hinzufügt. Um WordPress Hooks besser zu verstehen, lesen Sie über die Plugin API im WordPress Codex.

Da ich hochgeladene Dateien mit Cloudinary spiegeln und dessen API verwenden möchte, um eine Reihe von Bildgrößen für die Verwendung in srcset-Attributen zu generieren, bin ich als Erstes in den Filter wp_generate_attachment_metadata eingehakt, um die Metadaten zu erweitern, die WordPress bereits erstellt. Um diese Funktionalität zu registrieren, habe ich den folgenden Code zu meiner register_hooks()-Klasse hinzugefügt.

add_filter( 'wp_generate_attachment_metadata', array( $this, 'generate_cloudinary_data' ) );

Dies weist WordPress an, die Methode generate_cloudinary_data() in meiner Klasse aufzurufen, wenn der Filter wp_generate_attachment_metadata ausgelöst wird. So sieht diese Methode aus.

public function generate_cloudinary_data( $metadata ) {
 // Bail early if we don't have a file path to work with.
 if ( ! isset( $metadata['file'] ) ) {
  return $metadata;
 }

 $uploads = wp_get_upload_dir();
 $filepath = trailingslashit( $uploads['basedir'] ) . $metadata['file'];

 // Mirror the image on Cloudinary and build custom metadata from the response.
 if ( $data = $this->handle_upload( $filepath ) ) {
  $metadata['cloudinary_data'] = array(
   'public_id'  => $data['public_id'],
   'width'      => $data['width'],
   'height'     => $data['height'],
   'bytes'      => $data['bytes'],
   'url'        => $data['url'],
   'secure_url' => $data['secure_url'],
  );

  foreach ( $data['responsive_breakpoints'][0]['breakpoints'] as $size ) {
   $metadata['cloudinary_data']['sizes'][$size['width'] ] = $size;
  }
 };

 return $metadata;
}

Dieser Code verwendet wp_get_upload_dir(), um den Pfad zum hochgeladenen Bild zu erstellen und übergibt ihn an eine zweite Methode, handle_upload(), die das Bild zu Cloudinary hochlädt und Daten von der API zurückgibt. Wenn handle_upload() abgeschlossen ist, füge ich die zurückgegebenen Daten einem cloudinary_data-Array in den Metadaten hinzu und durchlaufe dann jede Breakpoint-Größe, die Cloudinary zurückgibt – was ich gleich erklären werde – und speichere diese unter dem Schlüssel cloudinary_data['sizes']. Sehen wir uns an, was in der Methode handle_upload() passiert.

public function handle_upload( $file ) {
  $data = false;
  if ( is_callable( array( '\Cloudinary\Uploader', 'upload' ) ) ) {
    $api_args = array(
      'responsive_breakpoints' => array(
        array(
          'create_derived' => false,
          'bytes_step'  => 20000,
          'min_width' => 200,
          'max_width' => 1000,
          'max_images' => 20,
        ),
     ),
     'use_filename' => true,
    );
    $response = \Cloudinary\Uploader::upload( $file, $api_args );
    // Check for a valid response before returning Cloudinary data.
    $data = isset( $response['public_id'] ) ? $response : false;
  }
  return $data;
}

Diese Methode ermittelt, ob sie die Methode upload() in der von mir zuvor importierten Klasse \Cloudinary\Uploader aufrufen kann, indem sie is_callable() verwendet. Wenn ja, erstellt sie die Argumente, die ich \Cloudinary\Uploader::upload() übergeben möchte. Zuerst nutze ich die responsive image breakpoint Funktionalität von Cloudinary, um automatisch die besten Bildgrößen basierend auf dem Inhalt des Bildes selbst zu generieren. Ich übergebe hier einige Optionen an das Argument responsive_breakpoints, lassen Sie mich jede einzelne erklären.

• create_derived teilt Cloudinary mit, ob zusätzliche Bilddateien erstellt werden sollen, sobald das Original hochgeladen ist. Wenn false übergeben wird, werden Daten über das Bild generiert, ohne die Dateien tatsächlich zu erstellen, bis sie angefordert werden.
• bytes_step definiert, wie viele Bytes zwischen den Bildern liegen dürfen, bevor eine neue Größe erstellt wird. Ich wähle 20.000 (oder 20 KB), aber Sie können diese Zahl nach Bedarf anpassen.
• Die Argumente min_width und max_width teilen Cloudinary mit, welche Abmessungen das kleinste und größte Bild haben sollen, damit Sie keine unnötigen Bildgrößen erstellen.
• max_images legt die maximale Gesamtzahl der Bilder fest, die Cloudinary erstellen soll.

Mit diesen Informationen ermittelt Cloudinary automatisch die optimale Anzahl und Größe von Bildern, die für die Verwendung in srcset-Attributen erstellt werden sollen. Abschließend setze ich use_filename auf true, was Cloudinary anweist, Dateinamen zu verwenden, die mit dem von mir hochgeladenen übereinstimmen (definiert als Variable $file), anstatt zufällige Bilddateinamen zu generieren. Dies hilft mir, Bilder in meiner Cloudinary-Bibliothek zu identifizieren, hat aber ansonsten keine wirkliche Auswirkung.

Nachdem ich nun eine Möglichkeit habe, Bilder automatisch zu Cloudinary hochzuladen und die zurückgegebenen Daten in den Anhangsmetadaten für mein Bild zu speichern, kann ich diese Daten verwenden, um Bilder vom Cloudinary Content Delivery Network (CDN) anstelle meines lokalen Servers bereitzustellen. Dazu möchte ich zunächst alle Anhangs-URLs filtern, sodass die Cloudinary-URL anstelle lokaler URLs verwendet wird. Dafür habe ich in meiner register_hooks()-Methode einen Filter namens get_attachment_url() für den Hook wp_get_attachment_url hinzugefügt.

add_filter( 'wp_get_attachment_url', array( $this, 'get_attachment_url' ), 10, 2 );

Diese Zeile gibt die URL und die Anhangs-ID eines Bildes zurück, die an meine Methode get_attachment_url() übergeben werden, die wie folgt aussieht.

public function get_attachment_url( $url, $attachment_id ) {
  $metadata = wp_get_attachment_metadata( $attachment_id );

  if ( isset( $metadata['cloudinary_data']['secure_url'] ) ) {
    $url = $metadata['cloudinary_data']['secure_url'];
  }

  return $url;
}

Diese Methode sucht die mit meinem Bild verknüpften Metadaten und prüft, ob eine URL aus den cloudinary_data, die ich im letzten Schritt gespeichert habe, vorhanden ist. Wenn ja, gibt sie die URL von Cloudinary zurück. Andernfalls gibt sie die lokale URL zurück.

Dies kümmert sich um die URL für das Vollbild, aber das Ersetzen von URLs für eine der von WordPress erstellten Größen (d.h. Zwischengrößen) kann etwas kniffliger sein. Um dies zu erreichen, muss ich in image_downsize() eingehakt werden, was die Funktion ist, die WordPress verwendet, um Informationen über Zwischengrößen zu erhalten, die mit einem Bild verknüpft sind. Hier verwende ich Cloudinary anstelle lokaler Dateien.

Der folgende Code registriert meinen Filter, gefolgt von der Methode, die die Daten von WordPress durch Daten von Cloudinary ersetzt.

add_filter( 'image_downsize', array( $this, 'image_downsize' ), 10, 3 );
public function image_downsize( $downsize, $attachment_id, $size ) {
  $metadata = wp_get_attachment_metadata( $attachment_id );

  if ( isset( $metadata['cloudinary_data']['secure_url'] ) ) {
    $sizes = $this->get_wordpress_image_size_data( $size );

    // If we found size data, let's figure out our own downsize attributes.
    if ( is_string( $size ) && isset( $sizes[ $size ] ) &&
       ( $sizes[ $size ]['width'] <= $metadata['cloudinary_data']['width'] ) &&
       ( $sizes[ $size ]['height'] <= $metadata['cloudinary_data']['height'] ) ) {

      $width = $sizes[ $size ]['width'];
      $height = $sizes[ $size ]['height'];

      $dims = image_resize_dimensions( $metadata['width'], $metadata['height'], $sizes[ $size ]['width'], $sizes[ $size ]['height'], $sizes[ $size ]['crop'] );

      if ( $dims ) {
        $width = $dims[4];
        $height = $dims[5];
      }

      $crop = ( $sizes[ $size ]['crop'] ) ? 'c_lfill' : 'c_limit';

      $url_params = "w_$width,h_$height,$crop";

      $downsize = array(
        str_replace( '/image/upload', '/image/upload/' . $url_params, $metadata['cloudinary_data']['secure_url'] ),
        $width,
        $height,
        true,
      );

    } elseif ( is_array( $size ) ) {
      $downsize = array(
        str_replace( '/image/upload', "/image/upload/w_$size[0],h_$size[1],c_limit", $metadata['cloudinary_data']['secure_url'] ),
        $size[0],
        $size[1],
        true,
      );
    }
  }

  return $downsize;
}

Dies ist ein langer Codeblock, also lassen Sie mich ihn durchgehen. Wieder beginne ich damit, die Anhangsmetadaten abzurufen und die Informationen $metadata['cloudinary_data'] zu überprüfen. Dann verwende ich eine Hilfsfunktion namens get_wordpress_image_size_data(), um die mit WordPress registrierten Bildgrößen zu erhalten, die ich dann an image_resize_dimensions() übergebe, um die erwarteten Abmessungen zu berechnen, wenn ich eine benannte Größe verwende (z.B. Thumbnail, Medium). Wenn der Parameter $size bereits ein Array von Abmessungen ist, was gelegentlich vorkommt, übergebe ich diese Abmessungen direkt zur Verarbeitung an Cloudinary.

Ich sollte hier erwähnen, dass ich die Cloudinary API hätte verwenden können, um alle von WordPress erstellten alternativen Größen zu replizieren. Stattdessen habe ich mich entschieden, die dynamische URL-Bildgenerierungsfunktionalität von Cloudinary zu nutzen, um die zusätzlichen benötigten Größen zu generieren, indem ich die URL des Vollbilds durch dynamische Parameter wie folgt ersetze.

str_replace( 
  '/image/upload',
  "/image/upload/w_$size[0],h_$size[1],c_limit",
  $metadata['cloudinary_data']['secure_url'] );

Wenn die Bildabmessungen ein exakter Beschnitt sein sollen, verwende ich den Zuschneidealgorithmus c_lfill von Cloudinary. Andernfalls erstellen c_limit Bilder, die innerhalb meiner Zielabmessungen liegen, während das Seitenverhältnis der Originaldatei beibehalten wird.

Sobald ich diese Schritte abgeschlossen habe, sollte Cloudinary alle neu in WordPress hochgeladenen Bilder bereitstellen. Die letzte Aufgabe ist die Generierung von srcset und sizes Attributen mithilfe der Metadaten, die ich zuvor von Cloudinarys responsiver Bild-Breakpoint-Funktionalität erhalten habe.

Automatische Generierung von srcset und sizes

Um die Details der Implementierung responsiver Bilder in WordPress zu verstehen, sollten Sie Responsive Images in WordPress 4.4 lesen. Zusammenfassend werde ich die beiden Fälle überprüfen, in denen WordPress dynamisch srcset und sizes zu Bildern hinzufügt.

Responsives Markup für dynamisch generierte Bilder

Erstens versucht WordPress automatisch, diese Attribute zu jedem Bild hinzuzufügen, das dynamisch in einer Vorlage mit wp_get_attachment_image() oder ähnlichen Funktionen generiert wird. Sie können srcset und sizes Attribute zu diesen Bildern hinzufügen, indem Sie die Bildattribute filtern, bevor das Markup zusammengesetzt wird, indem Sie den Filter wp_get_attachment_image_attributes verwenden.

add_filter( 'wp_get_attachment_image_attributes', array( $this, 'wp_get_attachment_image_attributes' ), 10, 3 );
public function wp_get_attachment_image_attributes( $attr, $attachment, $size ) {
  $metadata = wp_get_attachment_metadata( $attachment->ID );

  if ( is_string( $size ) ) {
    if ( 'full' === $size ) {
      $width = $attachment['width'];
      $height = $attachment['height'];
    } elseif ( $data = $this->get_wordpress_image_size_data( $size ) ) {
      // Bail early if this is a cropped image size.
      if ( $data[$size]['crop'] ) {
        return $attr;
      }

      $width = $data[$size]['width'];
      $height = $data[$size]['height'];
    }
  } elseif ( is_array( $size ) ) {
    list( $width, $height ) = $size;
  }

  if ( isset( $metadata['cloudinary_data']['sizes'] ) ) {
    $srcset = '';

    foreach( $metadata['cloudinary_data']['sizes'] as $s ) {
      $srcset .= $s['secure_url'] . ' ' . $s['width'] . 'w, ';
    }

    if ( ! empty( $srcset ) ) {
      $attr['srcset'] = rtrim( $srcset, ', ' );
      $sizes = sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $width );

      // Convert named size to dimension array for the filter.
      $size = array($width, $height);
      $attr['sizes'] = apply_filters( 'wp_calculate_image_sizes', $sizes, $size, $attr['src'], $metadata, $attachment->ID );
    }
  }

  return $attr;
}

In der Methode wp_get_attachment_image_attributes() berechnen Sie die Abmessungen des Bildes basierend auf dem Parameter $size. Vorerst füge ich srcset und sizes nur zu den Bildern mit einem Seitenverhältnis hinzu, das der Originaldatei entspricht, damit ich die von Cloudinary bereitgestellten Breakpoint-Größen nutzen kann, als ich mein Bild hochgeladen habe. Wenn ich feststelle, dass $size ein anderes Seitenverhältnis hat (z.B. ein harter Beschnitt), gebe ich den Wert $attr unverändert zurück.

Sobald Sie die Abmessungen Ihres Bildes haben, durchlaufen Sie alle Breakpoint-Größen aus dem Array $metadata['cloudinary_data']['sizes'], um das srcset-Attribut zu erstellen. Anschließend erstellen Sie ein sizes-Attribut basierend auf der Breite des Bildes. Abschließend übergeben Sie den Wert Ihres sizes-Attributs an den Filter wp_calculate_image_sizes(), damit Themes und Plugins das sizes-Attribut entsprechend ihren spezifischen Layoutanforderungen ändern können.

Responsives Markup für Bilder im Post-Inhalt

WordPress fügt auch automatisch srcset und sizes Attribute zu Bildern hinzu, die in den Post-Inhalt eingebettet sind. Anstatt diese Attribute in den Post-Inhalt in der Datenbank zu speichern, generiert WordPress sie dynamisch, wenn die Seite generiert wird. So kann WordPress neue Methoden zur Bereitstellung responsiver Bilder einfach übernehmen, sobald diese verfügbar werden, wie neue Methoden zur Bereitstellung responsiver Bilder verfügbar werden.

Sie möchten, dass Ihre Cloudinary-Integration genauso zukunftssicher ist wie die native Implementierung. Ersetzen Sie daher den Content-Filter, den WordPress verwendet – wp_make_content_images_responsive() – durch Ihren eigenen Filter mit dem Namen make_content_images_responsive(). Hier ist der Code, der beide Aufgaben erfüllt.

// Replace the default WordPress content filter with our own.
remove_filter( 'the_content', 'wp_make_content_images_responsive' );
add_filter( 'the_content', array( $this, 'make_content_images_responsive',  ) );
public function make_content_images_responsive( $content ) {
  if ( ! preg_match_all( '/<img [^>]+>/', $content, $matches ) ) {
    return $content;
  }

  $selected_images = $attachment_ids = array();

  foreach( $matches[0] as $image ) {
    if ( false === strpos( $image, ' srcset=' ) && preg_match( '/wp-image-([0-9]+)/i', $image, $class_id ) &&
      ( $attachment_id = absint( $class_id[1] ) ) ) {

      /*
       * If exactly the same image tag is used more than once, overwrite it.
       * All identical tags will be replaced later with 'str_replace()'.
       */
      $selected_images[ $image ] = $attachment_id;
      // Overwrite the ID when the same image is included more than once.
      $attachment_ids[ $attachment_id ] = true;
    }
  }

  if ( count( $attachment_ids ) > 1 ) {
    /*
     * Warm object cache for use with 'get_post_meta()'.
     *
     * To avoid making a database call for each image, a single query
     * warms the object cache with the meta information for all images.
     */
    update_meta_cache( 'post', array_keys( $attachment_ids ) );
  }

  foreach ( $selected_images as $image => $attachment_id ) {
    $image_meta = wp_get_attachment_metadata( $attachment_id );
    $content = str_replace( $image, $this->add_srcset_and_sizes( $image, $image_meta, $attachment_id ), $content );
  }

  return $content;
}

Die Methode make_content_images_responsive() ist im Wesentlichen eine Kopie der Funktion wp_make_content_images_responsive() aus WordPress, die den Inhalt nach allen <img>-Elementen durchsucht – und dabei einige Ausnahmefälle behandelt und einige Performance-Optimierungen vornimmt – und sie an eine zweite Funktion übergibt, die das Hinzufügen der srcset und sizes Attribute übernimmt. Für diesen Zweck habe ich eine benutzerdefinierte Callback-Methode in meiner Klasse namens add_srcset_and_sizes() erstellt.

public function add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
  if ( isset( $image_meta['cloudinary_data']['sizes'] ) ) {
    // See if our filename is in the URL string.
    if ( false !== strpos( $image, wp_basename( $image_meta['cloudinary_data']['url'] ) ) && false === strpos( $image, 'c_lfill') ) {
      $src = preg_match( '/src="([^"]+)"/', $image, $match_src ) ? $match_src[1] : '';
      $width  = preg_match( '/ width="([0-9]+)"/',  $image, $match_width  ) ? (int) $match_width[1]  : 0;
      $height = preg_match( '/ height="([0-9]+)"/', $image, $match_height ) ? (int) $match_height[1] : 0;

      $srcset = '';

      foreach( $image_meta['cloudinary_data']['sizes'] as $s ) {
        $srcset .= $s['secure_url'] . ' ' . $s['width'] .  'w, ';
      }

      if ( ! empty( $srcset ) ) {
        $srcset = rtrim( $srcset, ', ' );
        $sizes = sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $width );

        // Convert named size to dimension array.
        $size = array($width, $height);
        $sizes = apply_filters( 'wp_calculate_image_sizes', $sizes, $size, $src, $image_meta, $attachment_id );
      }

      $image = preg_replace( '/src="([^"]+)"/', 'src="$1" srcset="' . $srcset . '" sizes="' . $sizes .'"', $image );
    }
  }

  return $image;
}

Hier stelle ich erneut sicher, dass meine Anhangsmetadaten Größendaten von Cloudinary enthalten. Dann stelle ich sicher, dass das Bild-Markup denselben Dateinamen wie das Bild hat, das ich zu Cloudinary hochgeladen habe, nur für den Fall, dass das Bild-Markup nach dem Einfügen in den Inhalt nicht bearbeitet wurde. Schließlich füge ich false === strpos( $image, 'c_lfill') ein, um festzustellen, ob die URL angibt, dass Cloudinary das Bild hart zuschneidet, ähnlich wie ich das harte Zuschneiden in wp_get_attachment_image_attributes() überprüft habe. Wenn alle Prüfungen erfolgreich sind, kann ich die Breakpoint-Größen durchlaufen, die beim ursprünglichen Hochladen des Bildes zu Cloudinary erstellt wurden, und diese Daten verwenden, um meine srcset und sizes Attribute zu erstellen.

Mit dieser Funktionalität können Sie nun erfolgreich Ihre gesamte Verarbeitung responsiver Bilder an Cloudinary auslagern und optimierte Bilder vom Cloudinary CDN anstelle Ihres lokalen Webservers bereitstellen.

Zusammenfassung

Ich hoffe, dies gibt Ihnen ein besseres Verständnis dafür, wie WordPress die Bildskalierung handhabt, und zeigt Ihnen, wie Sie WordPress erweitern können, um Cloudinary zur dynamischen Generierung und Bereitstellung von für verschiedene Gerätetypen und -größen optimierten Bildern zu nutzen. Um diesen Code auf Ihrer Website auszuprobieren, laden Sie das Plugin von GitHub herunter und geben Sie Feedback zu allem, was Ihrer Meinung nach verbessert werden könnte.

---

Dieser Beitrag (und das Plugin!) wurde von Joe McGill verfasst.

Cloudinary kann im Großen und Ganzen bei responsiven Bildern im Web helfen! Sie können nicht nur die verschiedenen Bildgrößen erstellen, die benötigt werden, um die bestmögliche Größe zu senden, sondern sie können sie im richtigen Format senden und den Prozess sogar vollständig automatisieren, für jede Anwendung.