Thumbnails on category pages (More...)

[Mark Brookes]

Hello,

On earlier threads I learned how to add a thumbnail to the category pages, and even how to make it a clickable link

(Like this in ... /templates/Ocean/link-display.tpl
replace line 1 with

<tr>
{if $config.thumbshot}
<td>
<div class="preview">
<a href="{$link.url}" id="l{$link.id}" target="_blank"><img width="111" height="87" src="http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r={$link.url}" alt="" /></a>
</div>
</td>
{/if}

Now I would like to change it so the the thumbnail only displays if the link is a featured or partner or sponsored link.

I managed that by

{if $config.thumbshot}
<td>
<div class="preview">


{if $link.featured AND $config.featured_links}
<a href="{$link.url}" id="l{$link.id}" target="_blank"><img width="111" height="87" src="http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r={$link.url}" alt="" /></a>


{elseif $link.partner AND $config.partner_links}
<a href="{$link.url}" id="l{$link.id}" target="_blank"><img width="111" height="87" src="http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r={$link.url}" alt="" /></a>


{elseif $link.sponsored AND $config.sponsored_links}
<a href="{$link.url}" id="l{$link.id}" target="_blank"><img width="111" height="87" src="http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r={$link.url}" alt="" /></a>


{else}
<a href="<img width="111" height="87" src="http://www.finespeeches.com/wedding-resources-TEST/blank.jpg"></a>
{/if}

BUT I can't get rid of the the box which says "no Preview Picture"

No doubt my attempts are the wrong way to try to do this :) but can someone tell me the right way, please.

Regards
mark

[Sergey Ten]

Hello Mark!

It is so good :)

About the box which says "no Preview Picture". Just open that link http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r=www.esyndicat1.com I think you will understand.

[Mark Brookes]

Hello Sergey,

Thanks for your reply, I'm afraid I did not understand what the link meant. Yes, I was getting a image like that for Ordinary-Links, but I was trying to arrange for there to be no thumbnail at all for ordinary-links (or for it to be blank)

More problems ... Today when I revisited my test directory I was no longer getting the "no Preview Picture" image for ordinary-links, instead a proper thumbnail is being displayed. During my experimentation yesterday I must have made a further mistake. :(

I attach a picture of what the links display currently looks like (attachment 1)
There are 2 problems:
1. The thumbnail for special-links are repeating.
2. Ordinary-links are displaying thumbnails, but I am trying to stop that.

attachment 2, shows what I am aiming for.

My attempted code (in the earlier message) is clearly not getting it right. Are you able to help me?

Thanks
Mark

[John Turner]

Hi Mark,

Here solution on how hide 'No preview'
open your '../templates/{YOUR TEMPLATE}/css/style.css'
*** find following code

div.preview
{
background-image: url('../img/no-preview.gif');
background-repeat: no-repeat;
background-position: top left;
border: 1px solid #ccc;
height: 90px;
width: 120px;
}


*** replace with following code

div.preview
{
border: 1px solid #ccc;
height: 90px;
width: 120px;
}


Hope it helps.

[Mark Brookes]

Hello John,

Thanks .. as usual :)


A little tweek,
by changing the css line in your change above

from:
border: 1px solid #ccc;

to:-
border: 0px solid #ccc;

I also get rid of the grey square-border for ordinary-links


Regards
Mark

[Mark Brookes]

Ooops!:ooi:


Oh Dear .... my lovely new link-display layout is not so clever as I thought:-

<tr><td valign="top" colspan="2" class="link {$link.status}"{if $link.featured AND $config.featured_highlight AND $config.featured_links} style="font-size: large; padding: 10px 10px 10PX 0; background-color: {$config.featured_highlight}"{/if}{if $link.partner AND $config.partner_highlight AND $config.partner_links} style="font-size: large; padding: 10px 10px 10PX 0; background-color: {$config.partner_highlight}"{/if}{if $link.sponsored AND $config.sponsored_highlight AND $config.sponsored_links} style="font-size: large; padding: 10px 10px 10PX 0; background-color: {$config.sponsored_highlight}"{/if}>

{if $config.thumbshot}



{if $link.featured AND $config.featured_links}
<a href="{$link.url}" id="l{$link.id}" target="_blank"><img width="111" height="87" align="left" Hspace="10" src="http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r={$link.url}" alt="" /></a>
{/if}

{if $link.partner AND $config.partner_links}
<a href="{$link.url}" id="l{$link.id}" target="_blank"><img width="111" height="87" align="left" Hspace="10" src="http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r={$link.url}" alt="" /></a>
{/if}

{if $link.sponsored AND $config.sponsored_links}
<a href="{$link.url}" id="l{$link.id}" target="_blank"><img width="111" height="87" align="left" Hspace="10" src="http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r={$link.url}" alt="" /></a>
{/if}

{/if}
<br>

This does a nice job if inserting an image when it is a 'special' link, and therefore also showing no image when it is an 'ordinary' links.


But as I have found, and clever programmes probably could forsee ... If I have a link which has Two, (or more) "link-Relationship-Status" flags, then I get TWO (or more) Thumbnails

How FunnY - but not planned :)

Can someone tell me the proper way to code so that thumbnails only appear if it is a special link, but only ONCE.


Regards
Mark