images are the visual element that most often attracts the attention of site visitors, so paying attention to them and improving their placement within the site and the way they are presented to visitors will have a clear role in improving the user experience within the site.
In this article, we will discuss all matters related to adding and modifying images and improving their appearance within the WordPress site. We will also provide direct solutions to most of the problems that you may encounter while editing and publishing images.
In WordPress, there is more than one way to deal with images, modify them, and format them professionally. The most important methods for modifying images are either through the media library and the editing tools contained within it, or through the WordPress text editor tools. Let us now talk about the two methods, the tools present in each of them. .
Edit images within the media library
Through the media library in WordPress, you can manage image and multimedia files in any format you want, starting with uploading images and media files, as well as modifying them, changing their format, and many tools that you can benefit from in one place.
Below we will discuss the most popular tools that you can exploit from within the media manager, starting by uploading images to the media library
Then, after uploading the image, you can upload all the images and media files so that they can be used later and included in the various articles, pages, and elements of the site.
Basic adjustments to image information
After you upload the image, a window will appear in which you can enter the image data. Most of the time, this data is very useful for your site, whether in what the user sees in naming the images or what the search engine reads. The following is the most important of this data:
- Alternative text: You write text in this field so that the location of the image appears in the event of a programming or technical error that prevents the image from appearing on the site.
- Title: In this field, you write the title of the image, which appears in front of your site visitors when they pass the cursor over that image.
- Explanatory words: In this field, you write some explanatory words to tell search engines that this image speaks about certain words.
- Description: In this field, you write descriptive text that describes the services or things that the image suggests to site visitors. The description also helps search engines in improving the archiving of your site and internal images.
Edit the image
If you look inside the image editing box within the media manager, you will find the option (Edit more details) . If you click on this option, you will be taken to an additional interface containing the image data, and you can modify the image by clicking on (Edit Image)
as shown in the following image:
If you click on “Edit Images,” the Advanced Edits window will open for you, which contains more image editing options, such as modifying the image’s dimensions, display method, cropping, and other image editing tools.
- Tools for changing the image display direction.
You will find some options that help you change and modify the display direction of the image, such as rotating to the left, rotating to the right, flipping the image vertically, flipping it horizontally, and also cropping the image or part of the images.
- Modify the image dimensions in terms of width and height
Here you can apply changes to the image width as well as the height, in order to resize the image appropriately.
- Fill in the basic data of the image
This part is used to fill in image data such as alternative text, explanatory words, and descriptions, and it is also present in the basic tools editor that we talked about before.
As you can notice, although there are many options for editing and formatting images, they are still simple and basic options, and you can use one of the advanced image editing add-ons, which gives you more options for editing and formatting images, such as the Best image gallery add-on , which provides you with higher features.
The add-on contains dozens of options for modifying and reformatting images, has more than 200,000 active installations, and is constantly updated.
Component editor tools
Also, the media library that we explained in the previous paragraphs contains options for modifying and formatting images, and there are also many options for modifying and formatting images within the component editor that you use when adding a new page or article to the site.
Now let us discuss in some detail the most important tools found within the component editor, which can be used to deal with images specifically:
1- Add photos and media
When you enter the editor and click on the plus sign + as indicated in the image, a window will appear for you to add images and multiple elements to the content of the page or article that you are editing. This window contains elements that can be added within the content such as “separator,” “image,” and “title.” H” indicating the information of this added element.
What we are interested in now is adding images only, which can be added by selecting the “Image” component, to open for you the option to upload images within which you can click on one of those options for uploading the image to your site:
- Through ( Upload) you can upload an image directly from your computer to the site.
- Through “Media Library” : It opens the media library that contains already uploaded images, and you can select from them.
- By selecting “Insert from URL” you can place a link to an image from an external source that you want to display as it is on your site. Note that this method will not work if the external source from which you bring the link does not allow other sources to display images from its site. You can read more details about allowing or blocking external sources of images, or what is known as Hotlinking .
2. Image editing toolbar
Once you upload images, whether from your own device, from the media library, or even from a URL from an external source, the image is downloaded and displayed, and the “editing toolbar” appears directly above it, which contains many options for modifying and formatting the image, and in the following lines we talk about the most important These are the tools that you can benefit from:
- Set the image as a cover for a static text Cover
The uploaded image can be set to be a cover that appears as a background for the written text. You can do this using the steps shown in the pictures: From the toolbar, you click on the first option, which opens a window for you from which you can choose “cover”, and then the image display is converted as a cover. You write text to appear above that cover as a “virtual image.”
- Create multiple photo gallery
You can click on the “ Gallery ” option that appears in front of you. You can click on it to open the image upload box. When you choose more than one image, they will be uploaded in the form of a grouped image gallery that appears on your site in this way.
After adding the photo gallery, you can change the location of any image within the gallery, by clicking on it to reveal the “moving image arrow” through which you can move it left or right as you wish:
- Inserting an image file that can be downloaded by site visitors.
After uploading it, you can place the image on your site as a file that can be downloaded by visitors, by clicking on “File” from within the image editing window:
After that, a box will open for you in which you can write the name of the downloadable file you want to create:
Let us write the “default image” and save the page, then it will appear in front of your site visitors in this form, and when they click the “Download” button it will download easily:
- Merge image with text
If you click on “Media with Text,” a text edit box will open next to the image, so that the images and text are displayed next to each other:
- Make the image take a circular shape
From the editing tools window, you will find the “ Circular ” option, which converts the shape of the image from its default shape to a circular shape, as you can see in the image.
- Align the image within the content
The second option inside the editing toolbar is for controlling the alignment of the image within the content of your site, where you can control the alignment of the image with ease from this bar.
You will be presented with several alignment adjustment options, where you can customize the alignment to the right, left, and center. You can also choose “Wide Width” to display the image in its large dimensions, or choose “Full Width” to display the image in the full width of the screen.
- Replace existing images with another image
The “ Replace ” option is available in the editing toolbar, which enables you to replace the current image with another. As you can notice, there are 3 options for replacing the image, either by replacing it with another image from within the “Media Library”, or by “uploading” an image from your device, or perhaps From inserting an external URL from another source.
- Link the image to a link that opens when clicked
You can also link the image to a URL link that opens to visitors when they click on the image. This link can be set through the option to edit image links in the toolbar:
As you can see, you can paste the URL you want to link to the image so that it opens when you click on it, or you can choose “media file” so that the link to the same image opens in a separate window when you click on it.
- Additional options
When you click on the three dots to extract some additional options, you will find some other tools through which you can control the images easily. These tools constitute the following options as shown in the image, the most important of which are:
- Hide component settings: When you click on it, the image replays will be hidden, which appear to the left of the edit screen of the page you are on.
- Duplicate : The image will be repeated within the content in the same formats it was applied to
- Insert Before : Opens the window for you to insert another element on top of the image
- Insert After: Opens the window for you to insert another element below the image
- Edit HTML: Opens the source code of the image <img>, to edit the HTML code of the image
- Image caption
Below any image that you upload to your site, you will find a “ Write a caption ” box. Here you can write the caption for the image, which appears below the image on your site in front of visitors.
Set featured image
You can also set the featured image that appears next to the article or page title on the showcase page within your site.
To set the featured image for the article or page you are editing, you can click on the “Set article featured image” option :
A window will open for you to upload a featured image from your computer, or you may also choose an image from within the multimedia library.
How do you get exclusive images without copyright for your website?
Most images circulated on the Internet are subject to the protection of intellectual property rights that belong to the original owner or publisher of the image on the Internet. When you publish any of those images that have copyrights reserved for any other source, your site may be exposed to many copyright problems that will harm your site. .
Therefore, be careful to obtain images from reliable sources and make sure that you have the rights to reuse those images. There are some platforms that help you obtain copyright-free images that you can reuse on your site without any creative problems, and one of these sites is
- Unsplash : One of the most famous sites from which you can obtain exclusive, high-quality images and at the same time do not expose yourself to copyright problems.
- Pexels : One of the famous sites that publishes more professional photos every day, and you can use the site’s internal search engine to get any photos related to the topic you are looking for .
- Pixabay website : which has a huge database full of exclusive images that you can obtain without experiencing copyright problems.
In the end, images and media in general are among the most important visual elements on your site that attract the visitor to interact with you and enhance his interaction with the content of your site, so make sure to display the images and format them in a manner that is elegant and attractive to the user
