73 Responses

  1. Pavel Ciorici
    Pavel Ciorici Published |

    It’s such an honor to be on your bookmarks list :)

    Reply
  2. Lyndi
    Lyndi Published |

    I have just used this method to show a ‘graphic blogroll’ in my sidebar and it worked like a dream. Thanks.

    Reply
  3. Thomas Norsted
    Thomas Norsted Published |

    Great article! Bookmarks was actually one of the things that i wanted to start customize on my blog – this will save me a couple of hours.

    Reply
  4. Travis
    Travis Published |

    Excellent writeup, Justin. I did something like this on my site a couple months ago = http://www.theadfeed.com/friends/

    Love the gallery format much more than the typical list.

    Reply
  5. J Mehmett
    J Mehmett Published |

    Hi Justin,

    This bookmark thing is really very powerful. Thanks for sharing these inspiring tips.

    I think I can make a portfolio page with some hacks along this technique. Can you please post another one explaining creating advanced portfolio page with jquery integrated, rating system integrated, blah blah….?

    Reply
  6. Ron
    Ron Published |

    You just saved me a bunch of time Justin. Here I was trying to code everything by hand for an idea I have, and here you go pretty much automating the process.
    I’m off to my test blog to create.

    A BIG Mahalo!

    Reply
  7. Jauhari
    Jauhari Published |

    Wonderful Tips Justin, thanks for sharing

    Reply
  8. links for 2009-01-16 « On New Media
    links for 2009-01-16 « On New Media at |
  9. Deven
    Deven Published |

    Pretty nice one justin. Time to try it out, will comment back.

    Reply
  10. Quick-Loss AcaiBurn
    Quick-Loss AcaiBurn Published |

    Thanks for sharing this, Justin. It definitely breaks up the typical “blogroll” text list and gives it some life!

    Reply
  11. Haiboss
    Haiboss Published |

    I just stopped by your blog and thought I would say hello. I like your site design. Looking forward to reading more down the road.

    Reply
  12. Ajay M
    Ajay M Published |

    Where are we using the following css:

    .bookmarks-gallery img {
    width: 120px;
    height: 120px;
    margin: 0 8px 15px 8px;
    }

    If u have a look at my book mark page at
    http://techiezone.in/cool-sites/
    It does not take the css of the image. So justin please explain how to use the css for the image?

    Reply
  13. Jai
    Jai Published |

    It seems that reveloutiontwo.com have stopped free downloads.

    Reply
  14. Steve Bruner
    Steve Bruner Published |

    You’re freakin’ brilliant! Love your blog. Thanks

    Reply
  15. My Today’s Diigo 02/03/2009 « Rif.webmemo
  16. Creating a Portfolio in WordPress | SayShea: Indiana Kentucky Web Designer
  17. Morten Brunbjerg Bech
    Morten Brunbjerg Bech Published |

    Is it possible in any way to resize the images automatically, for example with timthumb? I can’t find the handles for something like that in the wp_list_bookmarks() function.

    Anyway, thanks for sharing this great tip.

    Reply
  18. Luke Weese
    Luke Weese Published |

    I overhauled my showcase page in just over an hour, while bringing my links up to date. Perfect, simple, elegant solution. Thank you Justin!

    Reply
  19. Sourena Mohammadi
    Sourena Mohammadi Published |

    I see there is a box to enter RSS feed for the link. I wonder if there is a plugin to parse the RSS addresses entered here and show them in a page or post using short-codes. There can be short-codes for link categories or link IDs.

    Reply
  20. Martin Preiss
    Martin Preiss Published |

    Hey, this is excellent. I’m trying to do a “Showreel” Web Page, so this links point to FLV Flash Video file. Is there any way how to ADD “rel=shadowbox;player:flv” to the of the specific category? That shadowbox will show them?

    Reply
  21. cardiogirl
    cardiogirl Published |

    Have you noticed this method has increased the load time of your page? I really love the look of this and am excited to add it to my site.

    And what about those blogs that don’t have a customized image? Does WordPress use an automated graphic?

    I have my comments set to use the Monster graphics. Will that show for the blogs that don’t have an associated avatar?

    Reply
  22. Aysseline
    Aysseline Published |

    Hi Justin, I use this technique (with some jQuery) to make a credit page for a Nonprofit Organisation website :
    http://www.cat-adapei56.com/credits-et-copyrights/
    I think it’s a good way to display this type of information. Thanks

    Reply
  23. Ronald Nunez
    Ronald Nunez Published |

    This is really good and help and great for customizing sidebar, thanks for sharing really appreciate it.

    Reply
  24. nlx
    nlx Published |

    Is there a way to do the same but with post ?
    I would like to display the list of my post on the front page, as thumbs, just like what you did with bookmarks. Is it possible ?

    Reply
  25. nlx
    nlx Published |

    Would you give some tips ? I don’t know where to start… :/

    Reply
  26. findigart
    findigart Published |

    Hey there Justin,

    I read you post and I have managed to implement the basic idea however I have 2 questions:
    1. how can I make the code automatially add the text links beneath the images as well (important for SEO)
    2. I read here that someone managed to create a graphic blogroll which is very interesting – how could i go about doing this as well?

    Thanks so much for any help :-)

    Reply
  27. findigart
    findigart Published |

    Hey Justing,

    thanks for the answer. :-) concerning the graphic blogroll – i got the point. concerning SEO – where do you get this information from? cause i’ve been reading a lot about this and opinion do differ…

    oh, and by the way i’ve been meaning to ask someone about this and turned out it is you: how do you go about doing that dotted underline thingie that turns to a question mark and pops up with explanation on the phrase as you did in the case of the phrase ‘SEO’?

    thanks! :-)

    Reply
  28. lovecolors
    lovecolors Published |

    Excelent tutorial, thanks

    Reply
  29. Jenny
    Jenny Published |

    i saw this on someone else’s site and was wondering how to do it. glad i found this.

    Reply
  30. Shan
    Shan Published |

    Thanks for sharing this. I’ll try to implement this on my website.

    Reply
  31. Hetal
    Hetal Published |

    I was trying something out similar and came across your article. It’s going to be of great help but the only problem is, how could I use this if I have to resize the image (using timthumb script). I suppose, the images need to be already cropped when creating the link or can they be resize using the timthumb script? Any ideas, Justin?

    Reply
  32. Hetal
    Hetal Published |

    Got it… I used get_bookmarks() function and custom loop and using timthumb resized the images… works like a charm

    Reply
  33. PhotoPressPro » Showcase Page Update
  34. Adam
    Adam Published |

    Hi! and thanks for the great tutorial! I was wondering…could I use this technique in this way:

    Could I set up links that link inside my site. For example…could I have these links be in the right column, and then have them link to a page that has the same thumbs on the side again, but on the right there will be the image for that thumbnail..which would then lead to a post?

    For example, if you look at my site http://www.carlsonillustration.com This site is built staticly in plan html and css…and when you click on an image it opens a new page with that image…in essense, can i do your technique…make the thumbnails link so that when you click it will open the image to the right??

    I am rookie obviously.

    Thank you!

    Reply
  35. Brandveiligheid
    Brandveiligheid Published |

    And what about those blogs that don’t have a customized image? Does WordPress use an automated graphic?

    I have my comments set to use the Monster graphics. Will that show for the blogs that don’t have an associated avatar?

    Thanks

    Reply
  36. Reinar Svendsen
    Reinar Svendsen Published |

    I guess it’s never too late for a comment… As always you contribute with top notch tutorials!

    I’ve finally implemented this and created a dedicated Page for bookmarks – it really stands out this way and looks more ‘tempting’ than simple standard links.

    Reply
  37. Laura
    Laura Published |

    Justin – great article. I didn’t know you could do this. I will definitely be coming back to the to try to implement it. I’ll let you know how I get on.

    Reply
  38. Shibi Kannan
    Shibi Kannan Published |

    Justin you are the man – I have implemented a similar technique following another source. I am trying to figure to out how to automatically pull up favicon images for the links in the bookmarks so there is no need to manually input images for each link. If the website doesn’t have a favicon then we can setup some default image. Maybe you can develop a plugin too like the Blogroll Favicon plugin but better customization.

    Reply
  39. Dewley
    Dewley Published |

    Yo Justin, thats the first time ive visited your blog! and i must say im really impressed! nice tuts and plugins. and i´ll try it on my blog (the image gallery with wordpress bookmars) thx ;)

    Reply
  40. Mike
    Mike Published |

    Fantastic. Thank you for all the info. I am just about to start a wordpress site and this will come in handy. I will be back if i need more info.

    Cheers

    Reply
  41. Luis Gimenez
    Luis Gimenez Published |

    Excellent. Appreciate this alot!

    Reply
  42. Enfants
    Enfants Published |

    Simple, quick, efficient and most important good looking!
    I’ll tweak some of my blogs with this trick ;) That’s a great application of your work!

    Reply
  43. Andri
    Andri Published |

    Humm… i love to try this… but i am still confuse with the code… any other simple methods for newbie like me?

    Reply
  44. Mode
    Mode Published |

    Very very interesting ! It’s so different from the classical blogroll text list… and much more “sexy” :)

    Congratz !

    Reply
  45. Justin
    Justin Published |

    Hey Justin

    I’m using your idea/code for a theme I’m developing, and it works perfect in every browser, except, of course, IE6. The images aren’t aligning properly – probably because the float:left property, but I don’t know for sure. Any advice on how to properly align the images horizontally that will suit IE6?

    Thanks!

    Reply
  46. Debbie
    Debbie Published |

    Hi Justin…I am a Word Press newbie and am trying to redesign my web site and set up a portfolio of my web design work. I couldn’t find any gallery plugins in WP that allowed you to link your thumbs to an actual website, but then found your blog :) However, I am having trouble getting the bookmarked images from the sidebar over to my Home page. I modified the index.php template and added your PHP code listed above in the Content division, then applied that modified template to my Home page, but nothing is showing up. The link and category show up just in the side bar, so its probably the way I set up the page template. Do you have any ideas on this?

    Reply
  47. Curtis
    Curtis Published |

    Could you possibly show how to create a bookmark gallery as you did above in a single post (as opposed to in a sidebar or page)? Can’t get the same results in a Post as I did in the sidebar.

    Thank you!

    Reply
  48. Superrefman
    Superrefman Published |

    Excellent. Appreciate this alot!

    Thx :)

    Reply
  49. letsnurture
    letsnurture Published |

    hey.. i was also trying to add gallery in new post.. i found one simple solution is .. that add multiple images in the same post.. once you have multiple images .. then gallery will create automatically (check out right side tab when you add 3rd image in same post)…

    there are better solutions available but currently i am okay with it.. i hope it helps..

    Reply
  50. Joakim Kristiansen
    Joakim Kristiansen Published |

    Is there any way to do this without page template?

    I want to show a partnerlist with images in the middle of the site content, so..

    Reply
  51. Present Tensed / rasml.org
    Present Tensed / rasml.org at |
  52. Cindy
    Cindy Published |

    I love this – it’s exactly what I was looking for, thanks so much! I’ve got it all working but I was wondering how I’d go about tweaking the code to make it work even better for me. I’ve got a bunch of images and I don’t really want to display them all at one time. Would it be possible to add a bunch of links, then use the array to randomly choose say 12 of them to display every time the page is reloaded? I’m a PHP noob but I know there’s an array_rand function but I have no idea how to impliment it – or any idea how to limit the gallery to just show 12 pics even if I could get that part to work. ;) Thanks again for this tutorial!!!

    Reply
    1. Cindy
      Cindy Published |

      To reply to my own comment….I figured out how to do this on my own but wanted to post in case anyone else is interested. I added the parameter “limit” and set it to the # of pics I wanted to display, and set the “orderby” parameter to rand. Easy!

      Reply
  53. chris
    chris Published |

    Hey
    Can anyone help me get started with the css? I wants to get rid of the category name and the have the images align next to each other, 3 in a row and 9 images for example. How can I get rid of the little arrows next to each image.
    thanks

    Reply
  54. Jenny
    Jenny Published |

    woo! i made mah link page! http://oh.so-very.me/site/blogroll

    hehe thanks for this tutorial you are mah hero!

    Reply
  55. Nickshor
    Nickshor Published |

    How can we display the Bookmarks Links with website snapshots using BM Shots plugin?
    Anyone try that? It will make the WP Links really useful…

    BM Shots (by binarymoon ) is a plugin that makes use of WordPress api for automatically creating screenshots of your website.

    Reply
  56. Jim Edwards
    Jim Edwards Published |

    Fantastic info…. I was looking for a way to display links to upcoming events on a website (most of which don’t have a corresponding post.) This method worked perfectly and I was able to embed it into my jquery responsive image slider.
    The site is still early in development, but here’s a still shot of the end product using your method… Thanks a ton!

    http://cl.ly/3F0Z1d1b3P2M193M2d06

    Reply
  57. Sebastian
    Sebastian Published |

    Hi Justin, I have a Real Estate website built on wordpress and I was wondering if in your tutorial about building a gallery view of bookmarks can be addes the bookmark name and description and still be grid view, you have a great site…..

    Reply
  58. yoonmi
    yoonmi Published |

    This would be a great plug in ;)

    Reply
  59. jhewitt
    jhewitt Published |

    Hey Justin. Great tutorial! One thing I don’t quite get. I am trying to display the links+images for a particular link category (“topsponsors”) on the footer of all my sites pages, except for one page that will need to display all links+images from the same category as the footer, plus one other category (“2013sponsors”) in the body of one specific page. So, I added the function to functions.php and inserted the call to it from my global footer. I also created a separate template to display the “2013sponsors” category links+images. That works. The trouble is, that the footer also brings in ALL the other categories and not just the “topsponsors” links. This produces way too many links and their associated images. That is more along the lines of what I want on the page that displays two specific link categories (topsponsors AND 2013sponsors). A sponsor can be both a “2013sponsor” and a “topsponsor” I checked the id for the categories and I have that right. It seems like I need to have two separate functions in my functions.php or add some page logic. Any ideas?

    Reply
    1. jhewitt
      jhewitt Published |

      Figured it out. I had a typo in one of my arguments. Sorry to bother.

      Reply
  60. Frank Gordan
    Frank Gordan Published |

    This is really cool page.

    Thanks for another awesome post! I love the tips and tutorial you gave and I’m sure

    they are very helpful to your readers who aren’t already taking advantage of this really magnificant option.

    Thank you!

    Reply
  61. Showcase Page Update - PhotoPressPro:The Blog

Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.

css.php