How to link a lightbox thumbnail to a post instead of opening the lightbox

Question

On my website portfolio: http://smalldotdesign.com/portfolio/

I use a heavily modified version of the Swatch theme from Woo Themes.

The theme makes the thumbnails for my portfolio pieces link to the lightbox. I want the thumbnails to link to the post they belong to. (if you click the title below the thumbnail

I cannot find how to fix the coding so that this can occur.

I found the element that is the problem:

<div class="portfolio-items">
        <div id="portfolio-item-id-114" class="post-114 portfolio type-portfolio status-publish hentry group post portfolio-img clients identity web portfolio-item">
                    <div class="portfolio-image drop-shadow lifted">
            <a rel="lightbox[114]" title="" href="http://smalldotdesign.com/wp-content/uploads/2012/11/Right-Futon-Logo.001-300x300.png" class="thumb" style="height: 200px;">
                <img src="http://smalldotdesign.com/wp-content/themes/swatch/functions/thumb.php?src=http://smalldotdesign.com/wp-content/uploads/2012/11/Right-Futon-Logo.001-300x300.png&#038;w=200&#038;h=200&#038;zc=1&#038;q=90&#038;a=c" alt="" class="woo-image"  width="200"  height="200"  />            </a>
            </div>

So I know I want to change it to follow a template like

<div class="portfolio-items">
        <div id="portfolio-item-id-114" class="post-114 portfolio type-portfolio status-publish hentry group post portfolio-img clients identity web portfolio-item">
                    <div class="portfolio-image drop-shadow lifted">
            <a rel="smalldotdesign.com/postURLgoeshere" title="" href="http://smalldotdesign.com/wp-content/uploads/2012/11/Right-Futon-Logo.001-300x300.png" class="thumb" style="height: 200px;">
                <img src="http://smalldotdesign.com/wp-content/themes/swatch/functions/thumb.php?src=http://smalldotdesign.com/wp-content/uploads/2012/11/Right-Futon-Logo.001-300x300.png&#038;w=200&#038;h=200&#038;zc=1&#038;q=90&#038;a=c" alt="" class="woo-image"  width="200"  height="200"  />            </a>
            </div>

I'm not a coder... but I sort of understand it. How can this be accomplished? What file (CSS, etc) do I have to modify to fix this and where is that file? I cannot find it.

I use a Wordpress.org installation for my site. I have access to the entire server for my website hosting. What folder would I find to edit a file that changes the style template? Is there a style template? Do I need to edit a certain file every time I make a new portfolio entry?

Help would be much appreciated. Thanks!

Answer 1

The rel attribute is only an indicator for the lightbox script. The hrefattribute always link to the document which sould be opend.

So where goes what. We got two elements. One to show an image and one for linking to another document (an image is also an document!). lets start with the linking element, aka a-tag.

<a href="document-url" rel="relationship between the current document and the linked document">Linktext</a>

Now we have a plain link to a document with a clickable text. But we want an image instead of a text. We have to replace the image with the text inside the a-tag.

<a href="url" rel="description">
  <img src="image-url" rel="relationship to the current document" />
</a>

Now we have a clickable image that links to another document.

What about the lightbox?

If we want the image as clickable link to another document, we can not use the lightbox. Because the link can only do one thing: display the image in a lightbox or link to another document. The lightbox script missuse the rel attribute as indicator if the image should display in a lightbox or not. The a-tag is simply a fallback if the lightbox script isn't available (e.g. deactivated javascript).