web-dev-qa-db-ja.com

テーマディレクトリ内の画像からレスポンシブ画像スタイルをレンダリングするにはどうすればよいですか？

テンプレートviews-view-fields--myview.html.twigに取り組んでいます。しかし、これが機能するためにどのテンプレートを使用しているかは重要ではないと思います。

私はこれを見つけましたTwig that can add add Drupal Responsible images to a image in a field。in this case is this image is in the files directory。My質問は、この画像を私のテーマディレクトリの/themes/custom/mytheme/img/mygraphic.pngに配置したいということです。この例でそれを機能させるには、どのURIを使用できますか？

2番目の質問は次のとおりです。画像のaltタグは指定したのに空です。代替タグを表示するにはどうすればよいですか？

{% set responsiveimagestyle = {
    '#theme': 'responsive_image',
    '#responsive_image_style_id': 'my_custom_responsive_style',
    '#uri': 'public://mygraphic.png',
    '#alt': 'my alt text',
    '#attributes': { class: 'img-responsive' },
} %}

Views-view-fields--myview.html.twigテンプレートで、次の変数を使用できるようになりました。

{{ responsiveimagestyle }}

画像は画像タグでラップされ、Drupal Responsive Imagesスタイルを使用しています。

8themingmedia
3
paulcap1

これは、Twig Tweakモジュールの画像フィルターを使用する場合と同じです。ランダムなURIからレスポンシブな画像をレンダリングすることはできません。file_managedDBテーブルに格納されているURIである必要があります。 。しかしTwig Tweakを使用すると、ランダムなURIから通常の画像スタイルをレンダリングできます。手動でレスポンシブ画像タグを作成します。複数の通常の画像スタイルのレンダリング– Hudri

すばらしいので、回避策があります。手動で作成してください。

{% set imagePath = '/themes/custom/mytheme/img/mygraphic.png' %}
<img srcset="{{ imagePath|image_style('thumbnail') }} 300w, {{ imagePath|image_style('medium') }} 800w" src="{{ file_url(imagePath) }}" alt="some graphic image" typeof="foaf:Image"/>
1
No Sssweat

（100％ではありませんが）元の画像がテーマアセットからのものであるレスポンシブな画像のレンダリングは、そのようには機能しないと確信しています。レスポンシブな画像をレンダリングするには、異なるサイズの複数の異なる画像派生物が必要です。これらは通常、画像フィールドを介した画像のアップロード中に自動的に作成されます。これが管理されていない画像からその場で行われるとは思えません。

あなたの最善の策は、テーマ設定またはシステム設定フォームから管理された画像を提供することです。これはいつものようにファイルディレクトリにアップロードされます。多分すべての画像サイズが自動的に作成されます。多分あなたはまだプログラムで画像派生物が作成されることを保証する必要があります。

あるいは、必要なすべての画像サイズをアップロードし、それらから独自のsrcsetを作成することを要求することもできます。Sssweatの回答を参照してください。

質問のaltタグは、#attributes配列から追加する必要があります。

1
leymannx