1. Главная
  2. Блоги
  3. Блог mg.bsv

Оформление кликабельных картинок в Drupal или как вставить вспомогательный тег внутрь поля с картинкой image_style

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

Аватар пользователя mg.bsv mg.bsv 30 августа 2015 в 17:04

Задача: При наведении курсора мыши на картинку над этой картинкой должна появляться лупа (или другой элемент оформления), указывающая на то, что по картинке можно щелкнуть. Обязательным условием является то, что поле с картинкой формируется с использованием стиля (вида) изображения.

Решение 1. Изменить картинку курсора (решение не рассматривается, см. Google).
Решение 2. При помощи javascript добавить внутрь ссылки (рядом с тегом картинки) вспомогательный тег (решение не рассматривается, см. Google).

Решение 3. Используя темизацию Drupal добавить вспомогательный тег(и) внутрь ссылки, рядом с тегом картинки. Это решение может быть полезным в разных ситуациях, а не только в описанной задаче, а также в тех случаях, когда решения 1 и 2 будут несостоятельны.

В теме (mytheme), в файле template.php переопределяем функцию темизации стиля (вида) изображения.

function mytheme_image_style($variables) {
  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables ['width'],
    'height' => $variables ['height'],
  );

  image_style_transform_dimensions($variables ['style_name'], $dimensions);

  $variables ['width'] = $dimensions ['width'];
  $variables ['height'] = $dimensions ['height'];

  // Determine the URL for the styled image.
  $variables ['path'] = image_style_url($variables ['style_name'], $variables ['path']);
  return theme('image', $variables) . 'вспомогательный тег(и)';
}

В моем случае в качестве вспомогательного тега было добавлено: <span class="image-hover"></span>. Этого было достаточно.

По итогу получаем что-то такое:

<figure class="clearfix field-item even">
    <a href="href">
        <img src="/files/styles/.../image.jpg">
        <div class="image-hover"></div>
    </a>
</figure>

Все что осталось это добавить необходимые стили:

figure {
    position: relative;
}
. figure a .image-hover {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 100ms;
    -moz-transition: all 100ms;
    -webkit-transition: all 100ms;
    background: url("../imgs/img-hover-zoom.png") no-repeat center center;
}
figure a:hover .image-hover {
  visibility: visible;
  opacity: 1;
}

Это решение работает во всех случаях, когда для показа картинки используются стили (виды) изображений, в том числе, когда используется colorbox.
Единственный недостаток, когда картинка не кликабельна (не обернута в тег a), вспомогательный тег(и) тоже добавляется (хотя этого никак не видно пользователю). Это можно устранить, но тогда нужно переопределять несколько функций темизации вместо theme_image_style.

Всего наилучшего!