Thesis Theme Tutorial: Image Line Up

How to make a list of images line up horizontally, in other words – How to make an Image Line-Up.

You don’t have to be a CSI fan.

Turn an ordinary bulleted list into an image line up. Great for social bookmarking applets at the end of posts and in sidebars.

1.  Make or obtain some images you want to line up in a row

You can get code for social bookmarking icons from various sites, let your Google search do the work for you.

Get something that looks good on your site or make some images for yourself. I’m thinking about small camellion eye balls for Thesis Theme HQ! [I'll get round to it one day].

2.  Create a list of links, with some words to introduce them

Use a text editor like WordPad.

• Wait for the final code from Step 3 onwards

This is just an example of what your code might look like before you style it.

<p>You will love these image links</p>
<ul><li><a href="url"><img src="url where image lives" title="name of link" alt="brief word description"></a></li>
<li>
<a href="url"><img src="url where image lives" title="name of link" alt="brief word description"></a></li>
<li>
<a href="url"><img src="url where image lives" title="name of link" alt="brief word description"></a></li>
<li>
<a href="url"><img src="url where image lives" title="name of link" alt="brief word description"></a></li>
</ul>

Unless you use the HTML and CSS in this tutorial – that is by adding classes – a list of links will look  like this…

You can make your images line up horizontally using classes and some CSS, so they look like…

3.  Grab your HTML styled code

Copy and paste this HTML code to modify for your own purpose. Notice that is has classes.

Code for lining up four images in a row

HTML with class attributes – I recommend you copy and paste this code to modify your own urls and descriptions.

<p class="introwords">WORDS YOU WANT BEFORE THE IMAGES</p><ul>
<li class="minipiclineup"><a href="http://thesisthemehq.com/wp-content/themes/thesis/images/ChamEye.gif">
<img src="http://thesisthemehq.com/wp-content/themes/thesis/images/ChamEye.gif" title="NAME" alt="WORDS"></a></li>
<li class="minipiclineup"><a href="http://thesisthemehq.com/wp-content/themes/thesis/images/ChamEye.gif">
<img src="http://thesisthemehq.com/wp-content/themes/thesis/images/ChamEye.gif" title="NAME" alt="WORDS"></a></li>
<li class="minipiclineup"><a href="http://thesisthemehq.com/wp-content/themes/thesis/images/ChamEye.gif">
<img src="http://thesisthemehq.com/wp-content/themes/thesis/images/ChamEye.gif" title="NAME" alt="WORDS"></a></li>
<li class="minipiclineup"><a href="http://thesisthemehq.com/wp-content/themes/thesis/images/ChamEye.gif">
<img src="http://thesisthemehq.com/wp-content/themes/thesis/images/ChamEye.gif" title="NAME" alt="WORDS"></a></li>

4. Install and activate Thesis OpenHook

Thesis OpenHook is a fantastic plugin that allows you to control the hooks in the Thesis Theme without knowing php and what hooks are where.

• If you are not a coder – you need this. It will save you so much pain and frustration.

5.  Copy and paste the HTML where you want it to appear

For example “After Post” in Thesis OpenHook means at the bottom of posts, before comments.

Thesis OpenHook "After Content" area

6.  Grab your code for some CSS styling

Copy and paste this CSS code to modify for your own purpose.

/*line up images instead of bullet list by default*/
.custom .minipiclineup {list-style: none; float: left; }
.custom p.introwords {font-size: 1.5em; margin-bottom: .5em; }

After the HTML and CSS

I went ahead with my camelion eye balls, that I use as a favicon and bullet.

You can see from my example above that I used images with no white space around them.

If you want an effect like the billiard balls above, make sure your images have the required amount of white space around them.

• Of course, if your background is not white, you will want to add space around it that is the same colour of your site.

BONUS TUTORIAL

Add a right aligned image on the same line as your image line-up

Look at the image below – I have highlighted the areas where the words and images were inserted on the page.

If you want another image on the same line but spaced (aligned) to the right, you will need to add two extra lines of code into the relevant boxes in Thesis OpenHook.

You can add the following lines of code directly below the HTML and CSS code lines provided above or you can use the code by itself to add an image to the right of another area.

Add the html

<li class="totheright"><img src="http://thesisthemehq.com/wp-content/themes/thesis/images/ChamEye.gif" alt="WORDS"></li></ul>

Add the CSS

.custom .totheright {list-style: none; float: right; margin-top: -2.5em;}

Thanks for the inspiration

Thanks goes to Thesis Hacker for the inspiration for this article.

Interested in how I taught myself this?

I thought I would share with you how I learnt to do this and many other coding hack tips and tricks in my article Confessions of a Self Taught WordPress Hacker.