Gallery Style of Image in WordPress with Custom Link in Each
Gallery image in WordPress is an exclusive specialty in WordPress Media Library. By Media Library, we can easily upload, store, edit, delete, crop, scale and resize any image and insert in WordPress post without any hassle. We can also do the same tasks with Audio and Video media also.
However, users can upload as many images as they wish. But in a post, they can insert, at a time, one image or more than one images in a group. But a group of image does not necessarily mean an Image Gallery.
If you select a group of image for a post to insert into, they will be displayed as uncontrolled, randomized format without conforming to rules of grid, column and size and thus may look disordered and aimless irrespective of screen size and device variety.
Image Gallery is a hopeful solution to that problem. By using Image Gallery feature, you can embed a group of image in your post with simply control over number of column, image size etc.
Gallery Image in WrodPress: What can and cannot do
You can do more with Image Gallery feature than simply inserting multiple image beyond gallery style. Such as, you can—
- Fix how many column you want to display your images in.
- Define image size- Thumbnail, medium, large and full size.
- Link image to- Attachment page, Media file.
- Fix image order- whether your image will display in Fixed order or Random order.
Human being knew no compromise ever in the question of technology. So WordPress community discovered that Image gallery lacks many features; in other word, they can make much more things do by Image Gallery.
Here are the things Image Gallery in WordPress cannot do with its provided features—
- doesn’t provide Gallery Template to arrange images
- cannot link individual image to separate destination
- Gallery image in WordPress is not responsive
- cannot rotate image or position horizontally or vertically
- facilitates with no image effects
- No drag and drop facility
- has no feature to manage or organize images
- lacks feature to create post-independent Gallery
- impossible to create Album
and much more
But there are probabilities to add all of these and many other features with Gallery image in WordPress just by the help of a plugin.
Plugin connection for Gallery Image in WordPress
Plugins always came forward with dazzling solutions in the history of WordPress development. Reasonably, out of this dissatisfaction with Gallery image, emerged a number of plugins that can perform all of these and many other functions smoothly, perfectly and easily. Some of popular ones are—
- Responsive Grid Gallery Custom Links
- FooGallery
- Envira Gallery
- Modula
- WP Photo Album Plus
- Responsive Image Gallery
- NextGen Gallery
However, our current presentation is going to focus on the first plugin Responsive Grid Gallery Custom Links by which you can easily add custom link in each image of a Gallery individually locating to the separate destinations.
Before that let’s us have a closer look at how to create and insert Gallery Image in WordPress without Plugins.
Creating Image Gallery without plugins
By Media Library, we can excellently build Image Gallery and insert in our post with customization option for column number, image size and others.
For that you need to do the followings—
- you have to enter Media Library from Post Editor. So, open your desired post with Post Editor. Place the Cursor where you want to insert Gallery Image. Now click Add Media on upper left.
- From the left Menu list click Create Gallery. Create Gallery screen appears.
- Here select clicking the images one by one that you want to include in the Gallery.
- Now click Create a new gallery button on bottom right.
- Here is your Edit Gallery screen that is showing all the images you selected for the current gallery.
- From the right panel, click Column drop-down and select how many columns you want your images to display in.
- Select image size- Thumbnail, Medium, Large or Full size as you wish. Also tick out Random order if you want to display your images at random or leave it blank if you like them to show as you ordered in the middle panel. Noted you can rearrange the images as you wish by drag and drop method.
- From here you can customize each image settings from the right panel as you can do in case of individual image insertion such as Title, Caption, Alt text, Description etc. Notice that you cannot change image URL but only can select default option Attachment page or Media file. This means you cannot link each image to separate pages without the help of plugin.
- If all are properly set up, click Insert Gallery on bottom right. Your Gallery are inserted in the post. Click Update to update the post.
If you need further edit of the gallery, click anywhere of the gallery and click edit button above and you’ll be directed to Edit Gallery page.
Creating Image Gallery with Responsive Grid Gallery Custom Links plugin
If you need to add custom URL Separately with each image, Responsive Grid Gallery Custom Links plugin can do it thoroughly for you. This is a free plugin with more advanced features in pro. This plugin is very simple to use and can also do many other things than just add custom links.
Let’s look at a glance what are the main functions Responsive Grid Gallery plugin can do—
- Adding custom link with each image
- Adding caption with each image
- Responsive layout
- Post-independent Gallery creation
- Inserting Gallery into any post by using Shortcode
- Custom styles to create exclusive look and feel that can match any theme
Contextually, you’ll be learning to use other functions also if you follow our next steps of adding custom links in each image with Responsive Grid Gallery plugin.
Install the Plugin from Plugin Directory in WordPress.org.
If you are beginner in WordPress world and are not sure of how to install plugin, check out this guide—
After installation, you’ll get a Menu link left in your WordPress Dashboard. The Menu Responsive Grid Gallery includes four sub-menus: Gallery Items, Add New, Gallery Templates and Help.
Now let’s have a glimpse of how the total system of Responsive Grid Gallery functions—
- First click Gallery Template→ Add new. Here you can create as many Gallery as you wish with separate customization option of each with respective shortcode. Created Galleries will be listed in this page with further scope to edit, remove and duplicate.
- Next click Gallery Items→ Add new. Here you can add as many images as you wish from WordPress Media Library. Each image has separate customization options and will be listed in this page with further scope to edit, remove and duplicate.
- In the Gallery Items page, click edit option of your chosen image. In the image Edit page, you’ll get option to select which gallery you wish to include the image in. This way you can add multiple images in a gallery. You can also make gallery selection just when you add image.
- Now go to Gallery Template page and click edit option of your chosen Gallery. From Gallery Edit page, you can collect Gallery Shortcode.
- Insert this shortcode into relevant place of your post where you want your gallery be displayed.
Now in detail.
To add a practical approach to our presentation, we’ll walk you through a Gallery Project. Our Project name is “Eye-soothing flowers” which will create a charming gallery with variety of flowers.
Go to WordPress Admin Dashboard→ Responsive Grid Gallery→ Gallery Template. Here is the list of Gallery Templates I created previously.
Now let’s create our Project Gallery. From here, click Add New. Following window appears to create new Gallery.
Here are a number of options to define. On left, under Layout Menu we find—
- Gallery name: We write Project name “EYE SOOTHING FLOWERS” in name field.
- Number of column: Suppose, we’ll use six items in 3 columns. So select 3.
- Item container: This is the option to define left-right and bottom margin. We leave it blank.
- Image style: Image style needs CSS. This field is to input css class name. Leave it blank.
- Text container: This field is to define Text container width. Leave as it is.
- Gallery container: For defining Gallery container position. We leave it default.
On completion of defining Layout, click Item Order from left panel. Here you can rearrange the images by drag-and-drop the way as you wish (see bottom-right of screenshot 2).
All are done, click Publish in the right panel.
Now our Gallery is already created. You will see it listed in Gallery Template page (screenshot 1).
Now Go to WordPress Admin Dashboard→ Responsive Grid Gallery→ Gallery Items. Here is the list of Gallery Items or images I added earlier.
All the 6 images that we planned to add in our gallery are already added (screenshot 3). Now let us see how to add an image as a Gallery Item.
Click Add New. Following window appears to add image.
Here we find the following definable options—
- Image or Item name: First name the image. As we’re adding different flowers. We name the first flower as FLOWER 1 in the name input field.
- Select Image: Click Select Image and you’ll be directed to WordPress Media Library. From there, click your desired image to select and click Choose Image on Right-bottom. Image will be added and the URL of the image will be shown in Image URL field.
- Alt Tag: Alt Tag is something that will be displayed if image gets delayed to load. Fix alt tag as you wish.
- Image Link: This is the individual link of the image. Input a destination URL here where visitors can reach by clicking the image.
- Link Attribute: Input if you will.
Now look at below the right panel. Here is the option to define Gallery Template. This means select the template form the dropdown whcih gallery you want to include this image in.
Now click Publish and you’re done.
In this way you can add as many image as you like and include them in your desired Gallery.
We’ve already completed adding image and Gallery selection. To insert the Gallery (EYE-SOOTHING FLOWERS) into any post, we need to collect the shortcode of this gallery and input it in the desired position of the post.
So go to Gallery Template page. Click Edit button of EYE-SOOTHING FLOWERS gallery. In the Gallery Edit page, click Shortcode from left panel. Copy the code.
Now go to the text editor of the post where you want to set the gallery. Position the cursor and paste the shortcode.
Now Update the post and check Preview. This is your EYE-SOOTHING FLOWERS gallery as shown below—
That’s all. Hope this article satisfied your query on Gallery Image in WordPress with Custom Link with each. For the same purpose, do you use any other plugin or tricks. Drop a comment to Share your experience.
