it-swarm.asia

كيفية إضافة سمة CSS إلى الصورة التي تم إنشاؤها باستخدام نمط الصورة

تقريبا كل شيء في العنوان. أود أن أضيف فئات CSS إلى الصور التي تم إنشاؤها عبر وظيفة سمة نمط الصورة ، بحيث يبدو الإخراج كما يلي:

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

هل هناك أي طريقة للقيام بذلك ؟

7themingmedia
10
silkAdmin

إذا كنت مرتاحًا لتجاوز وظائف السمة في قالب السمة الخاص بك. php يمكنك فقط إنشاء وظيفة YOURTHEME_image_style ():

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

4
Ryan Price

إليك بعض التعليمات البرمجية المستندة إلى Ryan's answer .

  1. انسخ والصق الرمز من theme_image_style إلى template.php الخاص بموضوعك.
  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);
}
4
kapex

استخدم وظيفة ما قبل المعالجة

تريد هذا الفصل على الصورة الفعلية ، والإضافة من خلال JS/jQuery أمر فوضوي ويتعطل إذا كان المحتوى محملاً.

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

}
4
Duncanmoo

إذا كان السبب في رغبتك في إضافة الفصل هو توفير بعض css إضافية للصور ، فيمكنك التحايل على هذا من خلال الانتقال إلى المستوى الأعلى في شجرة dom. يجب تضمين صورك في قسم الحقل الذي يحتوي على فئة مثل .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 }

1
nikan

أعتقد أنك تريد استخدام هذا للتسميات التوضيحية. بعد الكثير من الصيد ، استخدم Jquery. هذه الأشياء لـ Drupal 7.

إنشاء ملف شبيبة الخاص بك. يطلق عليه caption.js. يمكنك تسميتها بشيء آخر. قم بتخزينه داخل السمة الخاصة بك في مكان ما.

تأكد من استدعاء البرنامج النصي من خلال تعديل ملف theme.info وإضافة البرامج النصية [] = pathtoyourfile/caption.js

يجب أن يحتوي caption.js على الكود التالي

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

استبدل .views-field-field-useimage img بالمحدد الخاص بك.

اضغط على زر ذاكرة التخزين المؤقت الفارغ وجربه.

1
Tony Horrocks

اقتراح هذه الإجابة .

غير ال

$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);
}
0
ponies