• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials Images & Galleries, Themes

How to Get Larger Images in a WordPress Gallery

October 29, 2013 Updated on December 13, 2018 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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.
gallery with medium images and 2 columns

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

default media settings
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.
default gallery images

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

gallery-2

  1. For this method, you can leave the Media Settings at the three default sizes of 150px, 300px, and 1024px.
  2. Go to your Edit Post screen on the Visual tab. You will see the gallery images.
  3. Click on the Text editor tab.
  4. 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.
default gallery shortcode
We can add the medium image size (300px) and change to 2 columns just by editing this code.
gallery shortcode edited
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.
image gallery shortcode

–

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.
regenerate thumbnails

    1. Click on Settings and then on Media
    2. 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.
    3. If you already have images in your Media Library, you will need to resize them.
        1. Install the plugin Regenerate Thumbnails.

      regenerate-thumbnails-1

      1. Go to Tools and then Regen. Thumbnails.
      2. 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.)
      3. 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.
    4. 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.

regenerate thumbnails

  1. 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?

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marcus Tibesar says

    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.

    Reply
    • Marcy Diaz says

      You’re welcome, Marcus. I thought it was an interesting plugin too.

      Reply
      • Marcus Tibesar says

        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!

        Reply
  2. Libby Gedney says

    Thank you. Is there a way to make the gallery photos rectangular as opposed to square?

    Reply
    • Marcy Diaz says

      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.

      Reply
      • Libby Gedney says

        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.

        Reply
        • Marcy Diaz says

          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.

          Reply
          • Libby Gedney says

            Thank you so much. I have figured it out now!

  3. Andrej says

    Very helpful, Marcy, thank you! Keep up the good work.

    Reply
    • Marcy Diaz says

      Thank you, Andrej.

      Reply
  4. Ross McVinnie says

    Really helpful stuff Marcy. Very clear and detailed. Exactly what I was looking for.

    Thanks very much,

    Ross

    Reply
    • Marcy Diaz says

      You’re welcome, Ross. I’m glad this helped you.

      Reply
  5. Wendy Miller says

    Thank you so much Marcy. You make it so simple!

    Reply
    • Marcy Diaz says

      You’re welcome, Wendy. I’m glad it worked for you!

      Reply
  6. Capain Pat says

    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.

    Reply
    • Marcy Diaz says

      You’re welcome, Captain Pat. Glad to help.

      Reply
  7. Ryan Rhoades says

    This is exactly what I was looking for. Thank you so much.

    Reply
    • Marcy Diaz says

      You’re welcome, Ryan. Glad it was useful!

      Reply
  8. Peter says

    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?

    Reply
    • Marcy Diaz says

      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.

      Reply
  9. Kartik says

    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!

    Reply
    • Marcy Diaz says

      You’re welcome, Kartik. I’m glad the tutorial helped you!

      Reply
  10. L Williamson says

    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

    Reply
    • Marcy Diaz says

      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.

      Reply
      • L Williamson says

        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!

        Reply
        • Marcy Diaz says

          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.

          Reply
          • L Williamson says

            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

          • Marcy Diaz says

            I’m sorry, L. I don’t know what’s wrong with your images. I hope you get it sorted soon!

  11. Cotton Wright says

    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!!

    Reply
    • Marcy Diaz says

      You’re welcome, Cotton. I’m glad it worked for you!

      Reply
  12. Gabby says

    Thanks! Marcy Diaz ; )

    Reply
  13. Doris says

    Thank you so much for this post! You made my day!

    Reply
    • Marcy Diaz says

      That’s always so nice to hear, Doris! :)

      Reply
  14. Adnan says

    This shortcode filter snippet helped me in my project.

    Thanks!!

    Reply
    • Marcy Diaz says

      That’s great, Adnan.

      Reply
  15. James says

    Thanks a lot! Very helpful, corrected my issues with WordPress.

    Reply
    • Marcy Diaz says

      You’re welcome, James!

      Reply
  16. Torsten says

    TNX for your work but with photolux theme it does not wirk withy child theme.
    any ideas for photolux theme?

    Reply
    • Marcy Diaz says

      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!

      Reply
  17. Marie Denee says

    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?

    Reply
    • Marcy Diaz says

      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.

      Reply
  18. John says

    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

    Reply
    • Marcy Diaz says

      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!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!