TwigのURIからスタイルURLの画像を取得する

8

4k4のおかげで、最終的にフィールドテンプレートで元の画像URIを取得することができました。

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

と

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

元のファイルのURLを取得します。

私は画像スタイル情報を持っています

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

その「媒体」が要求されている

PHPソリューションはすでにここで利用できますが、TWIGでこれを行うにはどうすればよいですか

ここで8.1のフィルターを作成する試みがいくつかありますが、それは現在私には役立ちません。

theming 8 uri media

— ジャニス・ヘル
ソース

画像を背景として正確にどこで使用したいですか、ノードまたはページですか？

— kiamlaluno

3

フィールドテンプレートの前処理関数にphpコードを配置できます。あなたはあなたの質問に必要なすべての情報を持っています。

しかし、あなたはコーディングをするでしょう、それはすでにドルパにあります。画像レンダー要素で＃image-styleを設定している場合は、後で画像フォーマッタおよび画像スタイルテンプレートに含まれる前処理関数の画像フィールドを構成して、の変数に正しいsrc属性を設定する必要がありますimage-style.html.twig。したがって、このテンプレートをオーバーライドすることで、すでに存在するコードを使用できます。

/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
ソース

1

まあ、それは私が<img>画像をインラインスタイルとしてではなく背景画像としてレンダリングしたくないということです。現在、スタイルとして正しい画像を取得するか<img>、非ブロードバンド接続で使用するには大きすぎる元のファイルパスを取得しているため、ダウンサンプリングされたものへのパスを取得したいだけです。また、すべてのイメージレンダーをオーバーライドするのではなく、1つのフィールドだけをオーバーライドします。確かに、元のファイル名がわかっているので、スタイルへのパスをハッキングすることはできますが、それは悪いことです。

— Jannis Hell

すべての画像を上書きする必要はありません。テーマ名の提案で希望するものをターゲットにするか、小枝に条件を設定できます。twig debugはこのテンプレートに対して提案を行わないため、2番目を選択します。したがって、このテンプレートの正しい提案を調査する必要がなければ、より簡単になります。ハードワイヤーハックはお勧めできません。正しい画像スタイルサイズがキャッシュにあるかどうかはわかりません。

— 2016年

1

私もこれを行う必要がありました。ここでの正しいアプローチは、スタイル付き画像の画像URLを（前処理関数を介して）変数に格納することです。そうすると、その変数がtwigファイルで使用可能になります。

任意のfield_imageファイルを取得して元のファイル名を返す関数を記述しました。または、スタイル名を指定すると、スタイル付き画像のURLを返します。

私の.themeファイル内：

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;
}

今私のtwigファイル（node.html.twig、私はpreprocess_node関数を使用したため）：

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

この関数_var_image_url()はTHEME_preprocess_node()、最初の$vars引数で特定の設定を想定しているため、関数から呼び出す必要があります。から呼び出す場合はpreprocess_page、変更する必要があります。

— Wheelercreek
ソース