If your website uses WordPress image galleries, you may want to show images at a size larger than thumbnails in the gallery because the default size is rather small. There are several methods to get larger images in your WordPress galleries.
Contents
- All About – All About WordPress Media Settings and Gallery Defaults
- Method 1 – Edit the Gallery Shortcode in Each Gallery Post (edit posts)
- Method 2 – Filter the Gallery Shortcode in Theme Functions or Theme Plugin Using shortcode_atts Filter
- Method 3 – Edit Thumbnail Size in Media Settings (no code method)
If you want the quickest method, and already know about Media Settings and Galleries, go directly to Method 2 below.
Important: You will not see your gallery changes in your WordPress Visual Editor; you will only see your changes when the post is published.
–
All About WordPress Media Settings and Gallery Defaults
WordPress Media Settings Sizes for Your Theme
First let’s look at your theme’s default image sizes. You can see the three WordPress default image sizes, if you go to your dashboard and click Settings and then Media. The default image sizes are usually:
- Thumbnail – 150px X 150px
- Medium – 300px X 300px
- Large – 1024px X 1024px
Your theme will sometimes set additional image sizes in the functions.php file. For instance, the Twenty Twelve theme adds a post thumbnail size of 624px X 9999px (unlimited height), and Twenty Thirteen adds an image size of 604px X 270px.
WordPress Gallery Defaults
WordPress Galleries usually default to using the thumbnail size of 150px X 150px and 3 columns across. You can easily change the number of columns when you add your gallery to your post, but the gallery image size is only the 150px X 150px thumbnail size by default.
How to Create a WordPress Gallery Using Medium Images (300px X 300px)
The medium image size of 300px X 300px is a good size to use for a two column gallery in many themes. The images are large enough to be able to see them well, but not so large that they make the page loading very slow. So that’s what we’re going to use for our galleries.
–
Method 1 – Edit the Gallery Shortcode in Each Gallery Post
- For this method, you can leave the Media Settings at the three default sizes of 150px, 300px, and 1024px.
- Go to your Edit Post screen on the Visual tab. You will see the gallery images.
- Click on the Text editor tab.
- You will see a line of code in brackets – [ … ]. We’re going to edit that gallery shortcode.
How To Edit the Gallery Shortcode
The gallery shortcode looks like below. Note that even though it doesn’t say it’s using the thumbnail image and 3 columns, that’s what it’s using.
We can add the medium image size (300px) and change to 2 columns just by editing this code.
Update your post, view the post, and you should see your new gallery with two columns and medium images.
But if you have a lot of galleries that you want to edit to show larger images; it will take time. If you change your mind, you will also need to edit them back to the defaults.
–
Method 2 – Filter the Gallery Shortcode in Theme Functions or Theme Plugin
This method involves adding code to your child theme functions.php, a site specific plugin, or use a plugin like Code Snippets, which is really easy to use, and makes adding new code simple.
The default gallery shortcode attributes are defined in the Core WordPress file /wp-includes/media.php beginning on line 727. (Do NOT edit Core files!) we’re going to use the shortcode_atts_{shortcode} filter, specifically shortcode_atts_gallery.
Don’t worry if this sounds incomprehensible; I’ll go through the code.
Open your functions.php or your site plugin file in a text editor, and paste the code at the bottom. If using Code Snippets, paste the code in the section marked Code.
<?php /* Only add the code below to your functions or plugin.*/
//Adds gallery shortcode defaults of size="medium" and columns="2"
function amethyst_gallery_atts( $out, $pairs, $atts ) {
$atts = shortcode_atts( array(
'columns' => '2',
'size' => 'medium',
), $atts );
$out['columns'] = $atts['columns'];
$out['size'] = $atts['size'];
return $out;
}
add_filter( 'shortcode_atts_gallery', 'amethyst_gallery_atts', 10, 3 );You can also view and copy this code from the GitHub Gist –
Remember that the defaults for the WordPress gallery are columns=”3″ and size=”thumbnail”.
So what does this code mean?
This line is a comment.
//Adds gallery defaults of size="medium" and columns="2"The next line of this code begins our function.
function amethyst_gallery_atts( $out, $pairs, $atts ) {The next four lines change the default attributes for the gallery shortcode to be columns=”2″ and size=”medium”.
$atts = shortcode_atts( array(
'columns' => '2',
'size' => 'medium',
), $atts );The next two lines set the function output to our new defaults.
$out['columns'] = $atts['columns'];
$out['size'] = $atts['size'];The next line returns the output.
return $out;The last line uses the shortcode_atts_gallery filter to filter the gallery shortcode.
add_filter( 'shortcode_atts_gallery', 'amethyst_gallery_atts', 10, 3 );There you have it. If you no longer want your galleries to use medium images and two columns, just delete or deactivate this code, and you will be back to the default galleries using image size=”thumbnail” and columns=”3″.
You can also edit the gallery shortcode directly in any post to allow that one post to use different size images or columns.
–
Method 3 – Edit Thumbnail Size in Media Settings
Using this method may seem a bit involved, but it doesn’t use code, and you can easily revert back to the default settings at any time. It does take time though, and time again, if you decide to revert back. You may want to look through your theme to see how images are used in your theme, and decide whether the larger sizes will look well in areas other than the galleries.
- Click on Settings and then on Media
- You can edit the Thumbnail size to be something larger, say 300px X 300px. You can leave the Medium size at the same size or change it to be something larger, like 600px X 600px, depending on your theme. Save.
- If you already have images in your Media Library, you will need to resize them.
- Install the plugin Regenerate Thumbnails.
- Go to Tools and then Regen. Thumbnails.
- Click the Regenerate All Thumbnails button. (Note that this can take a long time, if you have many images, and you must leave that window or tab open in your browser. You can still use your browser in another tab or window.)
- You can also use the Media Library to regenerate only a few thumbnails at a time.
- Check only the images you need to resize.
- Then click the Bulk Actions drop down and choose Regenerate Thumbnails. Click Apply.
- You can also hover over each image, and you will see a link Regenerate Thumbnails to resize images one at a time.
- Now go to your post and insert (or edit) your Gallery. Choose 2 columns, and click Update Gallery or Create Gallery. See how to create a WordPress gallery.
- Note that if you want to return to the 150px X 150px thumbnail size, you can just edit your Settings > Media again. You will need to use the Regenerate Thumbnail plugin on the images you newly uploaded. You may also want to go back and edit your galleries to change back to 3 columns.
Which method to use larger gallery images are you going to use?
Leave a Reply