Image Gallery

The following image gallery is created with CSS:


<html> <head> <style> {   margin: 5px;   border: 1px solid #ccc;   float: left;   width: 180px; } {   border: 1px solid #777; } img {   width: 100%;   height: auto; } div.desc {   padding: 15px;   text-align: center; } </style> </head> <body> <div class=»gallery»>  <a target=»_blank» href=»img_5terre.jpg»>    <img src=»img_5terre.jpg» alt=»Cinque Terre» width=»600″ height=»400″>  </a>  <div class=»desc»>Add a description of the image here</div> </div><div class=»gallery»>  <a target=»_blank» href=»img_forest.jpg»>    <img src=»img_forest.jpg» alt=»Forest» width=»600″ height=»400″>  </a>  <div class=»desc»>Add a description of the image here</div> </div><div class=»gallery»>  <a target=»_blank» href=»img_lights.jpg»>    <img src=»img_lights.jpg» alt=»Northern Lights» width=»600″ height=»400″>  </a>  <div class=»desc»>Add a description of the image here</div> </div><div class=»gallery»>  <a target=»_blank» href=»img_mountains.jpg»>    <img src=»img_mountains.jpg» alt=»Mountains» width=»600″ height=»400″>  </a>  <div class=»desc»>Add a description of the image here</div> </div> </body> </html>

Функции для работы с шорткодом галереи

Функция get_post_gallery()

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

Функция get_post_galleries()

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

Функция get_post_galleries_images()

Получает все URL картинок галерей из указанного текста записи/поста, если галереи в тексте имеются.

Поиск: CMS • Web-разработка • WordPress • Галерея • Плагин • Шорткод • Shortcode • gallery_shortcode • Gallery • Изображение • Image


Gallery Custom Links allows you to link images from galleries to a specified URL. Tested with WordPress Gallery, Gutenberg, the Meow Gallery and others. The official page is here: Gallery Custom Links.


Two fields are added to your images, in your Media Library: Link URL and Link Target. If, at least, the Link URL is set up, this image will link to that URL every time it is used within a gallery. Lightbox will be automatically disabled for those images.


It currently works with the native WP Gallery, the Gutenberg Gallery, and the Meow Gallery. It should actually work with any gallery plugin using the ‘gallery’ class and Responsive Images (src-set). Let me know if you would like more galleries to be supported, it should be easy.


You can optimize (run the plugin only on the pages where you need it) and support more galleries (through CSS classes) easily by using filters. To know more about this, visit the official page, here: Gallery Custom Links.


The motivation to build this plugin came from my users who had issues trying to use WP Gallery Custom Links. I realized that this plugin was working extremely well with the standard gallery, but would require too much rewriting for Gutenberg and other galleries, hence the creation of this plugin. I hope it will help.


Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений



  • Add: Remove warnings for PHP 7.4.
  • Update: New versions of DiDom and the Simple HTML DOM Parser.
  • Info: If you like the plugin, your reviews are welcome Thank you!


  • Fix: Avoid errors in the admin.
  • Fix: Add another way to resolve the image ID if none found (, let’s see how it goes.


  • Add: CTA Buttons for Meow Gallery, Native Galleries and Gutenberg Galleries.
  • Add: Filter to… filter which images are actually managed by the plugin
  • Fix: Hopefully, the Reusable Blocks aren’t broken anymore in the editor (I couldn’t replicate the bug on this new version).


Add: This was asked to me a lot, so I have adding the settings in order to change the parameters of the plugin easily. It will be much easier to make it faster now.


Update: Using HtmlDomParser fully (which should avoid broken HTML). It is possible to override the plugin hidden options to switch to different mode, but I am trying to find a mode that works for 99% of the users first.


  • Update: Avoid interfering at all with all Ajax/Rest requests.
  • Info: Sorry for the last bunch of updates, some way of modifying HTML works for some, and not for others, and I am still trying to find a solution which works for everyone.


  • Update: Back to OB, maybe there should be an option for that.
  • Update: Get all the images of the page/post content instead of within specific containers previously.


  • Update: Not using OB anymore; going through the content filter (this behavior can be changed internally), better and faster this way.
  • Fix: Avoid issues with static variables which are not registered on older PHP versions.


Add: Filter to let the user enables/disables the plugin depending on conditions. Check the official page to know more about this: Gallery Custom Links.


  • Fix: Support images embedded in a few layer of tags before the link tag.
  • Add: Added a class on the a-tag, for the ones who would like to add some styling to linked images. The Meow Lightbox is already handling this, by avoiding showing a zoom cursor when hovering images.
  • Add: Compatibility with extra galleries is made through a filter (which anybody can use) and the file mgcl_extra.php.
  • Info: If you like the plugin, your reviews are welcome Thank you!


  • Fix: Now works with thumbnails in src.
  • Update: Optimization (does not regenerate pages which aren’t impacted by changes).
  • Update: DiDom from 1.13 to 1.14.1.


Кроме настройки нескольких параметров (например, поля и отступы для миниатюр в карусели Elastislide) нужно задать стили для остальных элементов галереи..

Элемент  “rg-image-wrapper”, который используется в шаблоне jQuery, будет иметь относительное позиционирование и полупрозрачное повторяющееся изображение в качестве фона. Рамка будет иметь скругленные углы и минимально допустимую высоту 20 px:

   padding:20px 30px;
   background:transparent url(../images/black.png) repeat top left;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;

Контейнер, который используется для добавления большого изображения будет иметь относительное позиционирование и высоту строки 0. Добавим для него выравнивание текста по центру мы заставим все строчные элементы выравниваться по центру. Но так как мы не используем для изображения “display:block”, нужно установить высоту строки равной 0. Таким образом, не будет зазора  над изображением, так как оно является строчным элементом по умолчанию:


С помощью задания свойству большого изображения max-width значения 100%, мы добиваемся, чтобы оно всегда оставалось окруженным плавающим контейнером. Мы не нуждаемся в данном свойстве, но если вы хотите ограничить размер области предварительного просмотра, то вам придется устанавливать фиксированную высоту для класса “rg-image” и изображение будет заполнять его при изменении ширины области просмотра.

rg-image img{

Навигационные элементы будут иметь следующие стили:

.rg-image-nav a{
    background:#000 url(../images/nav.png) no-repeat -20% 50%;
    -moz-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;

Это стиль для левой стрелки, теперь посмотрим на свойства для правой стрелки:

rg-image-nav a.rg-image-nav-next{
   background-position:115% 50%;
   -moz-border-radius: 0px 10px 10px 0px;
   -webkit-border-radius: 0px 10px 10px 0px;
   border-radius: 0px 10px 10px 0px;

Так как мы уже определили значение свойства left для элементов в целом, его придется установить в значение auto для правой стрелки.

При наведении курсора мыши стрелки будут становиться более четкими:

.rg-image-nav a:hover{

Подписи будут иметь следующие стили:

.rg-caption {
.rg-caption p{
    font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
    padding:0 15px;

Для переключателя установим следующие стили:

.rg-view a{
    background:#464646 url(../images/views.png) no-repeat top left;
    border:3px solid #464646;
.rg-view a:hover{
.rg-view a.rg-view-full{
    background-position:0px 0px;
.rg-view a.rg-view-selected{
.rg-view a.rg-view-thumbs{
    background-position:0px -16px;

Индикатор загрузки будет появляться в центре изображения:

    background:#000 url(../images/ajax-loader.gif) no-repeat center center;
    margin:-23px 0px 0px -23px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;


http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

I really like this plugin and I use it on almost every website I make for any client. But I had to make a major change regarding the way it works. Well, I didn’t actually change the plugin, but the way the built-in media gallery works.

Regarding SEO and in my personal experience, images have less relevance than text links, and I usually use this plugin to create links to other pages to give them more SEO.

So I had to modify the way the media.php works, to create a new HTML structure, even add an h3 title (in my case below the image) which is also a link to the same page of the image. By the way, I also added the aria-label tag, because I have a very good friend who is blind, and I am more than aware of how difficult it is for them to navigate the Web.

At any case, congratulations and thanks for give us this nice plugin for free!

Luis Moyano

yes, it does

I applied the rules for my gallery and reached out to support with no response.

Does just what I need: make images in a gallery into clickable links. Easy to set up, too.

I needed to add links to images within a gallery and this did the trick. FYI, the gallery is on a page edited using Elementor.

Easy to use and a helpful tool. Thank you.


VueJS single file (ECMAScript 2015)

    <gallery :images="images" :index="index" @close="index = null"></gallery>
      v-for="(image, imageIndex) in images"
      @click="index = imageIndex"
      :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"

  import VueGallery from 'vue-gallery';
  export default {
    data: function () {
      return {
        index: null

    components: {
      'gallery': VueGallery

<style scoped>
  .image {
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #ebebeb;
    margin: 5px;

Browser (ES5)

  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src="vue-gallery.js"></script>
  <link rel="stylesheet" type="text/css" href="">

<div id="app">
  <gallery :images="images" :index="index" @close="index = null"></gallery>
    v-for="image, imageIndex in images"
    @click="index = imageIndex"
    :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: function () {
      return {
        index: null

    components: {
      'gallery': VueGallery


* {
 box-sizing: border-box;

label {
 cursor: pointer;

input {
 display: none;

body {
 background-color: #000;

.lightbox, .grid {
 width: 100%;
 position: fixed;
 top: 0;
 left: 0;

.lightbox {
 z-index: 1;
 min-height: 100%;
 overflow: auto;
 -webkit-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 -webkit-transition: -webkit-transform .5s ease-out;
 transition: transform .5s ease-out;
.lightbox img {
 position: fixed;
 top: 50%;
 left: 50%;
 max-width: 96%;
 max-height: 96%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

input:checked + .lightbox {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);

input:checked ~ .grid {
 opacity: .125;

.grid {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-box-align: start;
 -webkit-align-items: flex-start;
 -ms-flex-align: start;
 align-items: flex-start;
 -webkit-align-content: flex-start;
 -ms-flex-line-pack: start;
 align-content: flex-start;
 z-index: 0;
 height: 100%;
 padding: 16px;
 overflow: auto;
 background-color: #222;
 text-align: center;
 -webkit-transition: opacity .75s;
 transition: opacity .75s;
.grid .grid-item {
 display: inline-block;
 width: 25%;
 padding: 16px;
 opacity: .75;
 -webkit-transition: opacity .5s;
 transition: opacity .5s;
.grid .grid-item:hover {
 opacity: 1;
@media screen and (max-width: 1024px) {
 .grid .grid-item {
 width: 50%;
@media screen and (max-width: 480px) {
 .grid .grid-item {
 width: 100%;
.grid img {
 max-width: 100%;
 max-height: 100%;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

Known Issues

2. Images not oriented correctly.

Fix: Use the callback to read the exif data and «correct» the orientation based of the exif orientation. .

Code excerpt:

<gallery :options="options" :images="images" :index="index" @close="index = null"/>
data() {
  options: {
    onslide: function(index, slide) {
      const rotation = {
        1: 'rotate(0deg)',
        3: 'rotate(180deg)',
        6: 'rotate(90deg)',
        8: 'rotate(270deg)'

    //Conditionally change rotation of image based on the image orientation data. Example jsfiddle --> Or use something like
    //But for this example, the fix has been hardcoded. 
      ).style = `transform: ${rotation'3'};`


Configuration files for gallery-dl use a JSON-based file format.

For a (more or less) complete example with options set to their default values, see gallery-dl.conf. For a configuration file example with more involved settings and options, see gallery-dl-example.conf. A list of all available configuration options and their descriptions can be found in configuration.rst.

gallery-dl searches for configuration files in the following places:

Linux Windows

( usually refers to the user’s home directory, i.e. )

Values in later configuration files will override previous ones.

Command line options will override all related settings in the configuration file(s), e.g. using will enable writing metadata using the default values for all settings, overriding any specific settings in configuration files.

Install with Git

ssh into the your server and clone the UberGallery repository:

git clone --recursive git:// /path/to/ubergallery

Copy to and modify the settings

cp resources/sample.galleryConfig.ini resources/galleryConfig.ininano resources/galleryConfig.ini

Upload images to the folder within your gallery directory.

Make the directory writable by the web server.

chmod 777 /path/to/resources/cache

Open your web browser and load the page where you installed UberGallery.

When using this method to install UberGallery, you can update your installation by running the following commands:

cd /path/to/ubergallerygit pull origin master

NOTE: If you are installing UberGallery via git into an existing git repository, you will need to add it as a submodule.

Финальные штрихи

Мы еще не стилизовали заголовок над галереей. Давайте сделаем это:

h1 {
    font-size: 36px;
    text-transform: uppercase;
    color: #cccccc;
    text-align: center;
    margin: 30px 0;

Чтобы не дописывать свойство к каждому элементу, будет лучше задать его для всего тега , после чего стереть эту строку из стиля для — она там теперь лишняя:

body {
    font-family: 'Open Sans', sans-serif;

А чтобы сам блок галереи не упирался в низ веб-страницы, добавим ему небольшой отступ снизу:

#gallery {
    margin-bottom: 50px;

Обновим страницу и проверим результат. Но что это? Отступ снизу не появился. И если проверить высоту блока , мы увидим, что она равна нулю. Как такое может быть, если этот блок не пустой, а внутри него находятся миниатюры? Ответ следующий: свойство исключает элемент из нормального потока. Поэтому, когда дочерним элементам задано обтекание float, родительский элемент сжимается по высоте, словно игнорируя присутствие float-элементов. Высота родителя становится равной нулю, либо, если внутри находятся дочерние элементы без обтекания, высота родителя приравнивается к высоте этих элементов. Отключить игнорирование float-элементов родителем можно с помощью следующего стиля:

#gallery:after { 
   content: '';
   display: block; 
   height: 0; 
   clear: both;

Это один из нескольких CSS-«хаков», позволяющих решить проблему исчезнувшей высоты контейнера. Немного позже мы еще вернемся к обсуждению этой проблемы и изучим ее более подробно. А пока что сохраните изменения в таблице стилей и обновите веб-страницу. Добавленный нами нижний отступ в 60 пикселей теперь находится там, где и требовалось.

Core Features


lightgallery.js uses CSS-only approach for resizing images and videos. So it will be extremely flexible, and considerably faster than using the JavaScript approach.


lightgallery.js comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is easy to create your own modules, as well as detach modules that you don’t want to use.

Touch and Drag

lightgallery.js supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktops. This allows users to navigate between slides by either swipe or mouse drag.

Super customizable

lightgallery.js comes with a numerous number of options, which allow you to customize the plugin very easily. You can easily customize the look and feel of the gallery by updating SASS

Animated thumbnails

You also have the option to enable animated thumbnails from the settings. otherwise normal thumbnail will be used. You can also make thumbnails automatically load for your YouTube or Vimeo videos.

Youtube vimeo support

lightgallery.js video module allow you to create beautiful youtube/vimeo video galleries. It has lots of features such as automatic play/pause videos, thumbnails, posters and more.

20+ Animations

lightgallery.js uses Hardware-Accelerated CSS3 transitions for faster animation performance. This plugin comes with numerous number of beautiful inbuilt animations.

Dynamic mode

lightgallery.js can be instantaneously launched by programmatically enabling the dynamic option and populating by passing array of objects representing the gallery elements.

Zoom & Fullscreen

You can double-click on the image to see its actual size. Zoom-in and zoom-out controls can be used for changing the zoom values of the image. lightgallery.js supports native html full screen mode as well.

HTML5 videos

lightgallery.js supports all types of HTML5 video formats formats, such as MP4, WebM, Ogg, etc. There is smart integration with custom html5 player videojs

Social sharing

lightgallery.js share plugin allows you to share your images/videos to Twitter, Facebook, Pinterest and Google plus with unique url.

Smart preloading

By default lightgallery.js loads only 3 slides at a time to improve performance. Remaining slides are loaded as you navigate to it. It is customizable in settings.

HTML coding and web content analysis

Information shown in this section is used by optimizers to control a home page verbiage, the amount of links, frames, widgets, text, keyword density. The report contains an analysis of using Flash elements, and allows to control web layout (microformat and Doctype).

IFrame – floating frames located inside the ordinary document. They allow to download any other independent document in the range of set rates.

Flash is a multimedia platform for building web-based applications or multimedia presentations. It is widely used for developing of advertising banners, animation, games, and playing audio and video files on web pages.

Microformat is a method of word sense tagging of information on different subjects (events, companies, people, goods, etc.) with the use of ordinary HTML or XHTML elements.


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

Если по какой-то причине у вас что-то не получилось, вы всегда можете посмотреть и изучить готовый код, который включен в общий архив с файлами. Также вам доступно демо галереи:

Мы надеемся, что данное практическое занятие принесло вам пользу и помогло лучше разобраться в том, как работает CSS. А впереди нас ждет еще один урок — на этот раз направленный на закрепление знаний о фоновых изображениях.

С этим читают