Générer des styles d'images automatiquement avec Drupal 8

Des chevaux qui galopent

Drupal 8 permet de générer des styles d'images selon de nombreux effets (réduction, découpe, noir et blanc, etc) pour chaque image téléversée. Vous pouvez avoir très rapidement de nombreux styles d'images, et d'autant plus si vous utilisez un rendu responsive pour celles-ci, permettant de proposer des dimensions différentes en fonction du terminal utilisé pour consulter votre site Internet.

Ces styles d'images sont générés lors d'une première consultation d'une page utilisant ceux-ci, ce qui peut être pénalisant en terme de performances, voire de rendu, quand vous avez de nombreux médias, avec autant de styles d'images que de points de rupture, comme par exemple sur une page d'atterrissage ou une page de listing.

Le snippet ci-dessous va vous permettre de générer automatiquement tous les styles d'images possibles, au moment du téléversement de l'image source.


use Drupal\image\Entity\ImageStyle;
use Drupal\Core\Entity\EntityInterface;

/**
 * Implements hook_entity_insert().
 * Generate all image styles once an Image is uploaded.
 */
function MYMODULE_entity_insert(EntityInterface $entity) {
  /** @var \Drupal\file\Entity\File $entity */
  if ($entity instanceof FileInterface) {
    $image = \Drupal::service('image.factory')->get($entity->getFileUri());
    /** @var \Drupal\Core\Image\Image $image */
    if ($image->isValid()) {
      $styles = ImageStyle::loadMultiple();
      $image_uri = $entity->getFileUri();
      /** @var \Drupal\image\Entity\ImageStyle $style */
      foreach ($styles as $style) {
        $destination = $style->buildUri($image_uri);
        $style->createDerivative($image_uri, $destination);
      }
    }
  }
}

Le résultat sera un délai légèrement plus important pour le rédacteur, au moment de l'enregistrement de son contenu, mais un gain conséquent pour les visiteurs, en terme de performance et de vitesse de chargement des pages, car alors toutes les versions possibles d'une image source auront déjà été générées, évitant alors de nombreux appels PHP lors de la première consultation d'une page, surtout si celle-ci contient de nombreuses images.

Pour améliorer l'expérience utilisateur, il est aussi possible d'utiliser la Cron API de Drupal 8 pour mettre en file d'attente la génération de ces styles d'images au moment de l'enregistrement d'une image source, réduisant le temps d'enregistrement initial. Mais ceci pourra faire l'objet d'un autre billet.

Vous avez des problématiques de performances sur votre site Drupal 8 ? N'hésitez pas à consulter un freelance spécialiste Drupal 8.

 

Commentaires

Soumis par Kevin (non vérifié) le 16/12/2016 à 09:57 - Permalien

J'ajoute ça à mon module "toolbox", merci !

Soumis par Sebby (non vérifié) le 28/12/2016 à 09:44 - Permalien

Mais tu risques de générer des styles images qui ne seront jamais utilisés dans le site, car elles ne sont pas liés à une entité content (comme un article), non ?

Oui c'est à adapter selon le site et les besoins. Mais dans le cas des images responsives on peut avoir de nombreux styles images par chaque format d'image responsive différent. C'est à mesurer en fonction de chaque cas. Faire le rapport bénéfice / inconvénient en quelque sorte.

Ajouter un commentaire