Нестандартный HTML для вставки изображений в пост

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

А обычно картинка заключается в ссылку, ну или путем нехитрых действий можно избавиться от этой ссылки в настройках.

Со ссылкой:

<a href="">
	<img class="" title="" src="" alt="" width="" height="" />
</a>

Нехитрые действия:

  • достаточно подкорректировать несколько настроек прямо в окошке вставки изображения:
    удаление ссылок на изображения в постах, WordPress

    можно просто удалить URL и ссылка пропадёт, если же заюзать одну из кнопок, то настройки применятся ко всем изображениям, в дальнейшем вставляемым в записи на блоге,

  • переходим на вкладку HTML в редакторе и делаем дело :)
    вкладка HTML редактора в WordPress
  • есть кстати способ и похитрее, используя регулярки:
    function remove_img_links( $content ) {
    	$content =
    		preg_replace(
    			array('{<a(.*?)(wp-att|wp-content\/uploads)[^>]*><img}',
    			// если медиафайлы хранятся не в uploads, то укажите своё
    			'{ wp-image-[0-9]*" /></a>}'),
    			array('<img','" />'),
    			$content
    		);
    	return $content;
    }
     
    add_filter( 'the_content', 'remove_img_links' );

В итоге от ссылок то мы всё-таки избавимся.

Итак, всё это было введение и пустая болтовня, такие способы решения вы найдете в интернете, ну по крайне мере на англоязычных сайтах.

На моем же блоге изображение заключается в блок <div class="im"></div>, то есть ни один из этих вариантов не прокатывал, я конечно мог бы поколдовать с регулярками, но мне этот способ совсем не нравится.

Кстати, раньше я вручную правил HTML для каждой картинки в редакторе, сначала удалял ссылку, потом добавлял блок и мне это ппц как надоело :)

Порывшись в файлах движка в WordPress, я сам написал решение, код вставлять в functions.php текущей темы.

function true_img($html, $id, $caption, $title, $align, $url, $size, $alt) {
	/*
	$html - HTML изображения по умолчанию,
		вот тут уже можно побаловаться с регулярными выражениями
	$id - ID аттачмента
	$caption - надпись под картинкой
	$title - атрибут title
	$align - выравнивание
	$url - либо ссылка на страницу либо на файл, зависит от того, что
		указано в настройках выше, чтобы получить адрес картинки независимо
		от настроек, используем: wp_get_attachment_url( $id )
	$size - размер изображения (Миниатюра, Средний, Большой и т.д.)
	$alt - альтернативный текст, атрибут alt
	*/
 
	$image_url = wp_get_attachment_url( $id );
	$image_thumb = wp_get_attachment_image_src( $id, $size);
 
	list( $img_src, $width, $height ) = image_downsize($id, $size);
	$hwstring = image_hwstring($width, $height); // разбираемся с размерами
 
	$out = '<div class="im">';
	if($url){
		$out .= '<a href="'.$url.'" class="fancybox">';
	}
	$out .= '<img src="'. $image_thumb[0] .'" alt="'.$alt.'" '.$hwstring.'/>';
	if($url){
		$out .= '</a>';
	}
	$out .= '</div>';
	return $out; // как раз то, что будет вставляться вместо стандартного HTML
}
 
add_filter('image_send_to_editor', 'true_img', 1, 8);

Проще простого.

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Комментарии 9

  • @ndry25 апреля 2012 в 07:04 #

    Оличноё решение!

  • Миша30 октября 2012 в 10:10 #

    обновил пост, оказывается я там накосячил в коде - вместо превьюшек вставлялись полноразмерные изображения, подогнанные при помощи атрибутов width и height.

    ппц) ну сейчас всё норм

  • ollejah25 февраля 2013 в 20:02 #

    привет, я пользуюсь так

    # Filter to remove image attributes
    add_filter( 'post_thumbnail_html', 'strip_image_attr', 10 );
    add_filter( 'image_send_to_editor', 'strip_image_attr', 10 );
    add_filter( 'genesis_get_image', 'strip_image_attr', 10 );
    add_filter( 'the_content', 'strip_image_attr', 10 );
    add_filter( 'wp_get_attachment_link', 'strip_image_attr', 10 );
    function strip_image_attr( $html ) {
    	$html = str_replace( 'http://'.$_SERVER['SERVER_NAME'], '', $html );
     
    	# strip classes
    	$html = preg_replace( '#\sclass="alignnone.*?"\s/>#', '>', $html); // alignnone
    	$html = preg_replace( '#class="(alignleft|aligncenter|alignright).*?"#', 'class="$1"', $html); // others
     
    	$html = preg_replace( '/(title|width|height)=("[^"]*"\s)/i', '', $html );
     
    	return $html;
    }
  • Елена29 июня 2013 в 18:06 #

    Как избавиться от атрибутов width и height в стандартном выводе картинки и вставить вместо них стиль max-width:100%? чтобы картинка всегда была пропорциональна разрешению страницы.. )

    • Миша30 июня 2013 в 19:06 #

      ну как вариант можно заменить эту строчку:

      26
      
      	$out .= '<img src="'. $image_thumb[0] .'" alt="'.$alt.'" '.$hwstring.'/>';

      на эту:

      26
      
      	$out .= '<img src="'. $image_thumb[0] .'" alt="'.$alt.'" max-width="100%" />';
  • Григорий23 июля 2014 в 17:07 #

    Приветствую,
    Не подскажешь как сделать так чтобы выравнивание было то которое задаёшь при загрузке картинки?
    Когда при загрузке изображений в стандартном редакторе выбираешь слева, справа, по центру при вставке в пост, автоматом выравнивание идёт по левому краю...

    • Миша24 июля 2014 в 06:07 #

      Привет!
      Попробуй переменную $align, она на 8й строчке функции. Добавь ее в атрибут class.

  • AngelLoki3 декабря 2014 в 17:12 #

    Приветствую
    Подскажи, что внедрить в alt="?", чтоб подтягивало Тайтл записи, а не название изображения... Спс

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
  • Миша: Привет ещё раз, не поверишь, реально не сталкивался с этим вопросом. По теории можно сказать следующее: во-первых,...

  • Миша: Привет, вообще без проблем, делаешь всё через require(), require_once() - выбирай любую, какая больше нравится.

  • Виталий Моргунов: Привет! Не могу разобаться, как я могу контролировать порядок подключения стилей. В моем случае мне нужно чтобы стили...

  • Миша: Спасибо!

  • w0rmak: Это было просто. Нашел код в интернете. Добавьте и себе ymaps.load(function () { var input = document.getElem...