How to Enlarge Images Upon Click in WordPress (3 Easy Methods)

Have you ever ever clicked on a picture on a web site anticipating it to zoom in, solely to understand it doesn’t? It’s a small factor, however it may be surprisingly irritating in your guests.

When folks can click on to enlarge a picture—whether or not it’s a product photograph, a weblog picture, or a part of a portfolio—they have an inclination to remain in your web site longer and have interaction extra.

I’ve arrange this function on a number of WordPress websites, and it’s all the time a fast win.

On this information, I’ll present you three easy methods to permit customers to click on to enlarge photos in your WordPress web site. You don’t want any coding expertise, and every technique solely takes a couple of minutes to arrange.

Why Enlarge Pictures Upon Click on in WordPress?

Letting guests click on to enlarge photos in your WordPress web site helps them see necessary particulars up shut.

It’s a easy improve that provides a cultured, skilled really feel, particularly for portfolios, actual property listings, and images galleries.

Plus, it may be helpful for on-line shops the place prospects need to look carefully at your merchandise earlier than deciding to purchase them.

WordPress features a fundamental “Enlarge on click on” function by default. It opens the picture proper on the web page, with none background dimming or visible impact.

This works fantastic for easy blogs or inside pages, however it seems to be a bit plain and doesn’t supply a lot management.

If you’d like one thing that appears extra fashionable and polished, then a picture lightbox plugin is a better option.

As an alternative of merely increasing the picture, it opens in a smooth overlay that dims the background and retains the viewer targeted. You additionally get extra management over how the picture seems to be and features.

Earlier than I present you these totally different strategies, there’s yet another factor to remember: picture high quality. When somebody clicks to enlarge a photograph, they anticipate a transparent, high-resolution model. However large image files can decelerate your web site.

That’s the place picture optimization is available in. By compressing your photos with out decreasing their seen high quality, you possibly can hold file sizes small and your web site quick.

This implies you should use photos with giant dimensions (like 1500px huge) that look nice when enlarged, with out hurting efficiency.

For assist with that, try our information on how to optimize images for the web.

On this article, I’ll share 3 totally different strategies that may enlarge your WordPress photos once they’re clicked, together with some lightbox choices.

You should utilize the short hyperlinks under to leap to the tactic you need to use:

Technique 1: Utilizing the Default WordPress Function (Easy)

After testing alternative ways to enlarge photos, I’ve discovered that WordPress’s built-in function is ideal for easy wants.

I’ve used this technique when creating documentation or writing technical articles. It’s particularly helpful if you want readers to see small particulars in screenshots or look at particular components of a picture extra carefully.

The primary draw back is that it isn’t a real lightbox. It merely enlarges the picture, and you’ll’t customise the look or add cool results.

Step 1: Add Your Picture within the WordPress Editor

First, you must create or open the submit the place you need to add the clickable picture.

Then, within the block editor, click on the (+) icon so as to add a brand new block and select ‘Picture’ from the block choices. When you do, you’ll see buttons for adding an image in 3 alternative ways: Add, Media Library, or Insert from URL.

At WPBeginner, we all the time use the ‘Media Library’ possibility. This makes positive that the title and alt text we add to the picture can be found if we reuse it in different articles.

I recommend avoiding ‘Insert from URL’. It hotlinks to a picture on one other web site, which suggests the image may break in your web site if the unique is ever eliminated.

Step 2: Set Up the ‘Enlarge on Click on’ Choice

After including your picture to the submit or web page, you possibly can click on on it to disclose the picture settings.

With the picture chosen, click on the ‘Insert hyperlink’ icon within the block toolbar. Within the settings that seem, merely toggle on the choice labeled ‘Enlarge on click on’.

Step 3: Configure Picture Settings

Now that you simply’ve enabled the click-to-enlarge function, it’s possible you’ll need to customise the unique picture’s settings to make sure the very best show high quality inside your submit or web page.

Choose your picture after which examine the block settings panel on the appropriate facet of your display.

You’ll be able to management how the picture seems to be on the web page by adjusting the picture’s dimensions. Nonetheless, that is simply the show measurement.

When a customer clicks the picture, they are going to see the unique, full-resolution picture you uploaded to your Media Library. So, ensure you add a high-quality picture a minimum of 1500 pixels huge.

Step 4: Preview Your Picture and Publish Your Content material

Earlier than you publish your submit or web page with the ‘enlarge on click on’ picture possibility enabled, you’ll need to preview it to verify it’s working.

To do that, click on on the View button within the higher right-hand nook of your editor and choose ‘Preview in new tab.’

I like to recommend you take a look at it in each view possibility, particularly ‘Cellular’, since many individuals use smartphones nowadays.

With the ‘enlarge on click on’ picture impact utilized, it ought to increase on the identical web page, as seen within the instance under. How a lot it expands depends upon the dimensions of the unique picture you uploaded.

Merely click on on the picture to return it to regular measurement.

As soon as the whole lot seems to be good, you’re able to publish or replace your content material.

Technique 2: Utilizing a Lightbox Plugin (Extra Customization)

In contrast to the fundamental WordPress function, a lightbox plugin creates a way more skilled expertise. When a consumer clicks a picture, it opens in a trendy overlay that dims the remainder of the web page, making your picture pop.

I like to recommend the free Simple Lightbox plugin as a result of it allows you to add clean animations, customizable themes, and slideshow options that make your photos stand out. It’s light-weight and works mechanically with all of your photos as soon as activated.

Step 1: Set up and Activate the Easy Lightbox Plugin

To get began, you must set up and activate the Simple Lightbox plugin.

In case you need assistance with this course of, please learn our information on installing WordPress plugins.

Step 2: Configure Easy Lightbox Settings

After activating the plugin, it’s a good suggestion to go to Look » Lightbox and evaluate its settings to make sure the whole lot is about up the way in which you need.

Right here, you’ll discover Lightbox settings that allow you to alter the place you need to allow lightbox performance. This may be on the house web page, single posts, pages, and extra.

I normally keep on with the default settings since they work nice for many web sites.

Subsequent, scroll right down to the ‘UI’ settings. These management how the lightbox seems to be and feels.

By default, the plugin will use a lightweight theme, however you possibly can change to dark mode when you desire. You can too alter the ‘Overlay Opacity,’ which controls how a lot the background web page is dimmed when a picture is open, and allow animations to vary how the picture opens.

Be happy to play with these settings, and don’t overlook to click on ‘Save Modifications’ if you’re executed.

Step 3: Add Your Picture and Allow Lightbox

Now, let’s take a look at out the lightbox function. Merely create or open a submit and add a picture.

As soon as your picture is within the editor, you must add a caption. The Easy Lightbox plugin will present this textual content within the lightbox view.

Merely click on the picture and ensure the ‘Add Caption’ icon is activated within the toolbar. This lets you sort within the ‘Add caption’ textual content area under your picture.

In case you don’t add a caption, the plugin will mechanically use the image title from the Media Library as an alternative. Nonetheless, I discover that utilizing the caption area offers you extra direct management.

Subsequent, with the picture nonetheless chosen, you must click on the ‘Hyperlink’ icon within the toolbar and choose the ‘Hyperlink to Picture File’ possibility. It is a key step that enables the Easy Lightbox plugin to work.

When you do that, the plugin will mechanically detect the hyperlink and apply its lightbox impact when a customer clicks on the picture.

Step 4: Take a look at Your Lightbox

Now, let’s take a look at the lightbox function by previewing the submit. Simply click on the View possibility within the higher right-hand nook after which choose ‘Preview in new tab’.

As soon as the brand new tab opens, go forward and click on on the picture. You must see it open easily in a lightbox overlay with a darkened background.

Relying in your design settings, you will note the lightbox in a lightweight or darkish theme. Right here’s what the sunshine theme seems to be like.

The sunshine theme surrounds the photograph with a white body, which creates a great distinction with the darkened background.

Now right here’s what the darkish theme seems to be like.

You also needs to see your picture caption within the backside left nook of the lightbox.

I additionally advocate previewing your lightbox on different display sizes to verify it seems to be good on each gadget.

You are able to do this by returning to the View possibility and deciding on the ‘Desktop’, ‘Pill’, or ‘Cellular’ possibility. After that, click on ‘Preview in new tab.’

Technique 3: Utilizing a Gallery Plugin (Greatest for A number of Pictures)

In case you’ve ever needed to highlight a number of photos, then gallery plugins are fingers down the very best answer. They assist manage and showcase a collection of photos with picture enlargement performance with out slowing down your web site.

These plugins can enhance consumer interplay by making your content material extra partaking and visually interesting, giving guests a seamless expertise navigating by your photos.

I like to recommend Envira Gallery as a result of it lets you create stunning, customizable galleries that look nice on any gadget. It’s additionally tremendous beginner-friendly.

Plus, it contains efficiency options like lazy loading to verify your galleries don’t decelerate your web site. And its AI device may help you create customized photos proper inside WordPress.

Most significantly, the plugin presents a lightbox setting with a number of customization choices. This fashion, you may get all the advantages of the click-to-enlarge picture function, plus some cool settings for layouts, gallery transitions, and way more.

Wish to be taught extra about what the plugin can do? We’ve examined it extensively up to now, and you’ll try our full Envira Gallery review for extra info.

Now, let’s undergo the steps of utilizing Envira Gallery so as to add a lightbox function.

Step 1: Set up and Activate the Envira Gallery Plugin

Let’s begin by putting in the plugin in your web site. On this tutorial, I’ll use the free version, or you should buy a Professional license from the Envira Gallery website.

Subsequent, set up and activate it by following our information on how to install a WordPress plugin. When you’ve activated the plugin, Envira’s setup wizard ought to immediately launch.

From right here, click on the ‘Get Began’ button to start the method.

There are 5 steps on this wizard.

Throughout setup, you possibly can select the class that describes your online business or web site (like photographer or enterprise proprietor) and choose the gallery options you want to add.

I like to recommend persevering with with the prompt default settings as a result of they normally supply the whole lot you want. Nonetheless, if in case you have a Professional plan, you’ll be capable of activate extra superior options.

Remember that the ‘Lightboxes’ possibility ought to already be checked, so this function will mechanically be enabled.

When you’ve completed the setup wizard, you’ll nonetheless have to activate your professional license when you bought one. To do that, go to Envira Gallery » Settings and paste your license key within the area. Then, hit ‘Confirm Key.’

Step 2: Create a New Gallery

To create your first gallery, go to Envira Gallery » Add New in your dashboard.

First, add a title on the high of the web page. I like to recommend giving it a transparent and descriptive identify in order that it’s simpler to maintain monitor of later.

Subsequent, you’ll discover 3 choices for including photos: Native Envira Gallery, Galleries from Different Sources, and Create with Envira AI.

I like to recommend beginning with Native Envira Gallery. It’s probably the most easy option to add your personal photos straight.

Go forward and choose the photographs you need to embrace. You’ll be able to add as many as you want whereas protecting the utmost add file measurement under 256 MB.

Step 3: Configure Gallery and Lightbox Choices

Within the menu to the left of your gallery photos, you’ll discover Envira’s Gallery settings.

There are tabs for normal configuration, the lightbox function, cell settings, and extra. Let’s undergo them one by one.

You’ll be able to select your gallery structure on the high of the ‘Configuration’ part. The grid structure works nice for many galleries, however be at liberty to experiment with different choices.

Scrolling down, you will discover extra gallery settings choices.

For instance, you possibly can allow lazy loading, set an computerized structure, and add a gallery description.

For instance, you would possibly need to set computerized layouts to make sure your gallery seems to be neat and arranged with out further effort.

Subsequent, change to the ‘Lightbox’ tab. Keep in mind, this function ought to be enabled by default, but when it isn’t, examine the field subsequent to ‘Allow Lightbox?’

Then, you’ll need to choose a ‘Gallery Lightbox Theme.’ This may decide the final look of your lightbox.

Your choices will rely in your Envira plan and whether or not you could have the Gallery Themes addon. However it’s best to be capable of choose from a darkish, mild, or legacy theme.

Additional down within the ‘Lightbox’ tab, you possibly can select how your enlarged photos seem, choose transition results, and determine whether or not to point out picture titles.

Then, you will discover extra lightbox settings on the second half of the web page.

For instance, you possibly can allow navigation arrows, infinite looping of photos, or supersize mode. You’ll be able to even add cool results for when folks open or shut your gallery, and once they click on by it.

As an illustration, for ‘Lightbox Transition Impact,’ you possibly can decide enjoyable choices like Fade, Slide, Round, Tube, Rotate, and extra.

Subsequent, I like to recommend going to the ‘Cellular’ tab to configure each the final and lightbox settings.

Extra folks will most likely view your gallery on telephones than computer systems, so let’s ensure that it seems to be nice on small screens too.

Along with activating the lightbox function for cell gadgets, you possibly can customise mobile-specific settings resembling lightbox dimensions, row heights, and title or caption shows.

As you scroll down, you’ll uncover extra choices, together with options like swipe-up to shut, gallery navigation arrows, thumbnails, and extra.

Lastly, the ‘Standalone’ and ‘Misc’ tabs have a number of further settings it’s possible you’ll discover helpful.

The ‘Standalone’ tab allows you to give your gallery its personal distinctive URL. It is a nice function if you wish to share a direct hyperlink to a particular portfolio or photograph album.

The ‘Misc’ tab contains instruments for importing and exporting galleries, however you most likely received’t want these proper now.

For a deeper dive into all these settings, you possibly can try our detailed information on how to create an image gallery.

Step 4: Preview and Publish Your Gallery

To preview the gallery, click on the ‘Preview’ button on the appropriate facet of your gallery settings web page.

When you’re on the preview web page, click on by totally different photos to check the lightbox impact.

Right here, you possibly can see the picture’s identify and the remainder of the gallery.

Once you take a look at the gallery, the photographs ought to open easily. In case you selected a transition impact, it ought to be seen right here.

For instance, I set the Slide transition impact, and right here’s the way it seems to be.

To navigate between photos, click on on the navigation arrows on both facet of the display or use the arrow keys in your keyboard.

At this level, it’s possible you’ll need to ensure that the navigation arrows work and that your picture titles seem appropriately when you enabled them.

When you’re pleased with how the whole lot works, you possibly can publish the gallery by clicking the ‘Publish’ button on the appropriate facet of your gallery settings.

After publishing the gallery, you possibly can transfer on to including it to your web site.

Step 5: Add the Gallery to Your Web site

Now that your gallery is working completely, let’s add it to a submit.

As soon as you might be within the WordPress editor, click on the (+) icon so as to add a brand new block and seek for ‘Envira Gallery.’ Then drag the block onto your submit.

Subsequent, if you click on the ‘Seek for a gallery’ drop-down, choose the gallery you simply created. It is going to be mechanically inserted into the submit with all of the settings you simply configured.

Alternatively, you possibly can add your gallery to pages, widgets, or customized submit varieties through the use of a shortcode.

You will discover this shortcode on the appropriate sidebar of the gallery settings, just below the ‘Publish’ button.

For extra info, see our information on how to add a shortcode in WordPress.

Earlier than clicking the ‘Publish’ button, ensure you preview your submit one last time to verify the gallery seems precisely as you need it.

Your photos ought to now be displayed in knowledgeable grid structure with a clean lightbox impact when clicked.

FAQs About Enlarging Pictures in WordPress

Listed here are some often requested questions on enlarging photos in WordPress.

How do I enlarge photos in WordPress?

You should utilize the default ‘Enlarge on click on’ function in WordPress for fundamental performance. For extra management, you should use plugins like Simple Lightbox or Envira Gallery.

How do I mechanically resize photos in WordPress? 

WordPress mechanically creates a number of smaller variations of your photos if you add them. To have extra management over picture dimensions or to optimize them for velocity, I like to recommend utilizing a picture optimization plugin like EWWW Image Optimizer.

Plugins like Envira Gallery additionally provide you with exact management over the show dimensions of photos inside your galleries.

How do I drive picture measurement in WordPress?

You’ll be able to set customized picture dimensions inside your theme. For an in depth information, try our tutorial on how to create additional image sizes in WordPress. It is a smart way to make sure a constant structure throughout your galleries and web site.

In case you desire utilizing a plugin, think about choices like Envira Gallery. It lets you specify precise picture dimensions effectively, offering management over how your galleries look. This may help keep a cultured look throughout your web site.

Bonus Sources: Handle & Enhance Your WordPress Pictures

I hope this text helped you add the ‘enlarge photos upon click on’ function in WordPress. Listed here are some bonus guides when you’re considering managing and bettering your WordPress photos:

In case you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can too discover us on Twitter and Facebook.