You can open gallery images in a lightbox-like view using image attachment, proper styling, and a function that finds gallery shortcode in a parent post.
If you are looking for ways to replace a gallery plugin, like Jetpack’s Gallery Carousel, with something simpler, here is what you can get by using the idea shared below:
- you’ll open gallery images in a window that looks similar to lightbox,
- you’ll switch between images included in a single gallery,
- you’ll also open single images in the lightbox view,
- you’ll open images in their original size, using the screen space to the fullest – and responsively – what’s especially useful on mobile devices.
The idea
The idea is simple. To display an image in a lightbox view, you will open it as an image attachment – image.php document in your theme’s folder.
The styling for an image attachment will make it look similar to the cool gallery view with a black background, a title of the image, link back to a parent post, and navigation arrows.
WordPress offers a default function that lets switch between images: previous_image_link() and next_image_link(). There is only one problem – they loop through all images attached to a single post, even the ones you don’t want.
Now this is solved. If you open any of the gallery images, you’ll see links to other images – in the same gallery. That’s important because WordPress lets add via shortcodes more than one gallery to a post. With this solution, you’ll open each gallery separately.
If you have two galleries in a post and click on an image from gallery 2, you’ll navigate to other images in gallery 2, but not gallery 1. Also, other solutions got the shortcode for the first gallery in a post. But we want the gallery that a particular image belongs to, just like in a lightbox, right?
Test the images below to see what I mean, and decide whether it’s worth the effort at all. Also, this solution opens a single image in a lightbox view, if you link to its attachment. That’s useful for large images that have to be enlarged.
Implementation
Creating image attachment
First of all, make sure you implement this solution on a test theme, using the plugins like Theme Test Drive. There is some php code and css code to add, so make sure your visitors won’t see the changes until everything is set up.
1. In the theme’s folder create an empty file and name it image.php. This way WordPress will link to this file all images from gallery preview in a post.
2. Paste the code from below to image.php.
<html prefix="og: http://ogp.me/ns#" >
post_parent);
$attachment_id = $post->ID;
$parent_content = get_post($parent)->post_content;
preg_match('/
/', $parent_content, $matches);
$array_ids = explode(",", $matches[1]);
$current_id = array_search($post->ID, $array_ids);
$prev_id = $array_ids[$current_id-1];
$next_id = $array_ids[$current_id+1]; ?>
<a href="" >
<a href="" >
<a href="post_parent); ?>" >×
ID, ‘full’ ); ?>
<div class="pic-full" style="width: px;" >ID, ‘full’ ); ?>
<a rel="nofollow" target="_blank" href="" >Open image: ×
It’s the basic code. You can obviously improve it and add own elements.
3. Now, we have the image attachment ready but we have to style it properly.
Open the main stylesheet document – style.css – in your WordPress theme folder and add the css snippet from below:
#pic-body {
background: rgba(0,0,0,1);
}
::-webkit-scrollbar {
display: none;
}
#pic-navi {
position:fixed;
padding-top:40px;
width:100%;
top:35%;
opacity:0.5;
z-index:100;
}
.pic-left {
float:left;
width:50px;
height:100px;
background: url(images/pic-left.png);
background-position: center no repeat;
opacity:0.7;
}
.pic-right {
float:right;
width:50px;
height:100px;
background: url(images/pic-right.png);
background-position: center no repeat;
opacity:0.7;
}
.pic-left:hover, .pic-right:hover {
opacity:1;
}
#pic-container {
padding-top:40px;
margin: 0 0 7% 0;
width:100%;
overflow:auto;
}
.pic-full {
text-align:center;
width:100% !important;
}
.pic-close-hint {
padding-top:5px;
cursor: default;
letter-spacing:0;
position: fixed;
text-align: left;
width: 100%;
height: 35px;
background-color: rgba(0,0,0,0.8);
}
.pic-close-hint a {
color: #999 !important;
}
.pic-close-hint a:hover {
color: #ddd !important;
}
.pic-close-hint span {
cursor: pointer;
display: block;
height: 22px;
font-family: Helvetica, Arial, sans-serif;
font-weight:100;
font-size:32px;
line-height: 22px;
margin: 0 0 0 0.2em;
text-align: center;
vertical-align: middle;
width: 22px;
}
.pic-description {
float:left;
position:fixed;
bottom:0px;
z-index:10;
width:90%;
padding:2% 5%;
background-color: rgba(0,0,0,0.8);
border-top: 1px solid rgba(255,255,255,0.15);
vertical-align: baseline;
}
.pic-description-title {
float:left;
font-family: Helvetica, Arial, sans-serif;
font-size:22px;
font-weight:100;
color:#999;
display:inline-block;
line-height:1.4em !important;
width:70%;
}
.pic-description-meta {
text-align:right;
float:right;
font-family: Helvetica, Arial, sans-serif;
font-size:12px;
color:#999;
display:inline-block;
width:25%;
}
.pic-description-meta a {
color:#999;
}
.pic-description-meta:before {
color:#ddd;
font-family: 'Fontello';
speak: none;
display: inline-block;
text-decoration: inherit;
text-align: left;
width:1.4em;
content: '27a6';
}
.pic-description-meta a:hover {
color:#cc9977;
}
@media screen and (max-width: 760px) {
.pic-description-title {
font-size:18px;
width:100%;
}
.pic-description-meta {
display:none;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
.pic-left {
background-size:50px !important;
background: url(images/pic-left@2x.png);
}
.pic-right {
background-size:50px !important;
background: url(images/pic-right@2x.png);
}
}
I used images for left/right navigation arrows. If you like them, you can download them from a gallery below.
There are also versions for higher resolution screens. Make sure to rename them to pic-left@2x.png and pic-right@2x.png before downloading to the images folder in your theme.
Styling the gallery on a post
When you remove the lightbox plugin, WordPress will start displaying the gallery in a default view – which I don’t particularly like. Thick grey borders, not fitting into the width of a post – all that made me decide to modify the look.
Again, add the piece of css to your style.css.
.gallery {
float:none !important;
margin:1.5em 0 0.8em 0 !important;
width:102.5% !important;
padding:0 !important;
overflow:hidden;
}
.gallery-columns-2 .gallery-item {
float:left;
margin:0 1.7% 0.75% 0 !important;
overflow:hidden;
width:48% !important;
padding:0 !important;
}
.gallery-columns-3 .gallery-item {
float:left;
margin:0 1.7% 0.75% 0 !important;
overflow:hidden;
width:31.5% !important;
padding:0 !important;
}
.gallery-columns-4 .gallery-item {
float:left;
margin:0 1.7% 0.75% 0 !important;
overflow:hidden;
width:23.2% !important;
padding:0 !important;
}
.gallery-item img {
border-top:1px solid #fff !important;
border-bottom:1px solid #f2e7d7 !important;
border-left:none !important;
border-right:none !important;
}
By default, WordPress sets the gallery with three columns, but I’ve also added the styling for two, and four columns.
There is one thing to remember with two columns. By default WordPress displays thumbnails in a gallery preview. Users usually set thumbnails as square – and that’s good. But if you want to use the two-column gallery, make sure the thumbnail has the width of at least half the width of a post. Otherwise it will show up smaller.
Explanation
I’m not a coder, but I’m particularly proud of finding the way to locate the right gallery in the parent post.
It’s all in how we search the parent post for gallery shortcodes. Here is the regex expression:
/
/
This regex doesn’t find the images from a first gallery (which is a solution you can find on the web). It also doesn’t find all gallery images.
It finds only the image attachments that belong to the same gallery as the attachment that is currently opened (attachment_id in the regex expression).
The first capturing group gets all the ids inside the gallery shortcode. There may be more than one gallery shortcode in the post. Therefore, the preg_match should pick up the gallery that matches the second condition – the id of the currently opened attachment.
Conclusion
For a long time, I was using Jetpack just to have the Gallery Carousel and Tiled Gallery. The plugin didn’t go well with server settings of my provider, so I decided to find a replacement.
The solution is not fancy, you won’t have the cool animation when you click from an image to image. Actually, you can add some animation with css, but for me, it’s the coolness for the sake of being cool.
With this solution are basically clicking from one WordPress page to another. Add Google Analytics code to the body of image.php and you’ll have a chance to track the traffic to particular images.
As I said before, I’m not coder. I’ve worked out this solution by trial and error. If you have some ideas on how to improve the code, please share them in the comments.
Like this:
Like Loading...
Related
<a href="post_parent); ?>" >×ID, ‘full’ ); ?> <div class="pic-full" style="width: px;" >ID, ‘full’ ); ?>
Writer Updated 
3 Replies to “WordPress gallery without plugin and javascript”
Comments are closed.