টুইগে চিত্রের URL পান

Question

আমি একটি ইমেজটিকে পটভূমির ইনলাইন স্টাইলের মাধ্যমে একটি পটভূমি চিত্র হিসাবে রেন্ডার করতে চাই। আমি bg_image নামে একটি ক্ষেত্র তৈরি করেছি এবং এটি স্ট্যান্ডার্ড প্লেইন পৃষ্ঠায় সংযুক্ত করেছি।

ঘন্টাখানেক ঘোরাঘুরি করার পরে আমি চিত্র URL টি নোড.ইচটিএমএল.টিউগিতে পেতে সক্ষম হয়েছি

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

তবে আমি এটি ক্ষেত্রের মধ্যে কাজ করতে পারিনি - ফিল্ড- bg_image.html.twig

আমি কি কোনওভাবে সেখান থেকে নোড পেতে পারি, তাই আমি তখন চিত্রটি পেতে পারি?

আমি কীভাবে চিত্রের ইউআরএলটিকে ইনলাইন শৈলী হিসাবে ব্যবহার করতে পারি? আমি ভেবেছিলাম সম্ভবত আমি ফিল্ড থেকে একটি ভেরিয়েবল পাস করতে পারি - ফিল্ড- bg_image.html.twig to image.html.twig এবং তারপরে কেবল রেন্ডার করতে পারি

{{ uri }}

পরিবর্তে

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

তবে আমি এটি ব্যবহার না করে সেখানে ভেরিয়েবলটি পাস করতে পারিনি

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

(isFromField সত্য, যখন এটি ক্ষেত্র থেকে আসে - ফিল্ড- bg_image.html.twig) তবে এটি কোনও কাজ করে নি। চিত্রটি সেভাবে আর কখনও সরবরাহ করা হয়নি।

আপনি যদি সহায়তা করতে পারেন তবে খুব খুশি হবেন - আমার পিএইচপি জ্ঞানটি খুব প্রাথমিক। ধন্যবাদ

Comments

drupal.stackexchange.com/questions/137319/… এটি দেখুন

— আদি

Answer 1

ভেরিয়েবলটি কেবল nodeনোড টেমপ্লেটে (এবং পৃষ্ঠার টেমপ্লেট, যদি ইউআরএলটিতে নোড থাকে তবে) প্রিললোড করা হয়। এখন আপনি যদি কোনও ফিল্ড টেম্পলেটে নোড ক্ষেত্রগুলি অ্যাক্সেস করতে চান তবে আপনাকে অন্য কোনও জায়গায় দেখতে হবে:

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 পেতে ইউরি ব্যবহার করতে পারেন:

{% 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

এটি ব্লক ফিল্ডের জন্য কাজ করে।

— অ্যালেক্স

এবং এই কোডটি অনুচ্ছেদের টুইগ টেম্পলেটটিতে চিত্র অনুচ্ছেদের ক্ষেত্রের জন্যও কাজ করে।

— ভাদিম সুদারিকভ

হ্যাঁ! ধন্যবাদ। আপনি যখন অনুচ্ছেদে টেমপ্লেটগুলিতে বিষয়বস্তুর চিত্র ক্ষেত্র থেকে চিত্র url পাওয়ার চেষ্টা করছেন তখন এটি কাজ করে।

— রব ডেভিস

দেখার জন্য কাজ করে না

— জিগনেশ রাওয়াল

Answer 3

আমি আমার। থিম ফাইলটিতে এই কোডটি ব্যবহার করি:

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 লোড করছি।

তারপরে আমার নোডে - 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

এটি নিয়মিত চিত্র আপলোড ক্ষেত্রের জন্য কাজ করে। তবে এটি কোনও সত্তা রেফারেন্স চিত্রের ক্ষেত্রে কাজ করে না।

— পলকাপ 1

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

ব্যাকগ্রাউন্ড ইমেজ মডিউলটি ব্যবহারের ক্ষেত্রে যখন এটির অনুমতি দেয় তখন আমি কিছুটা সাফল্য পেয়েছি । আমার যখন একটি কাস্টমাইজড ডিওএম কাঠামো প্রয়োজন তখন আমি এই কোড বিকল্পগুলির মধ্যে একটি ব্যবহার করি।