Tag - Images

How to Add No Right Click on WordPress Images


Do you want to stop users from stealing images on your WordPress site?

While there is no complete solution to prevent image theft on your website, there are some measures that you can take to make it a bit harder for users to save images from your website.

One such solution is to add no right-click popup to your images. You can do that in WordPress by using plugins that disable right click and make it difficult to download images from your website.

In this article, we’ll show you how to add no right-click on WordPress images and galleries. We’ll also talk about alternative approaches to discourage users from stealing images off your website.

Easily disable right-click on WordPress images

Adding No Right Click on WordPress Images

First, you need to install and activate the No Right Click Images Plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to Settings » No Right Click Images page to configure plugin settings.

No Right Click Images setings

The default options would work for most users, but you can still review and change them as needed.

The first option allows logged in WordPress users to right-click on images. ‘Disable Dragging of images’ option prevents users from dragging an image from their browser to their computer.

‘Disable Touch events’ options prevents users from using touch devices like mobile phones to download images. It is the no right-click solution for smart phones and tablets.

You can also disable gestures and context menu on Apple devices.

After reviewing the settings, don’t forget to click on the ‘Save changes’ button to store your changes.

You can now log out of WordPress and then visit your website to see the plugin in action.

Adding No Right Click on Image Galleries

The above solution works for all images on your website. However, a lot of users who want to protect their images are photographers and people sharing their work through galleries.

This is where Envira Gallery comes in. It is one of the best WordPress gallery plugin on the market and comes with a protection addon that disables right-click for your image galleries.

First thing you need to do is install and activate the Envira Gallery plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Envira Gallery » Settings page to enter your license key. You can find this information under your account on the Envira Gallery website.

Enter Envira Gallery license key

Next, you need to visit Envira Gallery » Addons page. Scroll down to the Protection addon and then click on the Install and Activate button.

Install protection addon

Now you can start creating image galleries using the Envira Gallery plugin.

Let’s create your first image gallery and enable no-right-click protection for images in that photo gallery.

First, you need to visit Envira Gallery » Add New page to create a new gallery. Provide a title for your image gallery and then upload the files you want to add to the gallery.

Creating image gallery

After that, you need to scroll down to the gallery setting section below and click on the Misc tab. From here, go to the image protection settings section.

Image protection settings

You need to check the ‘Enable Image Protection’ checkbox to disable right-click for this particular image gallery. Optionally, you can also show a popup notification when users try to use right-click.

You can now click on the publish button to save your image gallery.

Adding Your Gallery to a WordPress Post or Page

Your image gallery is ready, and you can now add it to any WordPress post or page. Simply edit the post or page where you want to add the gallery and add the Envira Gallery block to the editor.

Add Envira Gallery

After that, you need to select the image gallery you created earlier from the dropdown menu. Envira Gallery will load your image gallery with a live preview.

Gallery preview in post editor

You can now save your post and visit your website to see the no right-click feature in action. If you have enabled the popup feature then this is how it would look when a user tries to right-click on an image in the gallery.

Right click disabled popup in WordPress

Pros and Cons of Disabling Right Click on WordPress Images

The number one reason users want to add no right-click on WordPress images is to prevent website visitors from illegally using those images elsewhere.

Adding no right-click to your images makes it harder for users to download images. It also serves as a reminder to users that the website owner does not want them to download images or reuse them without permission.

However, it does not completely stop users from stealing images from your website.

A user can still download an entire web page which will also include all images on that page.

They can also use the browser’s view source or inspect tool without right-clicking. This will give access to the direct image file which they can download and save on their computer.

On the other hand, adding no right-click on images may also stop several users who may have some genuine reason to save images from your website. Some users may find it annoying and this would affect their user experience on your website.

Alternative Approaches to Discourage Image Theft on Your Website

If you don’t want to affect user experience by adding no-right-click to your WordPress images, then there are a few things you can do to discourage improper use of your work.

1. Add a Copyright Notice Below Your Images

You can add a copyright notice below your images in plain text. This serves as a deterrent without affecting user experience.

Copyright reminder text

You can do this by using Gutenberg blocks. See more details in our Gutenberg tutorial.

2. Give Users a Chance to Ask for Permission

If you want users to be able to reuse your images with your permission and conditions, then you can simply let them know. We recommend using WPForms to create a simple contact form for users to send requests.

3. Add Watermark to Your Images

You can also add watermark to your images. This will affect the quality and aesthetics of your images, but it will definitely discourage users from stealing and reusing those images.

Watermark images to discourage image theft

We hope this article helped you add no right-click on WordPress images. You may also want to see our guide on how to optimize your image SEO, and how to optimize images for web performance (without losing quality).

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 Optimize Images for Web Performance without Losing Quality


Did you know that optimizing your images before uploading to WordPress can have a huge impact on your website speed?

When starting a new blog, many beginners simply upload images without optimizing them for web. These large image files make your website slower.

You can fix this by using image optimization best practices as part of your regular blogging routine.

In this article, we will show you how to optimize your images for faster web performance without losing quality. We will also share automatic image optimization plugins for WordPress that can make your life easy.

How to Optimize Your Images in WordPress (Step by Step)

What is Image Optimization? (Optimized vs Unoptimized Images)

Image optimization is a process of saving and delivering images in the smallest possible file size without reducing the overall image quality.

While the process sounds complex, it’s actually quite easy these days. You can use one of the many image optimization plugins and tools to automatically compress images by up to 80% without any visible loss in image quality.

Here’s an example of optimized vs unoptimized image:

Optimized vs Unoptimized Images in WordPress

As you can see, when optimized properly the same image can be 75% smaller than the original without any loss in quality.

How does Image Optimization work?

In simple terms, image optimization work by using compression technology like “Lossy” and “Lossless” which helps reduce the overall file size without any noticeable loss of quality.

What does it mean to Optimize Images?

If you ever received a recommendation to optimize images by your WordPress hosting support or by a speed test tool, then all it means is that you need to reduce the file size of your images by optimizing them for web.

Why is Image Optimization Important? What are the Benefits of Image Optimization?

While there are many benefits of optimizing your images, below are the top ones that you should know:

  • Faster website speed
  • Improved SEO rankings
  • Higher overall conversion rate for sales and leads
  • Less storage and bandwidth (which can reduce hosting and CDN cost)
  • Faster website backups (also reduces cost of backup storage)

Outside of video, images are the next heaviest item on a web page. According to HTTP archive, images make up on average 21% of a total webpage’s weight.

Since we know fast websites rank higher in search engines (SEO) and have better conversions, image optimization is something that every business website must do if they want to succeed online.

Now you might be wondering how big of a difference can image optimization really make?

According to a Strangeloop study, a one-second delay in website load time can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction.

How speed affects your website

If these aren’t enough reasons to speed up your website, then you should know that search engines like Google also give preferential SEO treatment to faster loading websites.

This means that by optimizing your images for web, you can both improve website speed and boost WordPress SEO rankings.

How to Save and Optimize Images for Web Performance?

The key to successful image optimization for web performance is to find the perfect balance between lowest file size and acceptable image quality.

The three things that play a huge role in image optimization are:

  • Image file format (JPEG vs PNG vs GIF)
  • Compression (Higher compression = smaller file size)
  • Image Dimensions (height and width)

By choosing the right combination of the three, you can reduce your image size by up to 80%.

Let’s take a look at each of these in more details.

1. Image File Format

For most website owners, the only three image file formats that really matter are JPEG, PNG, and GIF. Choosing the right file type plays an important role in image optimization.

To keep things simple, you want to use JPEGs for photos or images with lots of colors, PNGs for simple images or when you need transparent images, and GIF for animated images only.

For those who don’t know the difference between each file type, PNG image format is uncompressed which means it is a higher quality image. The downside is that file sizes are much larger.

On the other hand, JPEG is a compressed file format which slightly reduces image quality in order to provide a significantly smaller file size.

Whereas GIF only uses 256 colors along with lossless compression which makes it the best choice for animated images.

On WPBeginner, we use all three image formats based on the type of image.

2. Compression

The next thing is image compression which plays a huge role in image optimization.

There are different types and levels of image compression available. The settings for each will vary depending on the image compression tool you use.

Most image editing tools like Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features.

You can also save images normally and then use a web tool like TinyPNG or JPEG Mini for easier image compression.

Although it’s a bit manual, these two methods allow you to compress images before uploading them to WordPress, and this is what we do on WPBeginner.

There are also several popular WordPress plugins like Optimole, EWWW Image Optimizer, and others that can automatically compress images when you first upload them. Many beginners and even large corporations prefer to use these image optimization plugins because it’s easy and convenient.

We will share more about these WordPress plugins later in the article.

3. Image Dimensions

Normally, when you import a photo from your phone or a digital camera, it has a very high resolution and large file dimensions (height and width).

Typically, these photos have a resolution of 300 DPI and dimensions starting from 2000 pixels and more. These high-quality photos are well-suited for print or desktop publishing. They are not suitable for websites.

Reducing file dimensions to something more reasonable can significantly decrease image file size. You can simply resize images using an image editing software on your computer.

For example, we optimized a photo with 1.8 MB original file size, 300 DPI resolution, and image dimensions of 4900×3200 pixels.

We chose jpeg format for higher compression and changed dimensions to 1200×795 pixels, and it reduced the image file size to 103 KB. That’s 94% less than the original file size.

Now that you know the three important factors in image optimization, let’s take a look at various image optimization tools for website owners.

Image Optimization Tools and Programs

As we mentioned earlier, most image editing software come with image optimization and compression settings.

Outside of the image editing software, there are also several powerful free image optimization tools that you can use to optimize images for web (with just a few clicks).

We recommend using these tools to optimize images before you upload them to WordPress, specially if you are a perfectionist.

This method helps you save disk space on your WordPress hosting account, and it guarantee the fastest image with the best quality since you manually review each image.

Adobe Photoshop

Adobe Photoshop is a premium software that comes with a feature to save images optimized for the web. Simply open your image and click on the “File » Save for Web” option.

This will open a new dialog box. On the right, you can set different image formats. For JPEG format, you will see different quality options. When you select your options, it will also show you the file size on the bottom left.

Saving images optimized for the web using Photoshop

GIMP

GIMP is a free and open source alternative to popular Adobe Photoshop. It can be used to optimize your images for the web. The downside is that it is not as easy to use as some other solutions on this list.

First, you need to open your image in GIMP and then select File » Export As option. This will bring up the save file dialog box. Give your file a new name and then click on the export button.

Export image in GIMP

This will bring up image export options. For jpeg files, you can select the compression level to reduce file size. Finally, click on the export button to save the optimized image file.

TinyPNG

TinyPNG is a free web app that uses a smart lossy compression technique to reduce the size of your PNG files. All you have to do is go to their website and upload your images (simple drag & drop).

Using TinyPNG to optimize images for WordPress

They will compress the image, and give you the download link. You can use their sister website, TinyJPG, for JPEG image compression.

They also have an extension for Adobe Photoshop which is what we use as part of our image editing process because it combines the best of TinyPNG and TinyJPG inside Photoshop.

For developers, they have an API to convert images automatically, and for beginners they have a WordPress plugin that can automatically do it for you (more on this later).

JPEG Mini

JPEGmini uses a lossless compression technology which significantly reduces the size of images without affecting their perceptual quality. You can also compare the quality of your original image and the compressed image.

JPEGMini online image compression tool

You can use their web version for free, or purchase the program for your computer. They also have a paid API to automate the process for your server.

ImageOptim

ImageOptim is a Mac utility that allows you to compress images without losing any quality by finding the best compression parameters and removing unnecessary color profiles.

ImageOptim

Windows alternative to this is Trimage.

Image Optimization Plugins for WordPress

We believe that the best way to optimize your images is by doing it before uploading them to WordPress. However, if you run a multi-author site or need an automated solution, then you can try a WordPress image compression plugin.

Below is our list of the recommended WordPress image compression plugins:

  1. Optimole – popular plugin by the team behind ThemeIsle.
  2. EWWW Image Optimizer
  3. Compress JPEG & PNG images – plugin by TinyPNG team mentioned above in the article.
  4. Imagify – plugin by the popular WP Rocket plugin team.
  5. ShortPixel Image Optimizer
  6. WP Smush
  7. reSmush.it

Using any of these WordPress image optimization plugin will help you speed up your website.

Final Thoughts and Best Practices for Image Optimization

If you’re not saving images optimized for web, then you need to start doing so now. It will make a huge difference on your site speed, and your users will thank you for it.

Not to mention, faster websites are great for SEO, and you will likely see an increase in your search engine rankings.

Outside of image optimization, the two things that will significantly help you speed up your website is using a WordPress caching plugin and using a WordPress CDN.

Alternatively, you can use a managed WordPress hosting company because they often offer both caching and CDN as part of the platform.

We hope this article helped you learn how to optimize your images in WordPress. You may also want to see our guide on how to improve your WordPress security and the best WordPress plugins for business websites.

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 Optimize Images for Web Performance without Losing Quality appeared first on WPBeginner.



Source link

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