How to Upload Pictures Inside a WordPress :3 way

he Gutenberg block editor on WordPress gives you so many features to effectively create your content with different kinds of blocks. It is very easy to use because of the drag and drop tool that allows users to create rich content without getting their hands’ dirty writing code. However, there is one issue that you may have with the listed block in Gutenberg, and that is the issue of including an image inside the list. Let’s say you are composing a list of steps and you want to include images for each stage. If you add an image block directly to your list, it will break the numbering. The sequence will begin again with the next list. This style of formatting is not only bad for readers, but it’s also bad for SEO.  

So the issue is that due to formatting issues, you will be unable to include an image block inside a list block. Even if you do so by editing the HTML code, your blocks would be broken.

Add inline image inside list block on WordPress

 In this way, we will use the line image option found in the listed block on WordPress. This is one of the simplest methods because you don’t have to physically copy and paste any code. The image would be placed inside the list’s tag on its own. However, the disadvantage is that you must manually add the alt text and adjust the image size. This step-by-step guide will teach you how to apply this method.

• Open any post in the WordPress dashboard of your website.
• Create a list by selecting List block and using the SHIFT+ENTER shortcut keys to add an image to a new line. A br> tag will be inserted to the inside of the list, creating a new line without breaking the numbering.
• Now, from the options available at the top of the List block, select the drop-down icon.
• Select the option for Insert Image.
• You may now choose to upload a new image or select one from your WordPress Media Files.
• When you add an image to a list, you will notice that the standard width is set to 150 pixels. You can make the image any size you wish or remove 150 to make it full size.

You won’t be able to directly add alt text to the photos using this method because that can only be done if the images are added as a single block. You may already know that adding alt text is important for SEO, so any image without alt text should be ignored. There is a simple workaround that you may use, and it goes like this:  

You can change the list view to HTML and then manually add the alt attribute to the tag. To do so, select Edit as HTML from the drop-down menu by clicking the three dots icon at the top of the Lists block.  

Copy the image code manually into the list block.

The second method involves first uploading the image as a new block, then going to the Code Editor and manually copying the tag into the List block. Because you will be adding the image as a block, you will be able to add alt text to it directly from the Block settings window. Here are the easy steps that will show you how to properly execute these methods –

• Create a new list using the List block in the post editor on your WordPress website.
• Then, make a new Image block so either upload an image from your device or select one from your WordPress Media Library. After you have placed the image in your post, go to the Block settings and add alt text to it.
• Now select Code Editor from the drop-down menu by clicking three dots in the top-right corner of the post editor. This will change your editor’s view to HTML format.
• Locate the position where you placed the image block and copy the whole img> tag from there. It can be found inside figure>. Make sure you don’t copy the figure> tag; otherwise, formatting issues will cause your blocks to break. Remove the image block by removing all of its code after you have copied the img> tag.
• Next, go to the List block and locate the words where you want your image to display. Try typing br> after the text (right before the closing /li>) and then paste the img> tag from the picture block. Please note that after the text, you must add br> to start a new line. 

Continue list after adding image block

This method differs greatly from the previous ones. The general premise is to place the picture block after the list and then build a new list block to continue with the remaining ones. The issue is that adding an image block to your list will cause it to lose its numbering. This can be solved by selecting the start value option, which will begin your next list with the same number as the previous one.  

Simply create a new list after adding the image block. You will find a start value option under Ordered List settings in the block settings window on the right side. Simply input the number wherever you want to start numbering your new list from, and that’s all. The advantage of this method is that you don’t have to make any manual changes to the HTML code. For your convenience, we have included a basic fake example of how the final code will appear on your web page: