나뭇 가지에서 이미지 URL 가져 오기

나뭇 가지에서 인라인 스타일을 통해 이미지를 배경 이미지로 렌더링하고 싶습니다. bg_image라는 필드를 만들어 표준 일반 페이지에 첨부했습니다.

몇 시간 동안 둘러 본 후 node.html.twig에서 이미지 URL을 얻을 수있었습니다.

{{ file_url(node.field_bg_image.0.entity.uri.value) }}

하지만 현장에서 작동하지 못했습니다 --field-bg_image.html.twig

어쨌든 노드를 가져 와서 이미지를 얻을 수 있습니까?

이미지 URL을 인라인 스타일로 사용하려면 어떻게해야합니까? field-bg_image.html.twig에서 image.html.twig에 변수를 전달한 다음 렌더링 할 수 있다고 생각했습니다.

{{ uri }}

대신에

<img{{ attributes.addClass(classes) }} />

하지만 포함을 사용하지 않으면 변수를 전달할 수 없었습니다.

{% include 'image.html.twig' with {'image': image, 'isFromField': isFromField} %}

(field-bg_image.html.twig 필드에서 올 때 isFromField는 true입니다.) 그러나 그것은 작동하지 않았습니다. 이미지는 그런 식으로 렌더링되지 않았습니다.

도움이된다면 매우 기쁠 것입니다. 내 PHP 지식은 매우 기본적입니다. 감사

변수 node는 노드 템플리트 (및 URL에 노드가 포함 된 경우 페이지 템플리트)에만 사전로드됩니다. 이제 필드 템플릿에서 노드 필드에 액세스하려면 다른 위치에서 찾아야합니다.

field.html.twig :

{{ file_url(element['#object'].field_image.0.entity.uri.value) }}

element['#object'] 는 필드 템플릿의 상위 엔티티이며이 엔티티 (귀하의 경우 노드)의 모든 필드에 액세스 할 수 있습니다.

실제 필드에서 원시 값에 액세스하려면 필드 나뭇 가지의 논리를 따르고 필드 항목 객체에서 항목 루프 내부의 값에 직접 액세스하는 것이 좋습니다 #item.

{% for item in items %}
  {{ file_url(item.content['#item'].entity.uri.value) }}
{% endfor %}

편집 : 이미지 스타일의 URL 가져 오기

Twig Tweak 모듈을 설치하면 uri를 사용하여 이미지 스타일의 URL을 얻을 수 있습니다.

{% for item in items %}
  {{ item.content['#item'].entity.uri.value | image_style('thumbnail') }}
{% endfor %}

새로운 사용자 정의 블록 중 하나에서 동일한 작업을 수행하려는 경우 다음과 같이 작동합니다.

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

내 .theme 파일에서이 코드를 사용합니다.

function THEMENAME_preprocess_node(&$variables) {

  if ($variables['node']->field_image->entity) {
      $variables['image_url'] = $url = entity_load('image_style', 'medium')->buildUrl($variables['node']->field_image->entity->getFileUri());
  }
}

개선 될 수 있습니다. 이미지 필드를 확인하고 URL을 이미지 스타일로로드하고 있습니다.

그런 다음 내 node--page.html.twig 파일에 다음이 있습니다.

{% if image_url is not empty %}
    <div class="featured-thumb">
        <img src="{{ image_url }}"/>
    </div>
{% endif %}

<div>{{ content.body|without('field_image') }}</div>

다시, 그것은 약간의 개선을 사용할 수 있습니다. 감사

다른 방법으로하겠습니다. 노드 전처리 기능에서 :

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset($node->get('field_image')->entity)){
        $image_style = 'large'; // Or whatever your image style's machine name is.
        $style = ImageStyle::load($style);
        $variables['image'] = $style->buildUrl($node->get('field_image')->entity->getFileUri()); // Generates file url.
    }
}

그런 다음 템플릿 (node--NODETYPE.html.twig)에서 이미지를 다음과 같이 렌더링하십시오.

{% if image %}
    <img src="{{ image }}" />
{% endif %}

많은 양의 이미지를 렌더링 해야하는 경우 각 이미지를 반복하기 전에 배열에 스타일을로드하는 것이 좋습니다. 300 개가 넘는 이미지를로드해야하기 때문에 심각한로드 시간 문제가 발생했기 때문에 각 이미지마다 이전에로드하지 않고 개별적으로 스타일을로드했습니다. 위와 같은 기본 예제는 다음과 같습니다.

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset(node->get('field_images')[0]->entity)){ // Notice how, this time, I check if the FIRST image is set (if it's true, then u'll allow the loop for at least 1 element)
        $images_styles = [
            'large' => ImageStyle::load('large'),
            'thumbnail' => ImageStyle::load('thumbnail')
        ];
        $count = 0;

        foreach($node->get('field_images') as $image){
            $variables['images'][$count]['large'] = $images_styles['large']->buildUrl($image->getFileUri());
            $variables['images'][$count]['thumbnail'] = $images_styles['thumbnail']->buildUrl($image->getFileUri());
            $count++;
        }
    }
}

그런 다음 템플릿 (노드 --NODETYPE.html.twig)에서 이미지를 다음과 같이 렌더링하면됩니다.

{% if images %}
    <ul>
        {% for image in images %}
            <li>
                <img src="{{ image.large }}" /> // Large image url.
                <img src="{{ image.thumbnail }}" /> // Thumbnail image url.
            </li>   
        {% endfor %}
    </ul>
{% endif %}

나는 실제로 그것을 테스트하지 않았고 오류를 포함 할 수 있도록이 모든 것을 내 머리에서 꺼내고 있습니다.

유스 케이스가 허용하는 경우 Background Image Module을 사용하여 약간의 성공을 거두었 습니다. 맞춤형 DOM 구조가 필요할 때 이러한 코드 옵션 중 하나를 사용합니다.