amber’s links

I have been busy the past few days working on my wife’s website, I haven’t gotten much reading or posting done as a result. But the success of what I was able to do, makes it worth it. One of the things I was wanting to do for her, was to change her links page into something a little more interesting than a bulleted list of links. I saw a website recently which has a really neat grid of thumbnails, created through flicker. I really liked the visual impact of the different images and had the idea to do something like that with her links.

Well it was easier than I thought it would be—though it still took me all evening to get it working.

So what did I do? Well using the “wp_get_bookmarks” you can add modifiers, one those being the have images. That part is rather easy, within the edit links page you add the address link to the image and you add the simple “show_images=1 /*boolean yes*/”.

The harder part was figuring out how to get each image to line up horizontally and not vertically (as a result of line breaks after each link). I had emailed Jake, asking him about it, and he suggested the use of “display:inline;” and possibly “float:left;”. These were the correct things, the problem was figuring out how to get them into the code so they would work.

One the wordpress codex page there is a list of the modifiers which to use witht the bookmarks call. I had read in the WP forums that I needed to use the before & after modifiers, but the descriptions on what that is exactly & how to use them was very brief. Luckily, after searching through about 5 pages of search results I found someone who had posted their code, which included a working example of the display:inline using the before & after.

So basically the before & after tells each link (each link is created into a seperate li) to use the display:inline style. The second part is to get the li changed to p so that the style can actually work correctly.

After getting this much done, it was simply a matter of aesthetics, with padding & font size. So here is what the finished code looked like & then a screen shot of the finished design.

<?php wp_list_bookmarks('
     title_li=
     &before=
          <li style="
          display:inline;
          float:left;
          text-align:center;
          margin:8px;
          font-size: .9em;
          line-height:1em;">
     &after=
     &title_before=<p>
     &title_after=</p>
     &categorize=0
     &show_images=1
     &show_description=1
'); ?>

Here are a few more resources which I found very informative and helpful.

http://www.alistapart.com/articles/taminglists/

http://www.alistapart.com/articles/practicalcss/

http://amberperrodin.com/?page_id=54