Some users don’t notice this, but by default WordPress displays inline style for gallery shortcode. If you look at the source of a post that contains [ gallery ]
shortcode, you’ll see something similar to:
The <style>
tag should not be there. It will break your HTML validation (if you care). Another reason you should get rid of that is it adds some additional CSS rule such as image border
and margin-top
which you might don’t like.
To remove that inline <style>
tag, just add the following line in your functions.php
file:
add_filter( 'use_default_gallery_style', '__return_false' );
The function __return_false
is a small built-in function that simply returns false. It will stop WordPress from using default gallery style.
Then you should add your own gallery style in your stylesheet. Here’s my style that you can get and change:
.entry-content img { max-width: 98%; padding: 1%; border: 1px solid #ccc; } .gallery { clear: both; overflow: hidden; margin: 0 auto; } .gallery .gallery-item { overflow: hidden; float: left; margin: 10px 0 0; text-align: center; list-style: none; } .gallery-caption { font-size: 11px; } /* Image sizes depending on the number of columns Based on Hybrid theme */ .gallery-columns-0 .gallery-item { width: 100%; } .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33.33%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16.66%; } .gallery-columns-7 .gallery-item { width: 14.28%; } .gallery-columns-8 .gallery-item { width: 12.5%; } .gallery-columns-9 .gallery-item { width: 11.11%; } .gallery-columns-10 .gallery-item { width: 10%; } .gallery-columns-11 .gallery-item { width: 9.09%; } .gallery-columns-12 .gallery-item { width: 8.33%; } .gallery-columns-13 .gallery-item { width: 7.69%; } .gallery-columns-14 .gallery-item { width: 7.14%; } .gallery-columns-15 .gallery-item { width: 6.66%; } .gallery-columns-16 .gallery-item { width: 6.25%; } .gallery-columns-17 .gallery-item { width: 5.88%; } .gallery-columns-18 .gallery-item { width: 5.55%; } .gallery-columns-19 .gallery-item { width: 5.26%; } .gallery-columns-20 .gallery-item { width: 5%; } .gallery-columns-21 .gallery-item { width: 4.76%; } .gallery-columns-22 .gallery-item { width: 4.54%; } .gallery-columns-23 .gallery-item { width: 4.34%; } .gallery-columns-24 .gallery-item { width: 4.16%; } .gallery-columns-25 .gallery-item { width: 4%; } .gallery-columns-26 .gallery-item { width: 3.84%; } .gallery-columns-27 .gallery-item { width: 3.7%; } .gallery-columns-28 .gallery-item { width: 3.57%; } .gallery-columns-29 .gallery-item { width: 3.44%; } .gallery-columns-30 .gallery-item { width: 3.33%; }
I just need to find a way to get the rid of the inserted clear:both line breaks that works now.
Hi,
When I add the filter I get this error:
Fatal error: Call to undefined function add_filter() in /homepages/……./wp-includes/functions.php on line 4393
Hi Alexandre,
Do you put the line add_filter… in
functions.php
file? If so, that’s very weird. You can try this insteadThank you! I´ve implemented this solution for a project i´m working on. I was using a plugin before to fix this, i´m happy i can get rid of it now!
Thank you
Вы эту статью гуглом переводили что ли.
Después de buscar, la forma más sencilla que conseguí es añadir esta línea de código al archivo o plugin de funciones
add_filter( 'use_default_gallery_style', '__return_false' );
Saludos
Thank you!
Love that you supplied a basic css to, saved me some time:)
Thanks alot!
Amazing! Thanks a lot