Ответы
Или руками через изменение HTML и CSS (тут удобно на фреймворке будет сделать).
Если мышкотыкально, то модуль views и EVA. 1 вьюха сетка из 4х картинок малого размера. 2я вьюха это картинка большого и та первая вьюха их 4х мелких картинок (при помощи EVA). И далее по аналогии.
Ещё как вариант можно переопределить вывод поля через шаблон типа: field--FIELD_MACHINE_NAME--CONTENT_TYPE.tpl.php, где:
- FIELD_MACHINE_NAME - машинное имя поля с изображением, например field_image нужно употреблять как field--field-image.tpl.php
- CONTENT_TYPE - машинное имя типа содержимого, для которого будет применяться шаблон. Это опционально.
А содержание примерно следующее:
<?php
// К первой картинке применяем стиль изображения 'first_photo'.
$items[0]['#image_style'] = 'first_photo';
?>
<div class="<?php print $classes; ?>"<?php print $attributes; ?>>
<?php if (!$label_hidden): ?>
<div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>: </div>
<?php endif; ?>
<div class="field-items"<?php print $content_attributes; ?>>
<?php foreach ($items as $delta => $item): ?>
<div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
<?php endforeach; ?>
</div>
</div>
По такому принципу можно полностью кастомизировать вывод поля. Если нужно лишь стиль сменить, я думаю куда более продуктивнее подлезть через хук: template_preprocess_field(), например:
function THEMENAME_preprocess_field(&$variables) {
if($variables['element']['#field_name'] == 'FIELD_NAME') {
$variables['items']['0']['#image_style'] = 'first_photo';
}
}
Первый вариант более гибок в плане HTML, можно вообще всё переопределить в нём. Второй вариант, намного лаконичнее в случае, если просто нужно сменить стиль, или какие-то мелкие правки не касающиеся html.
colorbox + css, как вариант
Если используется colorbox, то в настройках отображения есть такая настройка:
Меняет стиль отображения первого изображения.
Картинки справа выравнять с помощью CSS
img {
float: left;
width: 100px;
height: 100px;
}
img:first-child {
width: 200px;
height: 200px;
}
Еще вариант field_group и bootstrap grid. Примерно что-то такое делал тут: http://rock63.ru/afisha/venue/podval
Первое изображение должно выводиться большего размера, а остальные миниатюрами справа сеткой? Или при клике на миниатюру изображение должно выводиться увеличенным в левой части? И вообще желательно в таких случаях давать ссылку на рабочий пример, а не прототип.
Да, именно так.
А где взять такой же рабочий пример я не знаю, т.к. я попросту такого ещё не видел.