The Scratch Pad – Images In Your Sidebars – Part 2

At the end of The Scratch Pad – Images In Your Sidebars – Part 1, I mentioned that:

When we inserted that image, I suggested you use “Alignment None”. Depending on what you need, you may want to select Left, Right or Center.

Also, we used an image that was the right size to begin with because we created it to fit. So, what happens if you have a great image already but it’s a bit to big?

 I’ll use the  Salish Sea and Equine Designs ads to explain the alignment and sizing .. or in this case, scaling.

The Salish Sea and Equine Designs ads

These ads were created exactly the same way as the Craigdarroch ad was in Part 1. The differences are:

• They are different size images.
• They both went into the Primary Sidebar area.
• Both images are aligned ‘Center’.
• Both images are scaled.

The original Salish Sea image is 300 x 186. My primary sidebar will only handle images up to 280 PX wide. So, the first step is to scale it.

1) Load the image using Add Media and insert it into your scratch pad.

2) Now click once on the image and then click the edit icon.

3) We know we are going to want to center the image (at least I did) so click on center.

 

4) Now click on Advanced Settings. To scale the image enter the ‘Width’ you want but leave the ‘Height’ blank. By leaving it blank, WordPress will scale the image and maintain the correct aspect ratio.

Now click on Update.

 

You will now have this in your scratch pad.

5) Follow the same steps you used in Part 1 to enter the link and the title text.

6) Click on your Text tab (top right hand side of your editing area) and copy this HTML ( the stuff highlighted in blue)

 

7) Now, go to Appearance / Widgets / and open the Primary Sidebar widget area.

8) Slide a Text widget in to that widget area and paste the HTML into it. You do not need to give it a title.

 

9) Save it, refresh your home page and have a peek. If you did everything right, you will see your image in the sidebar and it should link to the intended URL.

The Equine Designs ad was created exactly the same way.

Some notes on scaling:

• Scaling images ‘down’ as we did in this example can work very well if the images are not WAY too big to begin with. If they are too big, the results may not be as good as creating the right size image in the first place.
• Scaling large images down a lot will slow down page load times.
• Scaling images ‘up’ is not a great idea. They never turn out that great.

I hope this has been helpful. Best thing to do is just experiment with your scratch pad and widget areas. Worse case is you just delete the widget 🙂

Have fun!