Вы здесь

Кастомизация вида картинок в анонсе

1

Как можно организовать подобную структуру в анонсе материала?
структура картинок

Версия Drupal: 
7.x
Категория: 
Theming
Вопрос задан 27.02.2015 - 14:04

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

Комментарий оставлен 27.02.2015 - 15:04

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

Да, именно так.
А где взять такой же рабочий пример я не знаю, т.к. я попросту такого ещё не видел.

Комментарий оставлен 27.02.2015 - 15:10

Ответы

1

Или руками через изменение HTML и CSS (тут удобно на фреймворке будет сделать).
Если мышкотыкально, то модуль views и EVA. 1 вьюха сетка из 4х картинок малого размера. 2я вьюха это картинка большого и та первая вьюха их 4х мелких картинок (при помощи EVA). И далее по аналогии.

Ответ дан 28.02.2015 - 11:18
Аватар пользователя SAM
SAM
212
2

Ещё как вариант можно переопределить вывод поля через шаблон типа: 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 ?>:&nbsp;</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.

Ответ дан 27.02.2015 - 18:21
Аватар пользователя Niklan
Niklan
445
1

colorbox + css, как вариант

Ответ дан 27.02.2015 - 15:17
1

Если используется colorbox, то в настройках отображения есть такая настройка:
colorbox
Меняет стиль отображения первого изображения.
Картинки справа выравнять с помощью CSS

Ответ дан 27.02.2015 - 21:51
0
img {
  float: left;
  width: 100px;
  height: 100px;
}
img:first-child {
  width: 200px;
  height: 200px;
}
Ответ дан 27.02.2015 - 15:37
Аватар пользователя xandeadx
xandeadx
1527