WordPress makes it simple to upload images. You can locate and manage your uploaded photos in the Media Library, which may be accessed in some ways. It is common practice to incorporate images in posts and pages. When the image is stored in your computer’s Media Library, it will appear anywhere you input it. Direct photo uploads to the Media Library can also be done using the single-file or multi-file loader.
Table of Contents
Inserting Images into Websites and Blogs
Using the WordPress Media Uploader, you may quickly and effortlessly add photos when creating or updating a WordPress page or blog post. Here are specific instructions for adding a photo using the media uploader:
Step 1: Set the Cursor
Place the cursor where you want the image to appear in the text on your website or blog post as the first step in adding an image. To easily insert the photos into your text, click on them. Place the pointer on a blank line to have the image appear independently.
Step 2: From the menu, select “Add Media.”
To launch the media uploader window, position your cursor where you want the image to appear and then click Add Media. Select Insert Media from the list of options on the media uploader window’s left side.
Step 3: Choosing or Uploading an Image
In the middle of the media uploader box, there are buttons to select or add the image you wish to utilize on your page or post.
Drag and drop your PC’s files into the upload box to upload them.
The photographs you want to use on your page or post might be in the media library; click on the one you want.
When you choose or upload your favorite image, a checkmark will appear next to the thumbnail to indicate that your selection has been made. Information about the attachment is shown in the Attachment Details pane on the right side of the media uploader interface.
Step 4: Describe Your Attachment
In addition to metadata like the filename, upload date, and pixel measurements, the Attachment Details box now shows a tiny, uncropped image preview.
The image can be modified or removed entirely by choosing the “Edit Image” and “Delete Permanently” buttons.
The following media data can also be modified:
Title
Mention the name of the media.
Image caption
The picture’s caption. The words you type here will be shown below the picture.
Alternate Text
Enter the words that will replace the image here, such as “The red apple,” to explain the visual feature of the image further.
Description
A succinct description of this medium can be found below.
Step 5: Altering the Attachments Display
You can modify a file’s display settings in the Attachment Display Settings window.
It is possible to change the image’s link behavior, desired size, and orientation (concerning margins and text) on the page.
Orienting the picture
By using alignment, you may control where the image appears within the content area and how it interacts with the surrounding text. You can utilize some picture alignment methods, including:
Left: Places the image on the right side of the page, pushing any surrounding text to the left.
Right: The image is positioned to the right margin while the text on the page flows to the left to create room for it.
Center: Places the image in the page’s center, leaving the perimeter of the image blank. This option doesn’t align with added photos when they are selected.
Image Link
Users who click on the image will go to the URL or website address in the Link To settings. For setting up photo connections, there are many possibilities, including:
Attachment Page: To view the image you just added, click the “Attachment Page” link in the text box.
Image File: The computer’s complete source file is linked to the uploaded image by choosing this alternative.
Custom URL: Using the “Custom URL” option, you can link the embedded photographs to a specific URL of your choice.
The image will no longer be “clickable” after selecting “None” for the link setting.
Image Size
The Size options determine the sizes of the photographs you upload to your website. WordPress generates four different picture sizes by default:
Thumbnail: A thumbnail of your image will be displayed on the website or in the post. The Thumbnail size is configured to be square by default. Thus, your original image might be slightly cropped.
Medium: Your photo will be posted or shown in a medium-sized format on the page. Given that there is enough room for readable text on both the left and right sides, this size is the optimum choice for Left/Right alignments.
Large: A big version of your photo will be showcased or shown online. Please note that WordPress will automatically figure out the width of the content column in your theme and use that knowledge to display the biggest photo suitable for that area.
Full Size: If you choose the Full-Size option, the website or post will display your entire image. Be careful that when choosing the size of the image to display, WordPress will consider the width of the content column in your theme. Your photo may be cropped or shown at a lesser size if its original dimensions exceed the space allocated in this column.
Step 6: Inserting the Picture
You can add your image to your post or page by clicking the appropriate blue button after adjusting the settings to your preference. You can view a preview of the image’s alignment in the text editing window after the image uploader box has closed.
Click the Edit Image button in the upper left corner of the window at any time to change the image’s parameters. Click the Remove Image button to remove the image from your website or blog post.
Conclusion
We’ve discussed how to incorporate images into your writing up to this point. What about pictures taken from other websites?
Using the block editor to accomplish this is just as simple. It has embedded blocks for several social media platforms.
Insert the Instagram block into the post editor and enter the post’s URL, for instance, to include an Instagram image.
Without any assistance, WordPress can automatically add Instagram posts. The toolbar’s alignment choices will then be available for usage.
If you want to embed a video in WordPress, use the functional embed blocks. Afterward, WordPress will provide you with the same options for aligning movies.
This tutorial should simplify adding and aligning photographs in the WordPress block editor.