Применение image style для изображений внутри текста

Главные вкладки

Аватар пользователя g78knl6cvxf0 g78knl6cvxf0 8 января 2013 в 17:23

Image style - клёвая штука, которая позволяет автоматически трансформировать (резать, вертеть, масштабировать и т.д.) изображения. Когда изображения находятся в отдельных полях, применить к ним стиль легко. А вот что делать, когда хочется стилизовать некоторые изображения расположенные внутри текстового поля?

Например, есть такое содержимое:

и хочется закруглить одно из его изображений. Как раз есть подходящий стиль, но как его сюда прикрутить? Искал-искал, но чего-то не нашел Sad Кто знает - подскажите, пожалуйста.

Пока сделал так:

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

Недостатки как минимум такие:

  • снижение производительности за счет постоянного сканирования содержимого регулярными выражениями.
  • нужно помнить название стилей и способ добавления подобной метки к изображению (гораздо удобнее было бы делать выбор в раскрывающемся списке)

Комментарии

Аватар пользователя g78knl6cvxf0 g78knl6cvxf0 8 января 2013 в 22:27

"<a href="mailto:sas@drupal.org">sas@drupal.org</a>" wrote:
А может http://drupal.org/project/imce ?

о, было бы здорово! А где там выбираются стили?

Нашел во вкладке Thumbnails три дефолтных: "small", "medium", "large". В настройках (/admin/config/media/imce/profile/edit/1) можно добавить еще два стиля. Но, если правильно понял, они подходят только для изменения размеров изображений.

Аватар пользователя g78knl6cvxf0 g78knl6cvxf0 8 января 2013 в 23:30

"<a href="mailto:sas@drupal.org">sas@drupal.org</a>" wrote:
IMCE генерить thumbnail - сколько их и какого размера настраивается в профилях IMCE

зря я, наверное, столько текста написал, самому читать лень, не то что требовать от других.

Сформулирую вопрос более кратко: как изображению, расположенному внутри текста, назначить произвольный стиль?

(: стиль, который может только поменять размер - не засчитывается. Даешь скругления, повороты и т.д.! Smile

Аватар пользователя sas@drupal.org sas@drupal.org 9 января 2013 в 10:20

"vaplas" wrote:
Image style - клёвая штука, которая позволяет автоматически трансформировать (резать, вертеть, масштабировать и т.д.) изображения.

И все это настраивается заранее. А
"vaplas" wrote:
как изображению, расположенному внутри текста, назначить произвольный стиль?

Это уже редактор wysiwyg вот оно http://drupal.org/project/wysiwyg + http://drupal.org/project/wysiwyg_imagefield см. видео http://www.youtube.com/watch?v=-CYGPCCzWYo&feature=youtu.be

Аватар пользователя g78knl6cvxf0 g78knl6cvxf0 9 января 2013 в 21:41

sas@drupal.org, спасибо! Wysiwyg + ImageField действительно то, что я хотел.

Правда намучился с этим вариантом не меньше чем с тем, которые описал в теме. Wysiwyg на отрез отказывался видеть CKEditor 4 - решил этим патчем. ImageField для семерки только dev, и тоже какие-то траблы были. Тупил с настройками Insert-а. И вроде бы все получилось. Но.. все равно не смог в полной мере насладится, т.к. помешал другой косяк, проявляющий себя с полями для изображений. Возник он за пару дней до этих событий, поэтому вынес его в отдельную историю.

Но в целом - да! Для меня добавление к материалу дополнительного поля для ImageField оправдывается возможностью легко вставлять стилизованные изображения. Еще раз спасибо!

Аватар пользователя antonimo antonimo 10 мая 2013 в 11:06

Только что решал похожую проблему. решение довольно простое:

1. устанавливаем модуль Insert
2. добавляем к нужному материалу одно поле типа Изображение, в настройках поля указываем, что необходимо добавить кнопку Insert в виджете (плюс указать какие image styles доступны при вставке)
3. в редактировании материала загружаем картинки, после устанавливаем курсор в поле textarea там, где требуется картинка, после нажимаем кнопку Insert в блоке с загруженным изображением.
4. Картинка с нужным стилем вставлена в текст.

Преимущества решения:
все картинки четко структурированы и управляемы, в рамках нодов (после удаления нода не будет оставаться мусора).

Недостатки: невозможно изменить image style в ранее вставленном изображении. Решения: удалить и снова вставить, или вручную править в пути к изображению.

В целом, хорошее и простое решение