Twig में चित्र URL प्राप्त करें

Question

मैं टहनी में एक इनलाइन शैली के माध्यम से पृष्ठभूमि छवि के रूप में एक छवि प्रस्तुत करना चाहता हूं। मैंने bg_image नाम से एक फ़ील्ड बनाया और इसे मानक सादे पृष्ठ पर संलग्न किया।

घंटों तक फ़िदा होने के बाद मैं नोड में छवि URL को प्राप्त करने में सक्षम था

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

लेकिन मुझे यह फ़ील्ड - bg_image.html.twig के अंदर काम करने के लिए नहीं मिला

क्या मैं किसी भी तरह से नोड प्राप्त कर सकता हूं, इसलिए मैं फिर छवि प्राप्त कर सकता हूं?

मैं इनलाइन शैली के रूप में उपयोग करने के लिए छवि URL कैसे प्राप्त कर सकता हूं? मैंने सोचा कि शायद मैं एक चर को क्षेत्र - फ़ील्ड- bg_image.html.twig से image.html.twig और फिर सिर्फ रेंडर करने के लिए पास कर सकता हूं

{{ uri }}

के बजाय

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

लेकिन जब तक मैं शामिल नहीं करता, मुझे यह वहाँ चर पास करने के लिए नहीं मिला

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

(FromField सच है, जब यह फ़ील्ड से आता है - फ़ील्ड- bg_image.html.twig) लेकिन यह भी काम नहीं करता है। छवि को कभी भी इस तरह से प्रस्तुत नहीं किया गया था।

बहुत खुशी होगी यदि आप मदद कर सकते हैं - मेरा php ज्ञान बहुत ही बुनियादी है। धन्यवाद

Comments

drupal.stackexchange.com/questions/137319/… इसे देखें

— Adi

Answer 1

चर 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 प्राप्त करें

मॉड्यूल टिग ट्वीक को स्थापित करें और आप एक छवि शैली का url प्राप्त करने के लिए uri का उपयोग कर सकते हैं:

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

Comments

महान काम करता है! धन्यवाद। क्या यह भी संभव है, इसे एक विशिष्ट छवि शैली में प्राप्त करने के लिए? (बड़े या थंबनेल)

— जनीस हेल

Answer 2

बस यह उल्लेख करने के लिए कि यदि आप नए कस्टम ब्लॉक में से एक में यह काम करना चाहते हैं:

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

Comments

यह ब्लॉक फील्ड के लिए काम करता है।

— एलेक्स

और यह कोड पैराग्राफ की टहनी टेम्पलेट में छवि पैराग्राफ फ़ील्ड के लिए भी काम करता है।

— वादिम सुदरीकोव

हाँ! धन्यवाद। यह तब काम करता है जब आप चित्र छवि के रूप में अच्छी तरह से पैराग्राफ टेम्पलेट्स पर सामग्री छवि क्षेत्र से प्राप्त करने की कोशिश कर रहे हैं।

— रॉब डेविस

विचारों के लिए काम नहीं करता है

— जिग्नेश रावल

Answer 3

मैं अपने .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());
  }
}

इसमें सुधार किया जा सकता था। मैं छवि क्षेत्र के लिए जाँच कर रहा हूँ, और एक छवि शैली के साथ अपने यूआरएल लोड कर रहा हूँ।

फिर मेरे नोड में - 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>

फिर से, यह कुछ सुधार का उपयोग कर सकता है। धन्यवाद

Comments

यह एक नियमित छवि अपलोड फ़ील्ड के लिए काम करता है। लेकिन यह एक इकाई संदर्भ छवि क्षेत्र के लिए काम नहीं करता है।

— paulcap1

Answer 4

मैं इसे दूसरी तरह से करूँगा। आपके नोड प्रीप्रोसेस फ़ंक्शन में:

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

फिर, अपने टेम्पलेट (नोड - 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 %}

मैंने वास्तव में इसका परीक्षण नहीं किया है और मैं यह सब अपने सिर से बाहर कर रहा हूं, इसलिए इसमें त्रुटियां हो सकती हैं, बेझिझक मुझे चेतावनी दें ताकि मैं इसे ठीक कर दूं :-)।

Answer 5

जब पृष्ठभूमि केस इसके लिए अनुमति देता है तो मुझे बैकग्राउंड इमेज मॉड्यूल का उपयोग करने में कुछ सफलता मिली है। जब मुझे एक अनुकूलित DOM संरचना की आवश्यकता होती है, तो मैं इनमें से एक कोड विकल्प का उपयोग करता हूं।