как создать блок картинок с кликабельным описанием

Доброго времени суток, друзья. Покажу вам сегодня как сделать блок картинок, расположенных по горизонтали, с кликабельным описанием. В статье несколько вариантов оформления картинок  был задан именно такой вопрос. 

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

блок картинок


Рабочий вариант можно увидеть на тестовом блоге


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

<style>.thumb figure {
  width: 23%; 
  margin: 1%;
  display: inline-block;
}

/* - стили ячейки - */

.thumb img {
  border: 1px solid #55c5e9;
  width: 100%;
}

/* - описания- */

.thumb figcaption {
  text-align: center;
  font-style: italic;
}</style>


<div class="thumb">

<figure>
    <img height="120" src="адрес вашего изображения" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание ">текст под картинкой</a></figcaption>
  </figure><!--
  --><figure>
    <img src="адрес вашего изображения" height="120" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
  </figure><!--
  --><figure>
    <img height="120" src="адрес вашего изображения" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
  </figure>
<figure>
    <img height="120" src="адрес вашего изображения" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
  </figure>
<figure>
    <img height="120" src="адрес вашего изображения" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
</figure>
<figure>
    <img src="адрес вашего изображения" height="120" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>
</div>


В зависимости от размера страницы, значение ширины блока  width: 23%;  можно менять, при увеличении значения, картинок в ряду будет меньше и наоборот, при уменьшении  - больше. Так что есть возможность загружать любое количество изображений и они будут автоматически переходить в следующий ряд.

Добавляйте в код сколько угодно вот таких фрагментов

<figure>
    <img src="адрес вашего изображения" height="120" width="120" />
    <figcaption><a href="ссылка на страницу при клике на описание">текст под картинкой</a></figcaption>

Размеры картинок в коде height="120" width="120", так же устанавливайте нужные. Следует учесть ещё один момент. Количество символов в описании под картинкой желательно делать одинаковое, иначе ячейки блоков не корректно отобразятся по высоте.

 text-align: center; можно изменить на left.

В редакторе изображения будут выглядеть по вертикали. Вот так

Пусть вас это не пугает. В режиме просмотра результат уже будет виден. Так что вполне можно поиграться с настройками картинок блока.

Сейчас вот подумала, что можно подобным образом сделать, что - то подобие карты, хотя бы для отдельного ярлыка. Создать страницу и вставить туда код. Затем после публикации очередного поста данной категории, вставлять в код фрагмент, выделенный выше. Будут и картинки, и кликабельное название поста.

А ещё, почему бы не использовать иногда такой вариант в качестве Посты по теме (или ещё как назвать это) - в конце некоторых сообщений.

Советую ещё рассмотреть и такой вариант. Творите что хотите.

У меня сегодня всё. Не отнимаю больше ваше драгоценное время. До встречи. 

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

14 комментариев:

  1. Вика, спасибо большое за статью, я как раз и спрашивала про такой вариант для отдельной страницы, где будут только карточки товаров с описанием и ценой. У меня почему-то у картинок сверху и снизу промежуток пустой (меняла высоту, промежуток остается). И можно сделать адаптивный вариант, когда смотришь на мобильную версию, все карточки товаров сужаются. Вот скрины тестового варианта(https://vk.cc/8PB6Mc https://vk.cc/8PB7gP )

    ОтветитьУдалить
    Ответы
    1. Тата, мне бы не это посмотреть(я имею виду промежуток) мне нужно хотя бы страницу видеть, о чём речь. С адавптивной думаю нужно просто шаблон сам сделать для любого разрешения. Насчёт карточек, как Вы хотите можно попробовать ещё такой вариант https://www.artlebedev.ru/technogrette/html/thumbnails-center/

      Удалить
  2. Вика, спасибо за ссылку, то что надо было! Все получилось, и этот вариант адаптивен под мобильную версию.

    ОтветитьУдалить
  3. Интересная идея, особенно для тех, кто продает товары )))

    ОтветитьУдалить
    Ответы
    1. Вика, тут ещё масса вариантов для реализации. Пока пост писала уже вон в голову 2 идеи пришло.

      Удалить
  4. Надо попробовать! Обычно текст пишу перед или после (как все), а так интересное разнообразие можно попрактиковать.

    ОтветитьУдалить
    Ответы
    1. Валерия, вариант интересный, правда. Можно давать в статье ссылки с картинками на похожие сообщения, например.

      Удалить
    2. О, вот это совсем здорово! Не подумала о таком варианте. С картинкой-то обычно больше желания почитать)))

      Удалить
  5. Валерия, вот смотри, у меня под каждым постом есть статьи под названием Рекомендуем. Показаны похожие сообщения. Код автоматически выводит их . Но это нужно в шаблоне немного покопаться. Если интересно код здесь http://www.shpargalochki.ru/2015/03/pohozhie-soobshhenija-pod-pod-kazhdym-postom.html и вот здесь http://www.shpargalochki.ru/2017/07/pohozhie-soobsheniya-pod-kazhdym-postom-s-miniatyurami-blogger.html
    Не все любят в шаблоне копаться. А таким образом можно сделать для отдельного поста.

    ОтветитьУдалить
    Ответы
    1. Я тоже столько в шаблон уже налазила, что решила бить себя по рукам, как только потянутся. Боюсь напортить чего-нибудь. Если на начальном этапе это не пугало, то сейчас уже столько работы проделано... Плюс вечный аутотренинг - пиши тексты, Лера, ты не программист и даже рядом не стояла))). На заметку беру - спасибо, Вика!

      Удалить
  6. Валерия, пиши статьи. Нужно будет всегда это можно сделать.

    ОтветитьУдалить
  7. Классная штуковина!
    Привет, Вика. С наступающим :)

    ОтветитьУдалить
    Ответы
    1. Привет, Наталья. Спасибо. И тебя с Наступающим, всяческих благ тебе.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML