Не уверен, что это правильный этикет стека, чтобы ответить на мой собственный пост дважды (!), Но я хотел выложить этот код на тот случай, если он кому-нибудь поможет.
Вот пользовательская функция (вставьте в файл function.php вашей темы Wordpress) и сопровождающие ее элементы CSS, которые позволят вам использовать шорткод для размещения двух изображений рядом и выравнивания их по левому, правому краю или по центру (по умолчанию) является центром, если выравнивание не указано).
Он закодирован для двух изображений, но его можно легко изменить, чтобы обрабатывать больше. Также требуется, чтобы вы использовали теги [caption] на изображениях, поскольку это то, для чего я нуждался (и для чего разбивается строка), но я мог бы конкретизировать это позже, чтобы иметь дело с различными ситуациями.
По сути, он анализирует код изображения между вашими новыми тегами [side_by_side] и разбивает его на [/ caption], создавая массив, в котором каждый элемент представляет собой одно изображение. Он анализирует ширину (поскольку каждый тег изображения имеет две указанные ширины - заголовок и фактическое изображение - он проверяет, какая из них больше, и использует эту), а затем генерирует код с правильными размерами div.
Очевидно, что это не решение «поймать все», иначе я бы загрузил его как плагин! Он был закодирован для моих специфических потребностей, но его можно изменить для ваших конкретных нужд с небольшим перекодированием. Используйте с моего благословения, я не несу никакой ответственности за то, что это может сделать для вашего сайта :) PS - Я знаю, что использование регулярных выражений, как правило, плохая форма для разбора HTML, но в моем случае это была такая маленькая мелкомасштабная работа, которую я не делал думаю, это будет проблемой. Если кто-то хочет оптимизировать / перекодировать, дайте мне знать, я просто научил себя достаточно PHP, чтобы сделать это сегодня, ни в коем случае не эксперт ...
/* CUSTOM FUNCTION ADDED BY JIM - 5/20/2010 TO ALLOW CENTERING SIDE-BY-SIDE IMAGES */
add_shortcode('side_by_side', 'side_by_side');
function side_by_side($attr, $content = null) {
extract(shortcode_atts(array(
'align' => 'center'
), $attr));
$images = explode( "[/caption]", $content, -1);
foreach($images as &$image)
{
$image = $image.'[/caption]';
}
$img = array();
foreach($images as $img_tag)
{
preg_match_all('/width=\"(.*?)\"/i', $img_tag, $img[$img_tag]);
}
$widths = array();
for ($i = 0; $i < count($images); $i++)
{
$firstval = $img[($images[$i])][1][0];
$secondval = $img[($images[$i])][1][1];
if ($firstval >= secondval)
$widths[$i]=$firstval;
else
$widths[$i]=$secondval;
}
return '<div class="main-img-wrap wrap' . esc_attr($align) . '" style="max-width: ' . (24 + (int) $widths[0] + (int) $widths[1]) . 'px"><div class="sub-img-wrap" style="width: '
. (12 + (int) $widths[0]) . 'px">' . do_shortcode( $images[0] ) . '</div><div style="margin-left: ' . (12 + (int) $widths[0]) . '">' . do_shortcode( $images[1] ) . '</div></div>';
}
И элементы CSS:
/* centered side-by-side image wrappers, added by Jim 5/20/2010 */
.main-img-wrap {} /* left blank for future style enhancements */
.sub-img-wrap {float: left;}
.wrapcenter {margin: 0 auto;}
.wrapright {float: right; margin: 0 0 10px 14px;}
.wrapleft { float: left; margin: 0 14px 10px 0; }