8 января 2013 в 17:23
Image style - клёвая штука, которая позволяет автоматически трансформировать (резать, вертеть, масштабировать и т.д.) изображения. Когда изображения находятся в отдельных полях, применить к ним стиль легко. А вот что делать, когда хочется стилизовать некоторые изображения расположенные внутри текстового поля?
Например, есть такое содержимое:
и хочется закруглить одно из его изображений. Как раз есть подходящий стиль, но как его сюда прикрутить? Искал-искал, но чего-то не нашел 
Кто знает - подскажите, пожалуйста.
Пока сделал так:
1. к нужному изображению добавляется класс image-style--НАЗВАНИЕ_СТИЛЯ
2. содержимое, изображения внутри которого нужно обработать, отправляется в функцию replaceImageWithStyle($string), расположенную в template.php;
<?php
function replaceImageWithStyle($str){
return preg_replace_callback(
'|<img[^>]*?class="[^"]*image-style--([0-9a-z_-]+)[^"]*".*?src="([^"]+)"[^/]*?/>|',
"getSrcImageStyle",
$str
);
}
function
getSrcImageStyle($img){
//получить uri
$path = str_replace("/sites/default/files/", "public://", $img[3]);
//создать изображение данного стиля
$new_img = theme('image_style', array('style_name' => $img[2], 'path' => $path));
//извлечь путь получившегося изображения
preg_match('|src="([^"]+)"|',$new_img,$matchesSrc);
//подставить путь в исходное изображение
return str_replace('src="'.$img[3].'"','src="'.$matchesSrc[1].'"', $img[0]);
}
?>например, чтобы отправлять на обработку содержимое поля body всех материалов, можно применить хук node_view_alter:
<?php
function THEME_node_view_alter(&$build){
if(isset($build['body'][0])){
$build['body'][0] = replaceImageWithStyle($build['body'][0]);
}
}
?>Недостатки как минимум такие:
- снижение производительности за счет постоянного сканирования содержимого регулярными выражениями.
- нужно помнить название стилей и способ добавления подобной метки к изображению (гораздо удобнее было бы делать выбор в раскрывающемся списке)
Комментарии
А может http://drupal.org/project/imce ?
о, было бы здорово! А где там выбираются стили?
Нашел во вкладке Thumbnails три дефолтных: "small", "medium", "large". В настройках (/admin/config/media/imce/profile/edit/1) можно добавить еще два стиля. Но, если правильно понял, они подходят только для изменения размеров изображений.
IMCE генерить thumbnail - сколько их и какого размера настраивается в профилях IMCE
зря я, наверное, столько текста написал, самому читать лень, не то что требовать от других.
Сформулирую вопрос более кратко: как изображению, расположенному внутри текста, назначить произвольный стиль?
(: стиль, который может только поменять размер - не засчитывается. Даешь скругления, повороты и т.д.!
И все это настраивается заранее. А
Это уже редактор wysiwyg вот оно http://drupal.org/project/wysiwyg + http://drupal.org/project/wysiwyg_imagefield см. видео http://www.youtube.com/watch?v=-CYGPCCzWYo&feature=youtu.be
sas@drupal.org, спасибо! Wysiwyg + ImageField действительно то, что я хотел.
Правда намучился с этим вариантом не меньше чем с тем, которые описал в теме. Wysiwyg на отрез отказывался видеть CKEditor 4 - решил этим патчем. ImageField для семерки только dev, и тоже какие-то траблы были. Тупил с настройками Insert-а. И вроде бы все получилось. Но.. все равно не смог в полной мере насладится, т.к. помешал другой косяк, проявляющий себя с полями для изображений. Возник он за пару дней до этих событий, поэтому вынес его в отдельную историю.
Но в целом - да! Для меня добавление к материалу дополнительного поля для ImageField оправдывается возможностью легко вставлять стилизованные изображения. Еще раз спасибо!
Пожалуйста.
Только что решал похожую проблему. решение довольно простое:
1. устанавливаем модуль Insert
2. добавляем к нужному материалу одно поле типа Изображение, в настройках поля указываем, что необходимо добавить кнопку Insert в виджете (плюс указать какие image styles доступны при вставке)
3. в редактировании материала загружаем картинки, после устанавливаем курсор в поле textarea там, где требуется картинка, после нажимаем кнопку Insert в блоке с загруженным изображением.
4. Картинка с нужным стилем вставлена в текст.
Преимущества решения:
все картинки четко структурированы и управляемы, в рамках нодов (после удаления нода не будет оставаться мусора).
Недостатки: невозможно изменить image style в ранее вставленном изображении. Решения: удалить и снова вставить, или вручную править в пути к изображению.
В целом, хорошее и простое решение