Responsive Wordpress Gallery

时间：2015-07-25 作者：ChristianUlle

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

2 个回复

最合适的回答,由SO网友:Zak 整理而成

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

像这样更新代码-

/* 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;
    }
}

SO网友:agus

Wordpress原生图库没有我们需要的响应能力。这是Jquery解决方案，可以从前端快速覆盖wp库标记。不涉及php，这使得前端开发人员可以非常简单快速地实现。

为了解决这个问题，我用包含两个span元素的li项替换了ul的本地wordpress gallery的标记：一个包含图像，另一个包含标题。

此代码通过重命名类和替换元素，将您从Wordpress本机库CSS中解放出来。您必须添加自定义CSS来指定每行要显示的元素数量，还需要使用媒体查询来创建自定义断点。

希望这段代码能帮助人们克服缺少Wordpress响应库的问题。

// 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();

});

此代码可以添加到单个页面的页面模板中，以避免更改CMS中的所有库。

另一个选项是添加页脚，然后它将覆盖所有wp gallery标记。

希望这有帮助！

结束

标签： gallery responsive 小码农

Override img class in gallery

我使用Wordpress for AngularJS作为后端（wp json插件），实际上我为主题制作的结构是这样的myApptheme -style.css //nothing special here just inits the theme -index.php -header.php -functions.php lib //here some overrides php --gallery.php app //h

小码农CODE

Responsive Wordpress Gallery

相关推荐

Override img class in gallery