Tag - Images

How to Get the URL of Images You Upload in WordPress


Do you want to find the link or URL of images you upload in WordPress?

Sometimes you may need to get the link of an image to display it in other areas of your website or social media platforms.

In this article, we will show you how to easily get the URL of images that you upload to your WordPress site.

How to Get the URL of Images You Upload in WordPress

Finding a WordPress Image URL – Step by Step

WordPress automatically creates a unique URL for each image you upload to your website using the default WordPress media uploader.

Usually, a WordPress image URL includes your domain name followed by /wp-content/uploads/, date of image upload, and the image file name.

For example, an image named ‘travelaccessories.png’ uploaded to example.com in January 2019 will have a URL like this:

www.example.com/wp-content/uploads/2019/01/travelaccessories.png

Now let’s take a look at how to get the URL of images uploaded to your WordPress site.

First, you need to login to your WordPress admin area and click on the Media menu. Once done, it will open your media library where all your images and other media files are stored.

Next, you can use the search feature to find the image that you want to find the link of.

Search Image in WordPress Media Library

Once you click on the image, it will open a popup window with the image attachment details. You will see the image details in the right column and image preview on the left.

The right column displays all image details including file name, file type, upload date, file size, dimensions, and image metadata like image alt text, title, caption, description, image uploaded by, etc.

You will also see the image URL at the end. It is the link next to ‘Copy Link’ option.

Find WordPress Image URL

You can simply copy the link and use it anywhere you like.

If you open the image URL in your browser, then you can see the full size original version of the image uploaded.

Finding Your WordPress Image URLs from the Frontend

The method shown above lets you get the URL of any image uploaded in WordPress, whether it is published live or not.

If you want to get the URL of images already published on your site, then you can get it from the frontend itself. It is much easier!

Open a page or post where the image is published and locate the image. After that, right-click on the image, and select ‘Open image in new tab’ option.

Open WordPress Image in a New Tab

Once the image opens in the new tab, look at the URL in the address bar. That is your WordPress image URL.

Get the URL of Images in WordPress

Now you can copy the image address and use it anywhere you want.

It is pretty quick and straightforward!

How to Get the URL of GIFs, Videos, and PDFs in WordPress

As mentioned above, other media files like GIFs, videos, and documents like PDFs are also saved in the WordPress media library. You can easily find the URL of these files by following the same steps as shown above.

Go to Media » Library from your dashboard, and then click on a GIF, video, or document whose URL you want to see. After that, attachment details popup window will appear.

GIF URL in WordPress

You can get the attachment URL next to the ‘Copy Link’ option on the right column.

We hope this article helped you to learn how to get the URL of images you upload in WordPress. You may also want to see our guide on basic image editing in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Get the URL of Images You Upload in WordPress appeared first on WPBeginner.



Source link

Beginner’s Guide to Image SEO – Optimize Images for Search Engines


Are you looking to improve image SEO on your website? When optimized properly, image search can bring many new visitors to your website.

To benefit from image SEO, you need to help search engines find your images and index them for the right keywords.

In this beginner’s guide, we will show you how to optimize image SEO by following top best practices.

Image SEO guide for beginners

Here is a brief overview of what you’ll learn in this article.

  • Optimizing your images for SEO and Speed
  • What is Alt text?
  • Difference between Alt text vs title
  • Difference between alt text and caption
  • How to add alt text, title, and caption to images in WordPress
  • When to use captions for images
  • Disable attachment pages in WordPress
  • Additional tips to improve image SEO

Optimizing Your Images for SEO and Speed

Speed plays an important role in SEO and user experience. Search engines consistently rank fast websites higher. This is also true for the image search.

Images increase your overall page load time. They take longer to download than text, which means your page loads slower if there are several large image files to download.

You need to make sure that images on your site are optimized for web. This can be a little tricky to get used to since many beginners are not experts in graphics and image editing.

We have a handy guide on how to properly optimize images before uploading them to your website.

The best way to optimize images is by editing them on your computer using a photo editing software like Adobe Photoshop. This allows you to choose the right file format to create a small file size.

You can also use an image compression plugin for WordPress. These image optimizer plugins allow you to automatically reduce file size while uploading an image to WordPress.

What is Alt Text?

Alt text or alternative text is an HTML attribute added to the img tag which is used to display images on a web page. It looks like this in plain HTML code:

<img src="http://www.wpbeginner.com/fruitbasket.jpeg" alt="A fruit basket" />

It allows website owners to describe the image in plain text. The main purpose of the alternate text is to improve accessibility by enabling screen readers to read out the alt text for visually impaired users.

Alt text is also crucial for image SEO. It helps search engines understand the context of the image.

Modern search engines can recognize an image and it’s content by using artificial intelligence. However, they still rely on website owners to describe the image in their own words.

Alt text also accompanies images in Google image search, which helps users understand the image and improves your chances of getting more visitors.

Alt text used in search results

Usually, alt text is not visible on your website. However if an image is broken or cannot be found, then your users will be able to see the alternate text with a broken image icon next to it.

Alternate text displayed next to a broken image

What is the Difference Between Alt Text vs Title

Alt text is used for accessibility and image SEO, while title field is used internally by WordPress for media search.

Search image by title

WordPress inserts the alt tag in the actual code used to display the image. The title tag is stored in the database to find and display images.

In the past, WordPress inserted the title tag in the HTML code as well. However, it was not an ideal situation from the accessibility point of view, which is why they removed it.

What is the Difference Between Alt Text vs Caption

The alt text is used to describe the image for search engines and screen readers. On the other hand, the caption is used to describe the image for all users.

Alt text is not visible on your website while captions are visible below your images.

Example of a caption displayed below an image

The alt text is crucial for better image SEO on your website. The caption is optional and can be used only when you need to provide additional information about the image to website visitors.

How to Add Alt Text, Title, and Caption to Images in WordPress

Alt text, title, and caption make up the image metadata that you can add to images when uploading them into WordPress.

When you add an image using the default image block, WordPress allows you to add caption and alt text for the image.

Adding alt text and caption to an image in WordPress

It automatically generates a title for the image from the file name. You can change the title by clicking on the edit button in the image block’s toolbar.

Editing an image in default WordPress editor

This will bring up the media uploader popup where you can enter your own custom title for the image.

Changing image title in WordPress

You can also edit the alt tag and title for the images that you have already uploaded to WordPress. To do that, you need to visit Media » Library page and locate the image you want to edit.

WordPress media library

Simply clicking on an image will bring up the attachment details popup where you can enter title, alt text, and caption.

Add alt tag and title via media library

Note: Changing an image’s alt tag or caption via Media Library will not change it in the posts and pages where the image is already used.

When to Use Captions for Images in WordPress

Captions allow you to provide additional details for an image to all your users. They are visible on the screen for all users including search engines and screen readers.

An image gallery with captions for each image

As you may have noticed that most websites don’t normally use captions with images in their blog posts or pages. That’s because captions are often not needed to explain an image.

Captions are more suitable in the following scenarios:

  • Family or event photos
  • Photos that need additional explanation describing the background story
  • Product image galleries

In most cases, you would be able to explain the image in the article content itself.

Disable Attachment Pages in WordPress

WordPress creates a page for all images you upload to your posts and pages. It is called the attachment page. This page just shows a larger version of the actual image and nothing else.

This can have a negative SEO impact on your search rankings. Search engines consider pages with little to no text as low quality or ‘thin content’.

This is why we recommend users to disable the attachment pages on your website.

The easiest way to do this is by installing and activating the Yoast SEO plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, it automatically turns off attachment URLs. You can also manually turn off attachment pages in WordPress by visiting SEO » Search Appearance page and clicking on the Media tab.

Disable attachment URLs in WordPress

From here, make sure that the ‘Media & attachment URLs’ option is set to ‘Yes’.

If you are not using Yoast SEO plugin, then you can install the Attachment Pages Redirect plugin. This plugin simply redirects people visiting the attachment page to the post where the image is displayed.

You can also do this manually, by adding the following code to your theme’s functions.php file or a site-specific plugin.

function wpb_redirect_attachment_to_post()  
if ( is_attachment() )  
global $post;
if( empty( $post ) ) $post = get_queried_object();	
if ($post->post_parent)	
	$link = get_permalink( $post->post_parent );
	wp_redirect( $link, '301' );
	exit(); 
	
else	
	// What to do if parent post is not available
	wp_redirect( home_url(), '301' );
	exit(); 
	


add_action( 'template_redirect', 'wpb_redirect_attachment_to_post' );

Additional Tips to Improve Image SEO

Adding alt tag is not the only thing you can do to improve image SEO. Following are a few additional tips that you should keep in mind when adding images to your blog posts.

1. Write descriptive alt text

Many beginners often just use one or two words as alt text for the image. This makes the image too generic and harder to rank.

For example, instead of just ‘kittens’ use ‘Kittens playing with a yellow rubber duck’.

2. Use descriptive file names for your images

Instead of saving your images as DSC00434.jpeg, you need to name them properly. Think of the keywords that users will type in the search to find that particular image.

Be more specific and descriptive in your image file names. For example, red-wooden-house.jpeg is better than just house.jpeg.

3. Provide context to your images

Search engines are getting smarter every day. They can recognize and categorize images quite well. However, they need you to provide context to the image.

Your images need to be relevant to the overall topic of the post or page. It is also helpful to place the image near the most relevant text in your article.

4. Follow the SEO best practices

You also need to follow the overall SEO guidelines for your website. This improves your overall search rankings including image search.

5. Use original photographs and images

There are many free stock photography websites that you can use to find free images for your blog posts. However, the problem with stock photos is that they are used by thousands of websites.

Try to use original photographs or create quality images that are unique to your blog.

We know that most bloggers are not photographers or graphic designers. Luckily, there are some great online tools that you can use to create graphics for your websites.

We hope this article helped you learn about Image SEO for your website. You may also want to see our guide on how to fix common image issues in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post Beginner’s Guide to Image SEO – Optimize Images for Search Engines appeared first on WPBeginner.



Source link

How to Add Caption to Images in WordPress


Do you want to add captions to your images in WordPress? Captions are brief text descriptions that you can add to your images. They are typically used to provide additional details about an image.

WordPress comes with the built-in capability to easily add a caption and other metadata including title and alternative text for each image.

In this beginner’s guide, we will show you how to easily add a caption to images in WordPress.

How to Add Caption to Images in WordPress

Adding Caption to Images in WordPress

The first thing you need to do is to upload an image. On the post edit screen, click the ‘Add Block’ icon and select the ‘Image’ block.

Add Image Block in WordPress

Upon clicking on it, the Image block will be added to your post area.

Image Block Added In WordPress

You can now click on the upload button to select and upload an image from your computer to WordPress. You can also select a previously uploaded image by clicking on the media library button.

To learn more, see our article on how to add and align images in WordPress.

As soon as you add an image, it will appear inside the editor with a text box labeled ‘Write caption…’ below it.

That’s where you can add a caption for your image.

Add Caption to Image in WordPress post

Once done, you can save your post by clicking on the publish or update button.

That’s all. Wasn’t that easy?

Add Captions to Your Gallery Images

WordPress editor also comes with a Gallery block allowing you to upload multiple images and display them in a grid layout with rows and columns.

Let’s see how to add captions to images in a WordPress gallery block.

To create a gallery, go to your page or post edit screen. Then click the ‘Add Block’ icon and select the ‘Gallery’ block in the Common Blocks tab.

Add Gallery Block in WordPress

Next, you will see the Gallery block added to your page/post area. Now, you can upload images one by one from your computer or select the pre-uploaded pictures from your media library.

Gallery Block Added to a WordPress Page

If you upload images individually, then you can add a caption after uploading each one. When an image is uploaded, simply click on the image and the ‘Write caption…’ field will appear. You can add a caption by clicking on that.

Add Caption to Gallery Images in WordPress

If you select pre-added images from the library, you can add a caption to your pictures from the image metadata section on the right. If the photos already have a caption, then you don’t need to add it again.

Select Images to Create Gallery in WordPress

Adding Captions to Images in WordPress Media Library

WordPress allows you to upload images directly to the media library without embedding it in a post or page.

Here we will show you how to add caption to images when uploading them directly to the Media Library.

First, you need to visit Media » Add New page in WordPress admin area.

Add New Media to WordPress

From here, you can upload an image by dragging and dropping or by selecting one from your computer.

Once done, you will see the uploaded image below the Upload New Media box. You need to click the ‘Edit’ link.

Edit Image Option in WordPress Media Upload Page

Next, it’ll open the edit media page in a new tab. You may notice that the edit media screen looks similar to the post edit screen. That’s because WordPress treats attachment (for example, image) as a default post type.

This allows it to store image metadata like title, description, and caption in WordPress database.

From this screen, you can edit your image title, add image metadata including caption, alternative text, and description.

Image Post Edit Screen in WordPress

Once you add the necessary information, you can update your image. This image metadata will now be saved in your media library.

You can add this image on as many posts as you like without having to add the caption and other metadata again. Whenever you add this image to your post from the media library, it comes with the metadata already saved.

Select Image to Add in a WordPress Post

Adding Caption to Images in WordPress with Old Classic Editor

If you are still using the old Classic Editor on your WordPress site, then this is how you would add captions to images in WordPress.

Simply click on the Add Media button above the post editor to upload an image or select one from the media library.

Add media button in the old classic editor

Once the image is uploaded you can enter meta data like title, alt text, and a caption of your image.

Adding caption to images using the Classic Editor

Click on the ‘Insert into post’ button to add the image to your post or page.

You will now be able to see the image preview in your post editor with the caption. You can save your changes and preview the post to see how it would look on your live site.

Preview of an image with the caption

Adding Captions to Gallery Images in WordPress with Classic Editor

You can also add captions to images when creating a gallery using the Classic Editor. Simply upload and select multiple images and then click on the ‘Create gallery’ link from the left column.

Create gallery in media uploader

After that, you will need to click on the ‘Create a new gallery’ button at the bottom right corner of the popup.

Create a new gallery with selected images

Now you will be able to add captions directly below each image or click on an image to load its settings in the right column and then add the caption.

You can now click on the Insert Gallery button to add gallery into your WordPress post or page.

Classic editor gallery images with captions

We hope this article helped you to add caption text to your images in WordPress. If you liked this article, you might also want to see our guide on how to fix common image issues in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Add and Align Images in WordPress Block Editor (Gutenberg)


Images bring life to your WordPress posts and pages by making them more engaging. However, many beginners struggle with aligning images just the way they like.

The new WordPress block editor (Gutenberg) solves this problem by making it easier to add and align images in WordPress.

In this article, we will show you how you can easily add and align images in the WordPress to create beautiful content layouts.

Adding and properly aligning images in WordPress

Image Alignment in WordPress Editor

Previously, WordPress used a text area with editing buttons as its default editor. One particular issue in the old editor was image alignment.

Even though there were options to align images left, right, or center, they didn’t always look good. Sometimes images didn’t align, were not the exact size, or just looked odd.

WordPress 5.0 introduced a new WordPress post editor called the Gutenberg block editor. It fixed several problems with the old editor including the image alignment issues.

Let’s take a look at how you can easily add and align images in the new editor to create beautiful layouts for your posts and pages.

Add and Align Images in WordPress

The new editor comes with the following blocks that you can use to add images into your WordPress posts and pages.

  • Image
  • Inline Image
  • Gallery
  • Media & Text
  • Cover

Let’s start with a simple image block first.

Click on the ‘Add new block’ button or type /image in the post editor to insert an image block.

Adding a new image block in WordPress post editor

You will see three buttons inside the blank image block.

You can upload an image from your computer, select an already uploaded image from the media library, or insert an image by providing the image file URL.

Next, click on the ‘Upload’ button and then select the image you want to upload from your computer.

As soon as you select the image, WordPress will upload it to your media library and insert it into the image block.

Image options in WordPress post editor

Now, you will notice a toolbar on top of your image and some image block settings in the right column. To align your image, you’ll be using the toolbar that appears on top of the image.

Image alignment buttons in WordPress post editor

The image block gives you the following image alignment options as buttons in the toolbar.

  • Align left
  • Align Center
  • Align Right
  • Wide Width
  • Full Width

If your image is smaller in width, then aligning it to the left or right will bring up text next to the image. Aligning it to the center will display the image on its own row with no text on either side.

Center align an image in WordPress

Choosing the wide width option will make your image wider than the text area, and the full-width option will push it to the right and left edges of the browser screen.

Making an image full-width in WordPress

How to Perfectly Align an Image Next to Text

A lot of times you may need to perfectly align an image next to some text. WordPress block editor makes this easy by adding the Media & Text block.

This block basically adds a two-column area. One column for images (media) and the second column for text content.

Media and text block in WordPress post editor

Simply upload your image and then add the text you want to display next to it.

Image and text block settings

After adding the image and text, you will notice more options for the block. You can make the whole block wider or full-width, you can also switch the image and text sides.

The image’s alignment will automatically adjust to the height of the text in the next column.

Image size adjusts to align vertically

How to Align Gallery Images in WordPress

WordPress post editor also comes with a block to add image galleries. This allows you to easily display images in a grid of rows and columns.

The Gallery block comes with similar alignment options in the toolbar.

You can make the entire gallery block align to the left, center, or right. You can also make it wide or change it to a full-width row.

Align gallery images in WordPress post editor

The default gallery feature in WordPress is quite good. However, if you regularly add photo galleries to your WordPress posts and pages, then consider using a photo gallery plugin like Envira Gallery.

These plugins will give you more options to align images in your photo galleries, display them in the popup, and style them differently.

How to Add Two Images Side by Side in WordPress

The easiest way to display two images side by side in a WordPress post is by adding both images in a Gallery block.

Display two images side by side in WordPress posts and pages

Simply select a 2-column layout for the gallery block to display both images next to each other. You can also check the ‘crop thumbnail’ option to make sure that both images are of the same size.

More Ways to Add and Align Images in WordPress

Apart from the image, media and text, and the gallery block, you can also use the Cover block to add a cover image.

In modern web design, cover images are used to create highly engaging content layouts. These images are used for highlighting different sections of a page.

The cover image block comes with the same alignment options as an image block. You can add text over the image and choose an overlay color from the block settings. The best part is that you can check the ‘Fixed Background’ option which creates a parallax background effect.

Adding cover image in WordPress post

To learn more about using cover images, check out our article on the difference between featured images and cover image in WordPress.

So far we have talked about adding images directly to your posts and pages. What about images from third-party sites?

The block editor makes this easy as well. It comes with embed blocks for popular social sharing sites including Instagram, Flickr, Imgur, Photobucket, and more.

For example, if you want to add an Instagram photo, then simply add the Instagram block to the post editor and enter the URL of the post you wanted to share.

Adding Instagram images in WordPress posts and pages

WordPress will automatically fetch the Instagram post and embed it for you. After that, you will be able to use the alignment options in the toolbar.

Instagram embed in WordPress

Embed blocks also allow you to easily embed videos in WordPress. After that, you can use the same options in the toolbar to align videos in WordPress.

We hope this article helped you learn how to easily add and align images in the WordPress block editor. You may also want to see our guide on how to optimize images to speed up WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link