চিত্রের শৈলীতে উত্পন্ন ইমেজটিতে কীভাবে একটি সিএসএস বৈশিষ্ট্য যুক্ত করা যায়

Question

শিরোনামে খুব সুন্দর। আমি ইমেজ শৈলী থিম ফাংশনটির মাধ্যমে উত্পন্ন চিত্রগুলিতে একটি সিএসএস ক্লাস যুক্ত করতে চাই, যাতে আউটপুটটি দেখতে:

<img class="MYCLASS" alt="" src="site.com/sites/default/files/styles/profile_picture/public/pictures/picture-1-1318455022.jpg" typeof="foaf:Image"> 

যাইহোক এমন কি আছে?

Answer 1

আপনি যদি আপনার থিমের টেমপ্লেট.পিপিতে থিম ফাংশনগুলিকে ওভাররাইড করতে স্বাচ্ছন্দ্য বোধ করেন তবে আপনি কেবল একটি YOURTHEME_image_style () ফাংশন তৈরি করতে পারেন:

http://api.drupal.org/api/drupal/modules--image--image.module/function/theme_image_style/7

Comments

ওয়েল আমি বলতে চাই থিম ফাংশন আমার জন্য এখনই খুব ঝাপসা। আপনার কি কোনও উপায়ে সংস্থানগুলির সাথে কিছু সংযোগ রয়েছে যা এটি পরিষ্কার করে দিতে পারে?

— সিল্কএডমিন

সুতরাং ধারণাটি হল লিঙ্কযুক্ত পৃষ্ঠায় কোডটি আপনার থিমের টেমপ্লেট.এফপি ফাইলটিতে অনুলিপি করা (যদি আপনার থিমটি না থাকে তবে এটি তৈরি করুন) তারপরে থিম_ইমজ_স্টাইলে "থিম" শব্দটি আপনার থিমের নামে পরিবর্তন করুন যা হতে পারে জেন_আইমেজ_ স্টাইল বা মালা_আইমেজ_ স্টাইল ইত্যাদি হয়ে যান

— রায়ান দাম

Answer 2

রায়ের উত্তরের উপর ভিত্তি করে এখানে কিছু কোড রয়েছে ।

1. থিম_মাজে_স্টাইল থেকে কোডটি আপনার থিমের টেমপ্লেট.এফপিতে অনুলিপি করুন এবং আটকান ।
2. প্রতিস্থাপন themeমধ্যে theme_image_styleআপনার থিমের নাম দিয়ে।

3. ফাংশনে নিম্নলিখিত লাইনগুলি যুক্ত করুন

     $variables['attributes'] = array(
         'class' => 'my-class',
     );

পরিবর্তে 'my-class'আমি প্রকৃত শৈলীর নামটি ব্যবহার করতে চেয়েছিলাম, সুতরাং আমি $variables['style_name']পরিবর্তে ব্যবহার করেছি । চিত্র শৈলীর নামগুলি সর্বদা বৈধ CSS শ্রেণীর নাম, তাই এই পদ্ধতির সাথে কোনও সমস্যা হওয়া উচিত নয়। ফাংশনটি দেখতে এইরকম হওয়া উচিত:

function MYTHEME_image_style($variables) {
  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'], 
    'height' => $variables['height'],
  );

  image_style_transform_dimensions($variables['style_name'], $dimensions);

  $variables['width'] = $dimensions['width'];
  $variables['height'] = $dimensions['height'];

  $variables['attributes'] = array(
    'class' => $variables['style_name'],
  );

  // Determine the url for the styled image.
  $variables['path'] = image_style_url($variables['style_name'], $variables['path']);
  return theme('image', $variables);
}

Answer 3

প্রিপ্রোসেস ফাংশন ব্যবহার করুন

আপনি প্রকৃত চিত্রটিতে সেই শ্রেণিটি চান, জেএস / জিকুয়েরির মাধ্যমে যোগ করা অগোছালো এবং বিষয়বস্তু অ্যাজাক্সে বোঝা থাকলে ব্রেক হয়।

function THEMENAME_preprocess_field(&$variables) {


    if($variables['element']['#field_name'] == 'field_photo'){

        foreach($variables['items'] as $key => $item){

            $variables['items'][ $key ]['#item']['attributes']['class'][] = 'img-circle';

        }

    }

}

---

আমি কেন এর জন্য থিম_আইমেজ_স্টাইল () ব্যবহার করি না

থিম_আইমেজ_স্টাইল () এর মাধ্যমে এটি করার সমস্যাটি হ'ল এটি কেবল একটি ক্ষেত্রের জন্য আউটপুট ফাংশনকে ওভাররাইড করে, যদি আপনার বিভিন্ন স্থানে একাধিক ক্ষেত্র থাকে ... THEME_field__field_photo__team($variables)থিম_ইমেজ_স্টাইল () ব্যবহার করে উপরের মত অনেকগুলি একই রকম হয়:

// Override the field 'field_photo' on the content type 'team'
function THEMENAME_field__field_photo__team($variables) {

    // Determine the dimensions of the styled image.
    $dimensions = array(
        'width' => $variables['width'],
        'height' => $variables['height'],
    );

    image_style_transform_dimensions($variables['style_name'], $dimensions);

    $variables['width'] = $dimensions['width'];
    $variables['height'] = $dimensions['height'];

    $variables['attributes'] = array(
        'class' => $variables['img-circle'],
    );

    // Determine the URL for the styled image.
    $variables['path'] = image_style_url($variables['style_name'], $variables['path']);
    return theme('image', $variables);

}

Comments

সম্মত, একটি প্রিপ্রসেসর ব্যবহার করা এখানে যাওয়ার ভাল উপায়। যেহেতু ক্ষেত্রের প্রিপ্রোসেসরকে প্রতি পৃষ্ঠায় বহুবার বলা যেতে পারে, তার পরিবর্তে নোড প্রিপ্রোসেসর ব্যবহারের কী হবে? ক্ষেত্রের জন্য 'ফিল্ড_আইমেজ', আপনি ক্লাসগুলি এর মাধ্যমে যুক্ত করতে পারেন $variables['content']['field_images'][$key]['#item']['attributes']['class'][] = [your_css_class]।

— মেস্ক

আপনি সম্ভবত ডেকে বলছেন নোড প্রিপ্রোসেসর ব্যবহার করে এটি আরও দক্ষ হবে।

— ডানকানমু

এটি আমাকে স্কিমা.অর্গ মেটাডেটা মেনে চলার জন্য একটি সম্পত্তি যুক্ত করতে সহায়তা করেছে। ধন্যবাদ!

— প্যাট্রিক 19

Answer 4

আপনি ক্লাসটি যুক্ত করতে চাইলে যদি চিত্রগুলির জন্য কিছু অতিরিক্ত সিএসএস সরবরাহ করা হয় তবে আপনি ডোম গাছের উপরের স্তরে গিয়ে এটিকে অবরুদ্ধ করতে পারেন। আপনার চিত্রগুলি এমন একটি ফিল্ড ডিভের অন্তর্ভুক্ত করা উচিত যার মতো শ্রেণি রয়েছে .field-type-image। এটি মাথায় রেখে আপনি এমন একটি নির্বাচক লিখতে পারেন যা চিত্রগুলি বেছে নেয়, এরকম কিছু:
div.field-type-image img {border: 1px solid #ccc }

বা আরও নির্দিষ্ট একটি যেমন:

div.field-type-image div.field-items div.field-item img {border: 1px solid #ccc }

Answer 5

আমি মনে করি আপনি এটি ক্যাপশনগুলির জন্য ব্যবহার করতে চান। আশেপাশে অনেক শিকারের পরে, জ্যাকুয়ারি ব্যবহার করুন। এই স্টাফ ড্রুপাল 7 এর জন্য।

আপনার জেএস ফাইল তৈরি করুন। একে ক্যাপশন.জেএস বলুন। আপনি এটিকে অন্য কিছু বলতে পারেন। আপনার থিমের ভিতরে এটি কোথাও সঞ্চয় করুন।

আপনার থিম.info ফাইল সম্পাদনা করে এবং স্ক্রিপ্টগুলি যুক্ত করে স্ক্রিপ্টটি কল করা হয়েছে তা নিশ্চিত করুন [] = প্যাথোইওরফাইল / ক্যাপশন.জেএস

caption.js এ নিম্নলিখিত কোড থাকা উচিত

(function ($) {
Drupal.behaviors.caption = {
attach: function(context, settings) {
$('.views-field-field-useimage img').addClass('caption');
  }}})
(jQuery);

বিকল্প। ভিউ-ফিল্ড-ফিল্ড-ইউজিমেজ img আপনার নিজের নির্বাচকের জন্য।

খালি ক্যাশে বোতামটি চাপুন এবং এটিকে একবার দেখুন।

Answer 6

এই উত্তরের জন্য একটি পরামর্শ ।

পরিবর্তন

$variables['attributes'] = array(
  'class' => $variables['style_name'],
);

প্রতি

$variables['attributes']['class'][] = $variables['style_name'];

সুতরাং চিত্র শৈলীর নামটি শ্রেণীর অ্যারেতে যুক্ত হয় এবং অজান্তেই কোনও কিছুই স্কোয়াশড হয় না।

সম্পূর্ণ স্নিপেট:

function MYTHEME_image_style($variables) {
  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'], 
    'height' => $variables['height'],
  );

  image_style_transform_dimensions($variables['style_name'], $dimensions);

  $variables['width'] = $dimensions['width'];
  $variables['height'] = $dimensions['height'];

  $variables['attributes']['class'][] = $variables['style_name'];

  // Determine the url for the styled image.
  $variables['path'] = image_style_url($variables['style_name'], $variables['path']);
  return theme('image', $variables);
}