How to Enlarge an Image in WordPress (Lightboxes!)

Whether you’re writing about technical topics or something even more visually demanding like art, sometimes you just want to make a picture bigger in WordPress. That can mean a number of things, from how it appears on the page to what happens when you click it. We’ll shortly cover the first case, and then spend most of our time introducing using a “lightbox” from the Simple Lightbox plugin to make our images appear over our content in a large size when clicked.

Quick Summary of Other Ways of Enlarging an Image

In WordPress, images are “auto-cropped” when uploaded. By that, I mean that when you upload a picture to WordPress that’s say, 2000 pixels by 1500 pixels, WordPress will also create several smaller “thumbnails.” Typical sizes for these are 150×150, 300×300, and 1024×1024. But different WordPress sites may have customized that configuration (at “Settings > Media” in the WordPress admin area). Other plugin and themes may also mean your WordPress site can have (a lot) more sizes beyond that as well.

Anyway, if you’re just looking at post and wishing that it had a bigger picture in it, you may find it as easy to “up-size” that image as selecting a different one of those sizes. That’s the first quick-tip for making an image bigger in WordPress”

  • Change the image size you embed in a post. When you add an image to a post in WordPress, you’ll select a size. If you’re wanting the image to look big, give it its own line (like I did with the one below) and pick the “Large” or “Full Size” “Image size” for the image.

  • Upload bigger images. If you can’t select a larger-enough image, let’s make sure we have a big file in WordPress. If you’re trying to show visitors a bigger image in WordPress than WordPress, you’ll fail. You must upload a bigger image to WordPress if the “Full Size” version isn’t big enough. “Full Size” is the WordPress label for the image size you uploaded, so some people who crop images before uploading their content to WordPress may find that to be the problem. Of you upload a little 300px by 300px image to WordPress, there’s no magic (yet devised) that will let you visitor see that big enough that it looks crisp on their large desktop monitor.

Video of Making an Image Bigger when Clicked

I cover the above tips a little in the video, as well as show off a great little “lightbox” plugin. But if you’re not in a video mood, feel free to just keep scroll to the text explaining how to show off bigger images with a WordPress lightbox plugin.

How to Use a Lightbox Plugin for Bigger WordPress Images

1. In the post, make sure to “link” to the full-size image.

I’m using the “Gutenberg” or “Block” editor of WordPress. People who have the “Classic” or “TinyMCE” editor will have a different interface. If you’re confused and your WordPress website was built in the last year, you’re probably on the block editor.

Enough preamble, here’s how you’ll make a visitor to your site able to click an image in a post to see it in a bigger size.

To link the media file, you’ll want to click on the image so that the floating “button pane” appears above the image. (You can see an example at right.) Inside of that floating pane, you’ll want to click the “link” button, which looks a bit like a few “chain links” (it’s gotten more impressionistic in more recent iterations of the block editor). It’s the blue one in the image at right. Next, they’ve made what we want—link directly to the “media file”—easy, so just select “Media File”, as the first value from the “dropdown.”

(We don’t run the lightbox plugin here on WPShout, so the image on right when clicked will take your web browser to a new “page” that is just the media file. This is what results if you stop here. If you *like* that interface, no need to go on 😊)

2. Install the “Simple Lightbox” plugin

Most likely you’re wanting to enlarge a picture in WordPress when a visitor click it, but you want them to stay on the current page. To do that, we’ll want to enable what is called a “light box” for our images. This is a common term, and thankfully lots of WordPress plugin will do it for us.

To get it working you’ll just want to search and install for the “Simple Lightbox” plugin. If you’re not familiar, here’s quick summary of the clicks:

  1. In the WordPress admin interface, go to “Plugins > Add New.
  2. In the top right, type “simple lightbox” in the search box.
  3. The plugin I used should be in the top-left of your results. It’s the plugin simple called “Simple Lightbox” by “Archetyped.” When you find the correct plugin, click the “Install” button.
  4. Once the plugin is installed, you can activated the plugin by click where the Install button was, on the new “Activate” button.

By default, Simple Lightbox makes all linked media files (as we’ve done in step 1, above) open as a lightbox. This lightbox is an “in-page popup.” It’s a great way to really show off any pictures your proud of—phone pictures, high-quality art scans, screenshots—anything that you want to be bigger for your curious visitors.

Best of luck, and don’t be shy about asking questions in the comments 🙂


2 Responses

Comments

Add a Comment

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