छवि शैली के साथ उत्पन्न छवि में सीएसएस विशेषता कैसे जोड़ें

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

यदि आप अपने विषय के खाके में थीम कार्यों को ओवरराइड करने में सहज हैं। तो आप बस एक ORTHEME_image_style () फ़ंक्शन बना सकते हैं:

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

Comments

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

— रेशम एडमिन

तो यह विचार लिंक पृष्ठ पर कोड को अपने थीम के टेम्पलेट में डालकर कॉपी करना है। एफपी फ़ाइल (यदि आपका विषय एक नहीं है, तो इसे बनाएं) तो थीम के लिए "थीम" शब्द को अपने विषय के नाम में बदल दें, जो हो सकता है zen_image_style या garland_image_style, इत्यादि

— रयान मूल्य

Answer 2

यहाँ कुछ कोड रयान के जवाब पर आधारित है ।

1. अपने विषय के template.php पर theme_image_style से कोड को कॉपी और पेस्ट करें ।
2. की जगह themeमें theme_image_styleअपने विषय के नाम के साथ।

3. फ़ंक्शन में निम्न पंक्तियाँ जोड़ें

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

इसके बजाय 'my-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'] = 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

प्रीप्रोसेस फ़ंक्शन का उपयोग करें

आप चाहते हैं कि वास्तविक छवि पर वर्ग, जेएस / jQuery के माध्यम से जोड़ना गड़बड़ है और अगर सामग्री ajax भरी हुई है तो टूट जाती है।

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_image_style () का उपयोग क्यों नहीं करता

Theme_image_style () के माध्यम से ऐसा करने के साथ मुद्दा यह है कि यह सिर्फ एक क्षेत्र के लिए आउटपुट फ़ंक्शन को ओवरराइड करता है, क्या होगा यदि आपके पास अलग-अलग स्थानों पर कई फ़ील्ड हैं ... बहुत से कई THEME_field__field_photo__team($variables)ऐसे ही प्राप्त कर रहे हैं जैसे कि theme_image_style () का उपयोग करना।

// 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

सहमत, प्रीप्रोसेसर का उपयोग करना यहां जाने का एक अच्छा तरीका है। चूंकि क्षेत्र प्रीप्रोसेसर को प्रति पृष्ठ कई बार कहा जा सकता है, इसके बजाय नोड प्रीप्रोसेसर का उपयोग करने के बारे में क्या? एक फ़ील्ड 'field_images' के लिए, आप कक्षाओं को जोड़ सकते हैं $variables['content']['field_images'][$key]['#item']['attributes']['class'][] = [your_css_class]।

— MESCH

आप सही कह रहे हैं कि शायद नोड प्रीप्रोसेसर का उपयोग करके इसे कॉल करना अधिक कुशल होगा।

— डंकनमो

इससे मुझे एक स्कीम जोड़ने में मदद मिली जैसे कि स्कीमा डॉट मेटाडाटा का पालन करना। धन्यवाद!

— पैट्रिक

Answer 4

यदि आप जिस वर्ग को जोड़ना चाहते हैं, वह छवियों के लिए कुछ अतिरिक्त सीएसएस प्रदान करना है, तो आप डोम ट्री में ऊपरी स्तर पर जाकर इसे दरकिनार कर सकते हैं। आपकी छवियों को एक फ़ील्ड div में शामिल किया जाना चाहिए जिसमें एक वर्ग है जैसे .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

मुझे लगता है कि आप इसका उपयोग कैप्शन के लिए करना चाहते हैं। आसपास बहुत शिकार करने के बाद, Jquery का उपयोग करें। यह सामान Drupal 7 के लिए है।

अपनी js फ़ाइल बनाएँ। इसे कैप्शन कहें। js। आप इसे कुछ और कह सकते हैं। इसे अपने थीम के अंदर कहीं स्टोर करें।

सुनिश्चित करें कि स्क्रिप्ट आपके theme.info फ़ाइल को संपादित करके और स्क्रिप्ट जोड़ने के द्वारा पुकारा जाता है [] = pathtoyourfile / caption.js

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);
}