Displaying resized images as links in WordPress


While working on a WordPress theme for a friend, I was looking for a way to display links as images rather than text. WordPress provides wp_list_bookmarks function to display links. The parameter show_images controls whether to display images or not. But my requirement was to display just the images and no text. And I wanted to resize the images rather than showing the entire picture.

WordPress provides another function get_bookmarks which can be used to controls what links we need to fetch. Together with parameters, the function can provide the solution to my problem.

The function was called in the following way:

$bookmarks = get_bookmarks('category_name=bands&limit=3&orderby=id&order=DESC');

I have a links category called “bands” and wanted to get the latest 3 links in descending order using the “id” column.

The function returns an array $bookmark which needs to be looped through to get the results.

foreach($bookmarks as $bookmark) {

echo $bookmark->link_name;

echo $bookmark->link_image;

echo clean_url($bookmark->link_url);

The final code block with the resize script (timthumb) looked like this:

<?php
 $bookmarks = get_bookmarks('category_name=bands&limit=3&orderby=id&order=DESC');
 foreach($bookmarks as $bookmark) {
?>
	<li><a title="<?php echo $bookmark->link_name; ?>" href="<?php echo clean_url($bookmark->link_url); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $bookmark->link_image; ?>&h=100&w=300&zc=1" alt="<? echo $bookmark->link_name; ?>" id=""/></a></li>
<?
 }
?>
Advertisements

2 thoughts on “Displaying resized images as links in WordPress

  1. I´m part of a group of volunteers that is starting a new scheme in our neighbourhood in Memphis. One of the community projects that we are about to initiate relatates to your blog, and therefor some of the information here is of value for us and I just wanted so say thank you for that.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s