Obtenez une image avec une URL de style à partir d'un URI dans une brindille

8

Donc, grâce à 4k4, j'ai finalement réussi à obtenir mon URI d'image d'origine dans un modèle de champ via

item.content['#item'].entity.uri.value

et avec

{{ file_url(item.content['#item'].entity.uri.value) }}

J'obtiendrais l'url du fichier d'origine.

J'ai les informations de style d'image via

item.content['#item']['#image-style']

ce «moyen» est demandé

Une solution PHP est déjà disponible ici , mais comment faire cela dans TWIG?

Il y a quelques tentatives de création d'un filtre pour 8.1 ici - mais cela ne m'aide pas pour le moment.

theming 8 uri media Jannis Hell
la source
Où voulez-vous utiliser l'image comme arrière-plan, exactement, un nœud ou une page?
kiamlaluno

Réponses:

3

Vous pouvez mettre le code php dans la fonction de prétraitement du modèle de champ. Vous avez toutes les informations dont vous avez besoin dans votre question.

Mais alors vous feriez du codage, c'est déjà en drupal. Si vous avez défini # style d'image dans l'élément de rendu d'image, le champ image doit être configuré pour les fonctions de prétraitement qui viendront plus tard dans les modèles de formatage d'image et de style d'image pour placer l'attribut src approprié dans les variables de image-style.html.twig. Vous pouvez donc utiliser le code qui existe déjà en remplaçant ce modèle.

Voir le code dans /core/module/image/image.module:

function template_preprocess_image_style(&$variables) {
  $style = ImageStyle::load($variables['style_name']);

  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'],
    'height' => $variables['height'],
  );

  $style->transformDimensions($dimensions, $variables['uri']);

  $variables['image'] = array(
    '#theme' => 'image',
    '#width' => $dimensions['width'],
    '#height' => $dimensions['height'],
    '#attributes' => $variables['attributes'],
    '#uri' => $style->buildUrl($variables['uri']),
    '#style_name' => $variables['style_name'],
  );
4k4
la source
1
Eh bien, le fait est que je ne veux pas que l'image soit rendue en tant que <img>mais en tant qu'image d'arrière-plan en ligne. Actuellement, je reçois soit l'image correcte avec le style en tant que <img>ou le chemin du fichier d'origine qui est beaucoup trop gros à utiliser sur une connexion non large bande - je veux donc simplement obtenir le chemin vers celui sous-échantillonné. Et je ne veux pas remplacer tous les rendus d'image, juste le seul champ. Bien sûr, je pourrais câbler le chemin vers le style, car je connais le nom de fichier d'origine - mais ce serait mauvais.
Jannis Hell
Vous n'avez pas à remplacer toutes les images. Vous pouvez cibler celui que vous voulez avec une suggestion de nom de thème ou vous mettez une condition dans la brindille. Je choisirais la seconde, car le débogage des brindilles ne fait aucune suggestion pour ce modèle. Il serait donc plus facile sans avoir à rechercher la bonne suggestion de ce modèle. Le hack câblé n'est pas conseillé. Vous ne savez pas si la bonne taille de style d'image est dans le cache.
4k4
1

J'avais juste besoin de faire ça aussi. La bonne approche consiste ici à stocker l'URL de l'image de l'image stylisée dans une variable (via une fonction de prétraitement), puis cette variable sera disponible dans votre fichier de brindille.

J'ai écrit une fonction qui obtiendra n'importe quel fichier field_image et renverra le nom de fichier d'origine, ou si vous spécifiez un nom de style, il renverra l'URL de l'image stylisée.

Dans mon .themedossier:

function MYTHEME_preprocess_node(&$vars) {
  //get thumbnail images from field_image
  $vars['field_image_url'] = _var_image_url($vars, 'field_image', 'thumbnail');
}

//pull image field URL (original or styled)
function _var_image_url($vars, $field, $style_name = '') {
  if (!empty($vars['elements'][$field]['#object'])) {
    $fields = $vars['elements'][$field]['#object']->getFields();
    $image = $fields[$field]->getValue();

    if (!empty($image[0]['target_id'])) {
      $file = \Drupal\file\Entity\File::load($image[0]['target_id']);
      $uri = $file->getFileUri();

     if(!empty($style_name)) {
        $url = \Drupal\image\Entity\ImageStyle::load($style_name)->buildUrl($uri);
        return $url; //the styled URL
     } else {
        return file_create_url($uri); //original
     }
   }
 }
 return false;
}

Maintenant dans mon fichier de brindilles (node.html.twig, puisque j'ai utilisé la fonction preprocess_node): 

<div class="banner" style="background-image:url({{ field_image_url }}"></div>

Cette fonction _var_image_url()doit être appelée à partir de la THEME_preprocess_node()fonction car elle attend une certaine configuration dans le premier $varsargument. Si vous essayez de l'appeler depuis preprocess_page, vous devrez le modifier.

Wheelercreek
la source