Почти все в названии. Я хотел бы добавить классы CSS к изображениям, сгенерированным с помощью функции темы стиля изображения, чтобы результат выглядел следующим образом:
<img class="MYCLASS" alt="" src="site.com/sites/default/files/styles/profile_picture/public/pictures/picture-1-1318455022.jpg" typeof="foaf:Image">
Есть ли способ сделать это?
Вот код, основанный на ответе Райана .
theme
вtheme_image_style
с именем вашей темы.добавьте следующие строки в функцию
Вместо того,
'my-class'
чтобы использовать имя фактического стиля, я использовал$variables['style_name']
вместо этого. Имена стилей изображения всегда являются допустимыми именами классов CSS, поэтому с этим подходом не должно возникнуть никаких проблем. Функция должна выглядеть так:источник
Используйте функцию предварительной обработки
Вы хотите, чтобы этот класс на реальном изображении, добавление через JS / jQuery является грязным и ломается, если контент загружен ajax.
Почему я не использую theme_image_style () для этого
Проблема, связанная с выполнением этого с помощью theme_image_style (), заключается в том, что он переопределяет функцию вывода только для одного поля, а что, если у вас есть несколько полей в разных местах ... слишком много для
THEME_field__field_photo__team($variables)
достижения того же, что и выше с использованием theme_image_style (), будет выглядеть так:источник
$variables['content']['field_images'][$key]['#item']['attributes']['class'][] = [your_css_class]
.Если причина, по которой вы хотите добавить класс, состоит в том, чтобы предоставить некоторые дополнительные CSS для изображений, то вы можете обойти это, перейдя на верхний уровень в дереве dom. Ваши изображения должны быть включены в поле 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 }
источник
Я думаю, что вы хотите использовать это для подписей. После долгой охоты используйте Jquery. Этот материал для Drupal 7.
создайте свой JS-файл. Назовите это caption.js. Вы можете назвать это как-то еще. Храните это в своей теме где-нибудь.
Убедитесь, что скрипт вызывается, отредактировав файл theme.info и добавив scripts [] = pathtoyourfile / caption.js
caption.js должен содержать следующий код
Замените .views-field-field-useimage img на ваш собственный селектор.
Нажмите пустую кнопку кэша и попробуйте.
источник
Предложение для этого ответа .
Изменить
в
таким образом, имя стиля изображения добавляется к массиву классов, и ничего случайно не сдавливается.
Полный фрагмент:
источник