تقريبا كل شيء في العنوان. أود أن أضيف فئات CSS إلى الصور التي تم إنشاؤها عبر وظيفة سمة نمط الصورة ، بحيث يبدو الإخراج كما يلي:
<img class="MYCLASS" alt="" src="site.com/sites/default/files/styles/profile_picture/public/pictures/picture-1-1318455022.jpg" typeof="foaf:Image">
هل هناك أي طريقة للقيام بذلك ؟
إذا كنت مرتاحًا لتجاوز وظائف السمة في قالب السمة الخاص بك. php يمكنك فقط إنشاء وظيفة YOURTHEME_image_style ():
http://api.drupal.org/api/drupal/modules--image--image.module/function/theme_image_style/7
إليك بعض التعليمات البرمجية المستندة إلى Ryan's answer .
theme
في theme_image_style
مع اسم موضوعك.أضف الأسطر التالية للدالة
$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);
}
استخدم وظيفة ما قبل المعالجة
تريد هذا الفصل على الصورة الفعلية ، والإضافة من خلال 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);
}
إذا كان السبب في رغبتك في إضافة الفصل هو توفير بعض 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 }
أعتقد أنك تريد استخدام هذا للتسميات التوضيحية. بعد الكثير من الصيد ، استخدم 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 بالمحدد الخاص بك.
اضغط على زر ذاكرة التخزين المؤقت الفارغ وجربه.
اقتراح هذه الإجابة .
غير ال
$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);
}