Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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!

share|improve this question
    
Try to learn the very basics of html. Than you will see that rel="..." defines not the target of the link. This is done by href="...". Your href points to the image, not to the post. –  Ralf912 Nov 28 '12 at 23:01
    
I'd believe you, except when I click on the element, it links to the lightbox object under "rel" so what does rel do? You did not help with the question. –  Andrew Nov 30 '12 at 18:35
    
This needs a longer answer... –  Ralf912 Dec 1 '12 at 4:51
add comment

1 Answer

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).

share|improve this answer
    
Thank you for the help. I've previously been able to configure it to use the thumbnail image as a link. But the link connected to the image its self (in its uploads directory) What I still need help with is the LOCATION of the file that needs to be edited. I found the code you see from a view source but I cannot find where the file is that must be edited. –  Andrew Dec 4 '12 at 3:39
    
That answer will be hard to provide unless someone happens to have a copy of your particular theme. What I do when I need to find the source of some code is use my text editor to search an entire folder (the theme folder) for a particular phrase.... CSS classes work well. I'd probably try searching for "portfolio-items" and see what files that appears in. I predict you will also need to remove the rel="lightbox" to stop the lightbox (and maybe even remove that script entirely) from firing. –  helgatheviking Feb 1 '13 at 4:51
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.