Welcome, guest!

Feel free to read the blog, browse for themes, or join the club.

Bookmarks Template, add Image

  1. Hi, Justin.

    I am aware of the tutorial on your blog for how to create a bookmarks page using only images. It is great and does look stunning.

    http://justintadlock.com/archives/2009/01/09/creating-an-image-gallery-with-wordpress-bookmarks

    Currently, I am using your bookmarks template as is (Hybrid).

    What I would like is something in between what the template does and what the bookmarks image gallery tutorial offers: I would like to add thumbnail images to the current list of bookmarks, and keep the name (linked) along with the description.

    I hope I can figure out the styling myself. What I'd like to know is how to modify bookmarks.php to call the image associated with each bookmark.

    Is there an easy solution? Thanks.

  2. You must be a logged-in exclusive member to view this reply.

  3. You must be a logged-in exclusive member to view this reply.

  4. Thanks, I'll play around with this.

    Probably not until tomorrow or late this evening. Then I'll let you know how I fare.

  5. I can't get any of that to work. :(

    The page loads, but no bookmark list at all. The content area is empty.

    What I've done for now is taken the current code in bookmarks.php and changed the false to true for'show_images'.

    <?php
    	$args = array(
    		'title_li' => false,
    		'title_before' => '<h2>',
    		'title_after' => '</h2>',
    		'category_before' => false,
    		'category_after' => false,
    		'categorize' => true,
    		'show_description' => true,
    		'between' => '<br />',
    		'show_images' => true,
    		'show_rating' => false,
    		);
    ?>
    		<?php wp_list_bookmarks( $args ); ?>

    Like you said, this turns the title off. I could probably make do with this.

    I'd really like your second suggestion to work, though. Would it totally replace the first code you mentioned, or be added in addition to it? (not counting what is in between the <div> tags)

    I mean, would this:

    <?php $bookmarks = get_bookmarks( array( 'category' => 33 ) ); ?>
    
    <?php foreach ( $bookmarks as $bookmark ) : ?>

    replace this:

    <?php $args = array(
    	'category' => 33,
    	'order' => 'ASC',
    	'orderby' => 'name',
    	'categorize' => false,
    	'title_li' => false,
    	'before' => false,
    	'after' => false,
    	'show_images' => true,
    	'show_description' => true,
    	'category_before' => false,
    	'category_after' => false,
    ); ?>

    ? The way I tried it, I tried one or the other, not both. But neither of them generated any content.

    Did you intend for the argument/array list to be different from what is in bookmarks.php now?

    And one more thing, I want to keep the links categorized. Here's my bookmarks page now:

    http://gnowfglins.com/resources/

    All I want to do is have an image with each link/title. Scroll down the page. One item so far has an image added.

    If this is a big headache for you, I don't mind having to shelve it.

  6. You must be a logged-in exclusive member to view this reply.

  7. Hmm...

    Well, what I was doing was customizing bookmarks.php but dropping it into my child theme. I did this to keep Hybrid pristine for future upgrades. Whether I use page.php or bookmarks.php, you do advise that I should keep it in my child theme, right? Is there a reason not have bookmarks.php in my child theme?

    No, I didn't change the category ID. :( Missed that part. I was assuming the function would automatically list the categories like bookmarks.php does now. But I don't have to have that. I have a finite number of link categories and can easily do what you're saying.

  8. I'm getting it now... Made a separate template called resources.php, put it in my child theme, and when I plug in the right categories... voila~ there is content.

    Now I need to make it look pretty and complete. Thanks, Justin.

  9. A question:

    What should I do so that if there is no image, Wordpress doesn't show an empty space with a border (how I have images styled)?

  10. How about some kind of default image placeholder?

  11. Never mind my question.

    I will always have images for certain categories (Recommended Books, Recommended Products, Recommended Merchants). So for those categories, I called the images.

    For the other categories, I will usually not have images, so I didn't call them.

    Working out!

    Here's my tweaked bookmarks page; I would love feedback on styling, etc. (From anyone!)

    http://gnowfglins.com/resources

  12. @ SlipN -- thanks for the suggestion.

  13. You must be a logged-in exclusive member to view this reply.

  14. I'm not a big fan of overwriting templates, really. I think it's easier keeping track of what's part of the child theme vs. what's part of the parent theme when you create a custom template with a different name. If find it's easier to just grab page.php, drop in the Template Name: Example, and create something custom.

    I see your point and I agree. That's what I ended up doing and I'm glad.

    Thank you for the image check code. I will keep it in mind, just in case I do something different in the future.

    Thanks for all your help.

  15. Hey Wardeh,

    I'm using the bookmark technique to create a portfolio page.

    I'm having a problem with the names wrapping when I generate a second line of images within the same link category.

    For example, in my first category I have four images which display perfectly across the entry, and names centered perfectly under each.

    In the second category I have six images, and the names move to the end of the last image.

    Here's a test page: http://wild-type.com/main/projects

    How did you get the link names to "stick" with the image?

  16. I'm sorry I didn't see this until just now... :( I forgot to subscribe to this thread's RSS.

    I see what you're asking, but I don't know how to help you, other than to show you my code.

    Here's what is in my custom page template resources.php for one link category. The whole gallery's div is called resources and this link category's div is called foods.

    <div class="resources">
    
    <div id="foods">
    
    <h2><a name="foods">Foods</h2>
    
    <?php $bookmarks = get_bookmarks( array( 'category' => 534 ) ); ?>
    
    <?php foreach ( $bookmarks as $bookmark ) : ?>
    
    <p><a href="<?php echo $bookmark->link_url; ?>"><img class="aligncenter" src="<?php echo $bookmark->link_image; ?>" title="<?php echo $bookmark->link_description; ?>" /></a>
    <a title="<?php echo $bookmark->link_description; ?>" href="<?php echo $bookmark->link_url; ?>"><?php echo $bookmark->link_name; ?></a></p>
    
    <?php endforeach; ?>
    
    </div>
    
    </div>

    Each bookmark gets its own paragraph and for each bookmark, these items are displayed in order - the (linked) image and then the (linked) bookmark name.

    Then here is my CSS styling, which may or may not work for you.

    .resources a, .resources a:hover, .resources a:visited {
    font-size:.9em;
    }
    
    .resources h2 {
    background:#D4F3C3 none repeat scroll 0 0;
    border:1px solid #CCCCCC;
    padding:5px;
    font-size:25px;
    }
    
    .resources img {
    width:75px;
    border:none;
    padding:5px;
    }
    
    #foods p {
    display:inline-table;
    padding:0 5px 10px;
    text-align:center;
    width: 93px;
    }
  17. And just should say that I have multiple link categories displayed on my resources page, so I repeat the html/php for each category, changing the category ID to correspond to which one I want displayed.

  18. Thanks you so much for providing this...and your page rocks...and so does your site and that includes content.

  19. Thank you. :)

  20. I wanted to come back and thank you because your method worked for me! Yay! Thanks so much!

  21. Really? That's great. Can I see? :)

    Edit: I did just see, using your site link in the other thread. Looks great! I'm glad it worked for you.

Reply

You must log in to post.

Limited Access

If you have an account, please take a moment to log in.

Non-exclusive members have limited access to the support forums.

To enjoy the full range of support, sign up for an exclusive membership in the theme club.

Support Forums

  • Bliss Theme (202 posts)
  • Hybrid Theme (17,034 posts)
  • Options Theme (10,322 posts)
  • Structure Theme (2,624 posts)
  • Visionary Theme (767 posts)
  • bbPress Themes (293 posts)
  • WordPress Plugins (1,617 posts)
  • General Discussion (3,979 posts)