Как в Теме Contempo увеличить картинки и сделать их кликабельными

Как в Теме Contempo увеличить картинки и сделать их кликабельными

Один из пользователей спросил меня: Можно ли сделать так, чтобы в Теме Contempo картинки в постах на главной странице так же, как и заголовки открывали сообщения?

Да, это вполне реально. И сейчас я покажу вам, как это сделать.

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

Как сделать кликабельные изображения в шаблоне Contempo

  1. Откройте раздел Тема - Изменить HTML
  2. Найдите строку: <div class='snippet-thumbnail'> встречается 4 раза, нам нужно заменить четвертую по счету следующей строкой - <a class='snippet-thumbnail' expr:href='data:post.url'>
  3. После замены вы заметите, что чуть ниже тег </div> подсветился красным цветом, вместо него пропишите </a>
  4. Сохраните тему.

Переходим к просмотру видео


Как в теме Contempo увеличить картинки на главной странице

Согласитесь, что размер картинок в теме Контэмпо оставляет желать лучшего. Если вы хотите существенно увеличить их размер, тогда используйте подсказки на видео ниже и следующий код:

<style>
.post-body .snippet-thumbnail {
    width: 50%!important;
    height: 250px!important;
    object-fit: cover;
    max-width:none!important;
    max-height:none!important;
}
.post-body .snippet-thumbnail img {
    width: 100%!important;
    height:250px!important;
    object-fit: cover;
    background: #fafafa;
    border: 0;
    margin-bottom: 2.0px;
    opacity: 1;
    transition: all .6s ease;
    webkit-transition: box-shadow 0.3s ease 0s;
    -o-transition: box-shadow 0.3s ease 0s;
    transition: box-shadow 0.3s ease 0s;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    max-width:none!important;
    max-height:none!important;
}
</style>   

Переходим к просмотру видео:



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем