Ask Dave Taylor
  • Facebook
  • Instagram
  • Linkedin
  • Pinterest
  • Twitter
  • YouTube
  • Home
  • YouTube Videos
  • Top Categories
  • Subscribe via Email
  • Ask A Question
  • Meet Dave
  • Home
  • HTML & Web Page Design
  • Quick Guide to Resizing and Linking Images in WordPress

Quick Guide to Resizing and Linking Images in WordPress

December 19, 2022 / Dave Taylor / HTML & Web Page Design, Wordpress Help / No Comments

I’m just starting out with a review site in WordPress and heard back from a friend that my images are too big in my posts and that they should link to the products too. How do I fix all that up in WordPress?

Getting started with WordPress is pretty easy since the composition window (in “classic” mode, at least) looks quite a bit like an email composition window. Highlight a word, click the ‘B’ button, and it’s bold. Highlight another word, click “Link” and you can enter the associated URL. Press Return or Enter twice and you have a blank link between paragraphs. Generally speaking, the hard part about composing content in WordPress is, well, the content, not the formatting.

Still, images are a different creature, not the least of which is that with auto-resizing too many of us have become used to working with enormous photos from our phones without actually resizing them to be appropriate for a Web page or blog post. This slows down the user experience and costs you visibility in search engines, a double impact, so it’s definitely worth seeking to fix the problem. Easiest? Save different copies of images specifically to upload and resize those to 1000px in either dimension or smaller.

Shortcuts: Resize Image | Image Details Window | Link Image to URL

This doesn’t mean you won’t want to fine-tune and adjust the size of an image relative to the content around it, but at least you will avoid the overly-enormous images that slow down lots of sites. WordPress, however, has ya covered with both the subtle, aesthetic resizes and the image linking you seek.

RESIZE AN IMAGE WITHIN WORDPRESS

There are a lot of different ways you can work with an image once you’ve uploaded it. I have an article I wrote about the 2022 Honda Passport Trailsport, for example, that includes a Honda logo that, on second look, is probably bigger than needed:

wordpress resize link image - logo too big

To resize it, I’ll switch to the Edit mode (usually from the “Edit Post” link on the top author toolbar), which shows approximately the same layout, but editable. Click on an image and two things happen: A positioning toolbar appears, and the image gets a frame with resize “handles”:

wordpress resize link image - resize handles edit toolbar

Click and drag on any of the resize corners and it’s quite easy to make the graphic, photo, or image bigger or smaller…

wordpress resize link image - resizing by dragging

A bit confusing during the resize, but once you release the mouse button it reflows the text so you can see what’s going on and click-and-drag again if you want to tweak it further. I do find that the mockup within the editor isn’t quite the same as the final published page, so I also find that I “Publish”, view, and go back to the editor to get things just so at times…

The toolbar is worth a closer look too; the first four choices allow you to change the relative alignment of the image and its surrounding text, known as the ‘flow’ of the content. This can be a fun way to mix up your content’s appearance so try left and right wrap to see how they appear.

Click on the pencil icon on that bar, however, and a completely new image window appears.

THE IMAGE DETAILS WINDOW

You’ll be moved to the Image Details window and it’s got quite a few options and settings:

wordpress resize link image - image settings customize

This is where you can add alternative text (always a good idea, even if it’s a rudimentary description of the image, as shown), add a caption (which will typically be formatted neatly under the image, depending on your theme) and adjust the display settings. The display settings are what we want to access!

Let’s say that you’ve uploaded a number of images that aren’t quite the same size, but you want them all displayed at exactly 300 pixels width. You can click-and-drag to try and get the live display to show a width of 300, but it’s much easier to adjust it in this window:

wordpress resize link image - resize image pop-up

Have a peek at the Full Size dimensions, because if they’re really large, it’s time to resize the original image and upload a smaller version; no Web site needs 3000px or larger images!

You can also type in a specific width and have the height tweaked to match, or vice versa:

wordpress resize link image - enter specific dimensions

In this instance, by specifying 250px as the width, WordPress has automatically calculated that the proportional height would be 208px. Easy, right? That shows you all the options for resizing your image on the page in WordPress.

LINKING AN IMAGE TO A SPECIFIED URL

Now, what about having your image be clickable so that people can jump to a specific Web page or URL? That’s also accessible on this screen with the “Link To” menu. Click on it and there are four options shown:

wordpress resize link image - link to custom url

The default is for an image not to link to anything, or “None”, but you can have a small version of an image link to a full-size version (“Media File”), have it link to a specified page (“Attachment Page”), or any URL you’d like to utilize, by choosing “Custom URL“.

Choose that and a text field appears, allowing you to specify the URL in question:

wordpress resize link image - specify custom link url

I recommend you open another tab and test the URL or even copy it out of the Address Bar to ensure you get it exactly right; one missed character and the link will be broken for every user. I also strongly encourage you to only use “https://” links, even though the default display shows “http://”.

wordpress resize link image - image links to Honda motors USA home page

Save this change, update the page, and your graphic, photo, or image now links to the URL in question.

Want to have the link open a new tab or page rather than replace the current page? You can do that with one of the settings the “Advanced Settings” area of the page:

wordpress resize link image - open custom url link in new tab page target

You can see the checkbox in the middle of these different CSS and style options: “Open link in a new tab“. Check that box, save and republish, and it now has the behavior you prefer.

Wondering about the HTML powering it all? Here’s our new Honda logo code, as automatically generated by WordPress:

wordpress resize link image - html href img src from wordpress

Notice the target=”_blank” that the checkbox has produced and various CSS classes, along with the alt attribute. Not too difficult once you know where to look for the various options!

Pro Tip: I’ve been running and writing about WordPress for many years. Please check out my extensive WordPress help area here on the site for more tutorials and guides while you’re visiting!

About the Author: Dave Taylor has been involved with the online world since the early days of the Internet. Author of over 20 technical books, he runs the popular AskDaveTaylor.com tech help site. You can also find his gadget reviews on YouTube and chat with him on Twitter as @DaveTaylor.

Let’s Stay In Touch!

Never miss a single article, review or tutorial here on AskDaveTaylor, sign up for my fun weekly newsletter!
Name: 
Your email address:*
Please enter all required fields
Correct invalid entries
No spam, ever. Promise. Powered by FeedBlitz
Please choose a color:
Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!
resize wordpress image, wordpress link image

Leave a Reply Cancel reply

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

Search

Recent Posts

  • How to Check Energy Recommendations on your Windows Laptop
  • How Do I Customize New Tab Windows in Safari for Mac?
  • Can AI-Generated ChatGPT Text Be Accurately Identified?
  • How to Perform a Microsoft Account Security Audit and Checkup
  • How Can I Customize My Linux Dock / Taskbar?

On Our YouTube Channel

How to: Replace a Switchbot Door Sensor Battery

EMEET Luna vs INNOTRIK Studio Bluetooth Speakerphones -- DEMOS & REVIEW

Categories

  • AdSense, AdWords, and PPC Help (106)
  • Amazon, eBay, and Online Shopping Help (163)
  • Android Help (226)
  • Apple iPad Help (147)
  • Apple Watch Help (53)
  • Articles, Tutorials, and Reviews (346)
  • Auto Tech Help (15)
  • Business Advice (200)
  • ChromeOS Help (31)
  • Computer & Internet Basics (778)
  • d) None of the Above (166)
  • Facebook Help (383)
  • Google, Chrome & Gmail Help (188)
  • HTML & Web Page Design (247)
  • Instagram Help (49)
  • iPhone & iOS Help (623)
  • iPod & MP3 Player Help (173)
  • Kindle & Nook Help (99)
  • LinkedIn Help (88)
  • Linux Help (173)
  • Linux Shell Script Programming (89)
  • Mac & MacOS Help (911)
  • Most Popular (16)
  • Outlook & Office 365 Help (33)
  • PayPal Help (68)
  • Pinterest Help (54)
  • Reddit Help (19)
  • SEO & Marketing (82)
  • Spam, Scams & Security (95)
  • Trade Show News & Updates (23)
  • Twitter Help (220)
  • Video Game Tips (66)
  • Web Site Traffic Tips (62)
  • Windows PC Help (947)
  • Wordpress Help (206)
  • Writing and Publishing (72)
  • YouTube Help (47)
  • YouTube Video Reviews (159)
  • Zoom, Skype & Video Chat Help (62)

Archives

Social Connections:

Ask Dave Taylor


Follow Me on Pinterest
Follow me on Twitter
Follow me on LinkedIn
Follow me on Instagram


AskDaveTaylor on Facebook



microsoft insider mvp


This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to our terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. Our lawyer says "Thanks for your cooperation."
© 2023 by Dave Taylor. "Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.
Privacy Policy - Terms and Conditions - Accessibility Policy