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?
Thank you for the Code Snippets tip.
Now when I change themes I don’t have to worry about fussing with the old and new functions.php files.
You’re welcome, Marcus. I thought it was an interesting plugin too.
Now that I’ve had some more time to use Code Snippets I REALLY like it!
No more downloading the child theme’s functions.php, updating it and then ftp’ng it back up to the site.
I will also be able to easily maintain a ‘library’ of code snippets now. A super thanks again!
Thank you. Is there a way to make the gallery photos rectangular as opposed to square?
Yes, there is, Libby, if you mean the 150px x 150px thumbnails.
From your WordPress dashboard, click on Settings and then on Media. You’ll see the second image at the top of this post. Then you uncheck the box “Crop thumbnail to exact dimensions”. Then you will probably have to install the plugin Regenerate Thumbnails and run it, as mentioned, to resize your thumbnails. Most of the time the larger images will be rectangles and will show at their normal proportions.
Great, thank you! I am very new to WordPress and have one more question if you wouldn’t mind answering (as clearly you know what you are doing). The slider on the home page takes images uploaded at 1400×460 so I have loaded those at that file size. What size should I upload the images that I want to display in my gallery? I would like these images to display at a larger size in the slideshow. Can I upload them at 1400×460 (72 ppi obviously) or is that too large? Thank you so much for your time.
You can upload your images at any size you choose. Then WordPress creates additional sizes, as shown in the second image in this post (Settings>Media).
So if you have some images uploaded at the 1400x460px size, just create a new post and add a new gallery with those images. Then you will be able to see how they look in the gallery (you can look at it in draft mode or publish it as private just to look).
The thumbnail size will be 150×150 square, unless you uncheck the crop thumbnail box. And then the gallery images should be proportional, so for your example, they should be 150x50px. If you use the tutorial to use the medium (300px) size images in your gallery, then for your case the images would also be proportional at 300x98px.
Thank you so much. I have figured it out now!
Very helpful, Marcy, thank you! Keep up the good work.
Thank you, Andrej.
Really helpful stuff Marcy. Very clear and detailed. Exactly what I was looking for.
Thanks very much,
Ross
You’re welcome, Ross. I’m glad this helped you.
Thank you so much Marcy. You make it so simple!
You’re welcome, Wendy. I’m glad it worked for you!
Hi Marcy, very well written and very clear. I have spent an hour looking for suggestions and confusing plugins on Gallery Image sizes. You made it simple. Thank you.
You’re welcome, Captain Pat. Glad to help.
This is exactly what I was looking for. Thank you so much.
You’re welcome, Ryan. Glad it was useful!
Thanks for this great information, I can now manipulate my images and come out with the best results desired. Thanks you once more! Just have one question how can i make images on posts have a thin border around them or round border?
You’re welcome, Peter. You can read more about borders on images in this post – http://amethystwebsitedesign.com/remove-border-on-wordpress-gallery-images/
It discusses removing the borders automatically added by WordPress, but you can look at the CSS shown there to see if you can add it to your theme. You may need to use !important, as shown in some of the code sections.
Hi,
Thanks very much for these tutorials! I’ve been using wordpress only for a couple of months now, to build a website for a small charity, and so far I’ve been able to manage how to figure out each thing that I need to do thanks, mainly, to people like yourself, who’ve taken the time and trouble to post these.
Much appreciated and best wishes!
You’re welcome, Kartik. I’m glad the tutorial helped you!
Hello Marcy and All,
Thank you so much for the good info!
I have tried methods #1 and #3 and neither has worked for me. :(
I have followed the instructions closely for both steps several times to no avail. Perhaps I could try step #2 (?) … I just want my gallery pictures to be bigger for when people look at them on the internet …
Thanks!
L Williamson
Your gallery is currently using “thumbnail” and 3 across which is the default. I think if you carefully follow #1, to add “medium” to your gallery shortcode, you will be able to see the medium images. You may need to install the Regenerate Thumbnails plugin and run it, to make sure you actually have images the medium size, if you changed your theme at some point.
Thanks for the response. No dice. :( … I have tried #1 probably 15 times at this point. It makes some of the images a good “medium” size, but it’s irregular – some of them are then small still, and some of them are large … it looks very strange (I took a screenshot if you want to see it)
And this was after running the “Regenerate Thumbnails” program. When it regenerated thumbnails, it “failed” on 8 of the thumbnails – I’m not sure if this is related to my problem …
Perhaps I will give #2 a try, and hope that it works for me …
Thanks for your help!
The images that are too small may be because that’s as large as they actually are. You can look at the size in your WordPress Media Library. The large images may not have been resized. Try to find them in the Media Library, hover over the File (name), and then click Regenerate Thumbnails link. I can’t see any galleries on your site right now. The images in your “What We Do” page are all medium, and sized correctly. The maximum dimension (whether width or height) is 300px.
Hi Marcy,
Thanks for your speedy reply!
I tried method #2 for the first time, with the same results.
The gallery is in the “pictures” tab, here: http://www.goodhelpnow.com/?page_id=299
I have left it with the wonky sizes so you can see what’s happened (some large, some medium, some small). This resulted from method #2 but also from method #1 as well.
Most of the ones that remain “small” are actually quite large pictures, when I check the dimensions in the media library (eg 4000 x 3000).
I also ran regen thumbnails again, to no avail …
Any clues? … Sooner or later I really need/want to find a gallery option that works!
Also – it seems that on the gallery now, that the viewer is not able to click on the picture and see a larger version. This used to be possible. Any ideas why this functionality is gone?
Thanks so much for all your help!
L
I’m sorry, L. I don’t know what’s wrong with your images. I hope you get it sorted soon!
Thank you so much for this post! I had had given up on solving this issue on my site months ago after trying everything I could find. And this morning after reading this, I fixed it in 15 minutes. Thank you!!
You’re welcome, Cotton. I’m glad it worked for you!
Thanks! Marcy Diaz ; )
Thank you so much for this post! You made my day!
That’s always so nice to hear, Doris! :)
This shortcode filter snippet helped me in my project.
Thanks!!
That’s great, Adnan.
Thanks a lot! Very helpful, corrected my issues with WordPress.
You’re welcome, James!
TNX for your work but with photolux theme it does not wirk withy child theme.
any ideas for photolux theme?
Thanks for your comment, Torsten.
A lot of photography themes have the image sizes built in to provide a uniform display. If you want to change image sizes for these themes, there is often an Admin panel of some sort that allows you to change the display image sizes. If there is not, it may be best to contact the theme developer to help you change image sizes.
All the best!
Hi there, I am curious… if I wanted to change the output to not be thumbnails but a button that starts my gallery, how would this vary? like a “click here to start the gallery” does this make sense? If I have a gallery of 25+ images, I would rather the button be there and not the 25 thumbnails…
Any thoughts?
Hi, Marie. Thanks for your thoughts!
You might want to look at using a gallery or album plugin to easily add a button or icon.
Hi,
I’m starting the process of moving my old website to WordPress. I have a lot of images and have set up my first draft page using the built in WordPress gallery feature to insert some images. But WordPress is cropping the thumbnail images, and not to the standard small thumbnail ratio, which I believe is 150 by 150. It’s partially cropping the images. So for instance, I have an original image size of 400 by 598, but in the gallery thumbnail, it is cropping out the top and bottom of the image by perhaps 50 pixels. Could you tell me how I persuade WordPress to show the thumbnail uncropped? The image is preserved full size, since if you click to view the larger image, it’s all there.
Many thanks,
John
Every theme is a bit different, but you can try these tips.
1. Look at Settings > Media to make sure your thumbnail image size is what you expect.
2. The theme can also add additional image sizes. You can see these image sizes if you use this plugin – https://wordpress.org/plugins/simple-image-sizes/.
Read more here: http://amethystwebsitedesign.com/add-additional-image-sizes-to-your-post-content-editor/
3. The images are only sized when they are uploaded either in the Media > Library or inside a post or page.
4. If you changed themes after uploading images use this plugin – https://wordpress.org/plugins/regenerate-thumbnails/ – to fix the image sizes with the theme.
5. You can read about selecting the crop area for each image here: http://amethystwebsitedesign.com/crop-thumbnails-or-featured-images-in-wordpress/
All the best!