0

I have been trying to make my Wordpress Gallery responsive with the help from another post: Making WordPress Gallery (.gallery-item) Responsive?

I would also like the original 5-column gallery to display three columns on a tablet. I have used the following css:

/* For displaying 3 columns on tablet */

@media only screen and (max-width: 800px) {
.gallery-columns-5 .gallery-item {
       width: 33% !important;
 }
}

This works and is now displaying three columns. But it leaves a blank space after every 5th picture. As suggested in the other post i tried

.gallery-columns-5 .gallery-item:nth-child(5n+1) {
 clear: none;
}

But this does not seem to work. Does anyone know how to get rid of the blank spaces and still display the page correctly on both tablets and desktops?

The URL for the page is: http://www.xn--l-guiden-44a.dk/billede-test

0

You need add some CSS to make it auto clear left after each 3th item and need to hide <br> tag

Update your code like this-

/* For displaying 3 columns on tablet */
@media only screen and (max-width: 800px) {
    .gallery-columns-5 .gallery-item {
        width: 33% !important;
    }
    .gallery-columns-5 br {
        display: none;
    }
    .gallery-columns-5 .gallery-item:nth-of-type(3n+1) {
        clear: left;
    }
}
0

Wordpress native galleries are not responsive as we need. This is Jquery solution to quickly overide the wp galleries markup from the frontend. No php involved, which makes it very simple and fast for a front end developer to achieve.

To fix this issue I have replaced the markup of the native wordpress gallery for a ul with li items that inside contain 2 span elements: one with the image, and the other with the caption.

This code sets you free from Wordpress native gallery CSS , by renaming classes and replacing elements. You will have to add custom CSS to specify how many elements you would like to display per row, also make custom breaking points with media queries will be necessary.

Hope this code helps people to overcome the issue of the lack of a Wordpress responsive gallery.

// replace dl with li

jQuery(jQuery('.gallery').find('dl').get().reverse()).each(function(){
  jQuery(this).replaceWith(jQuery('<li>'+jQuery(this).html()+'</li>'))
})

// replace dd with spans

jQuery(jQuery('.gallery').find('dd').get().reverse()).each(function(){
  jQuery(this).replaceWith(jQuery('<span class="image_container">'+jQuery(this).html()+'</span>'))
})

// replace dt with spans

jQuery(jQuery('.gallery').find('dt').get().reverse()).each(function(){
  jQuery(this).replaceWith(jQuery('<span class="caption_container">'+jQuery(this).html()+'</span>'))
})

// replace wordpress gallery container div with ul

jQuery(jQuery('.services_image_block').find('div.gallery').get().reverse()).each(function(){
  jQuery(this).replaceWith(jQuery('<ul class="wp_gallery_responsive">'+jQuery(this).html()+'</ul>'))
})

// remove break of line

jQuery(function() {
        jQuery( ".wp_gallery_responsive br" ).remove();

});
  • This code can be added in the page template of single page to avoid changing all the galleries across the CMS.

  • Another option is to add in the footer , then it will override all the wp gallery markup.

Hope this helps!

  • this is possible and obviously works for you, but you can filter the gallery generated html code on the server side and replace the elements to whatever you need. The bonus is that everything is responsive right after the page load and there is no need to wait for jquery to finish loading (and responsiveness works for people without JS) – Mark Kaplun Mar 16 '16 at 15:04
  • you are right. my approach is a jquery one. I have to agree that a php filter is more robust. I found this solution quite fast and easy to configure without php knowledge, could you share a link to the filter approach? thanks mark., – agus Mar 16 '16 at 15:17
  • nothing that I have right now, but codex.wordpress.org/Plugin_API/Filter_Reference/post_gallery seems like the right hook to look at, should let you just override the whole structure but it is a little sucky as you will probably need to copy the implementation of the gallery short code to be consistant with how the parameters are used in generating the urls of the images – Mark Kaplun Mar 16 '16 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.