Question

I’m putting the final touch on this photographer portfolio website built with WordPress.

Here’s the development link: http://dev.manifold.ws/maudearsenault/category/fashion/ (NSFW)

I’m using post categories for the main navigation (Fashion, Beauty, Lifestyle…).
On the category page, I figured out how to have two different views of the posts: the default view shows the pictures at 600px height in a horizontal scroll layout while the alternate view (which you can access by clicking the “view all” link) displays a grid of all the pictures in small thumbnail size.

I’m using the following code to display these small thumbnails:

<?php $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
foreach( $images as $imageID => $imagePost )
echo wp_get_attachment_link($imageID, 'thumbnail', false); ?>

While it displays the thumbnails the way I want it to, I have 2 problems with this code:

1. When I click on a thumbnail, it links to the picture file. I would like the thumbnails to link either to the category page with an anchor to the parent post OR to the post page if the first link isn’t possible.

2. Right now, the thumbnail titles (or perhaps it’s the link titles) are the name of the attachment files. I would rather the title be the title of the picture that I set in WordPress.

I’ve been messing around trying to make this work, looking through the WordPress Codex but couldn’t make it work.

Any help would be appreciated.

Thanks!

-Thom

Answer 1

I had this exact issue for one of my client projects awhile back, I have an answer for you but you’re not going to like it.

All of this information is set in the backend within the media section.

To change this information just update the details for the specific image like this.

Example Image

1. Title – Text displayed as a tooltip (when a mouse is hovered over the image).

2. Alternate Text – The text displayed when the image is not available.

3. Default Caption – Image caption displayed directly underneath the image.

4. Description – Text displayed with the image in your dashboard and attachment pages on your blog.

5. Link URL – The URL/web address to which the image will be linked.

   The None button will remove the link completely.

   The File URL button will link the image to its original, full-size version.

   The Attachment Post URL button will link the image to its attachment page.

   Or you can set to whatever you want it to link to.

6. Alignment – The position of the image within your post or page. See this page on image alignment for more information.

7. Size – The size of the image.

Hope this helps!