How To Add Images To The Sidebar Using HTML
You have learnt how to customise your own sidebar. Now, you should beautify it by adding images rather than using text only. Adding images is quite different from adding texts. Here’s how you can do it easily!
The first step is to drag a new text widget to your sidebar. Now, you need to insert some HTML code here for the image. To find HTML code, you can easily Google. One of the highly recommended sites is w3schools.com.
You will see many HTML tutorials on the left side of the page. If you scroll down, you will find examples of the HTML codes and you can simply copy the text and customise it on your own. You can copy it and then paste on the text widget box. This HTML code from the site explains that the image source is from ‘HTML five gif’ and that’s pointing to a specific file.
But, you need your own image. So, you need to change the code to the image file code that you want to upload.
You will need to add a photo first. Go to Media and click Add New. Then, select the image or photo that you want to upload. After the image is uploaded, click edit. Then, you can get the file’s URL on the right side of the page.
Now get back to the widgets and replace the ‘HTML five gif’ with your image URL. So, this is where the image is uploaded on your site. Then there is ‘alternative=’ if somehow the image doesn’t appear. You can insert a text describing what the picture is. For example: ‘a man reading a book’ or ‘company store’, and so on.
Lastly, we need to adjust the width and height of the image. If you don’t change anything, the image will appear squeezed and not in the right ratio. Go back to the widgets and delete the height on the HTML code, the pixels one. Then, insert the width and the height will automatically set to the optimum size and ratio. Click Save.
Now try to refresh your webpage. The image will now be better and not squeezed. Next, you might want to move the picture to your About or Profile column.
Block the HTML code and then click Ctrl +X or command +x for Mac and paste it to your Profile box. Usually, there is text on the profile column. Refresh, and if you see that the image and the text do not have any space between, go back to the widgets. Separate the HTML and the profile text, and type
.
That’s how you can add an image to your sidebar. You can also link your image to another page. It can be a banner or ads using the image. Go to w3schools.com again and copy the example link of ‘Using an Image as a Link’ and paste it below the HTML code.
The next thing you have to do is block and cut your image source and replace it to the link below. Then, you can replace your alternative text with the link below too. Set the image width. Take note of the ‘href’ on the link. This is where you should insert the address you want to direct to.
For example, you can direct it to your About page. Type the URL. If you click on the image now, you will be directed to your About page.
The only thing that’s added is the ‘href’ here. You can also adjust the ‘href’ code instead of copying the whole HTML code. But for a newbie, it will be easier to just copy the example link from the w3schools.com. Remember that these example links are under HTML and on the submenu HTML Image.
Questions:
- What is ‘alternative=’?
- What is ‘href’?
- 3. How to fix the image ratio when it appears squeezed?