ack! archive article thumbnail navigation display!

uli · 2012-11-19 23:11:38

Are all your images the same size and orientation? And which browser (version) did you watch the described issues in?

GugUser · 2012-11-19 23:51:02

The problem is display: inline; for the a-element. I recommend the following solution:

Wrap the 4, 8 or 12 images with a cleared div. Define for the a-element width, display: block;, float and margin-right instead of padding-right.

I think this should work.

In addition, your code is not valid. In XHTML, paragraphs can not be inside an a-element (how you do in the definition list).

jameslomax · 2012-11-20 10:18:39

I’m sorry GugUser but I don’t understand technical instructions.

If you have time – could you give me the exact code, so I can just copy and paste it where it needs to be?

Many thanks!

GugUser · 2012-11-20 12:53:01

It’s simple: Put the code for the thumbnails inside a div and give the div a class or id name. Then make the changes in the CSS, as I wrote above.

jameslomax · 2012-11-20 15:21:22

Simple for you my friend, not me! Is this correct for the first part, inserting a div and calling it “thumbs”:

div#thumbs a.prev_thumb_link {
padding-right:6px;
}
a.prev_thumb_link.num_2 {
padding-right:5px;
}

a.prev_thumb_link.num_4 {
padding-right:0px;
}

a.prev_thumb_link:last-child {
padding-right: 0;
}
a.prev_thumb_link img {
padding: 6px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

a.prev_thumb_link:hover img {
border: 1px solid #999;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}

- does the div have to be close somewhere?

GugUser · 2012-11-20 15:33:27

For the first step you must include the div in the code for your page or form, where is the code for the thumbnails. Then in the CSS you give the roles for #thumbs a { … }.

jameslomax · 2012-11-20 15:42:23

OK heres the form:

<txp:smd_query column=”*” table=“textpattern” where=“Posted < ‘?timestamp’ AND Section=‘photos’ AND Status=4 ORDER BY Posted desc LIMIT 8”> <a href=”<txp:permlink id=”{ID}” />” class=“prev_thumb_link num_{smd_thisrow}” title=“Permanent link to “<txp:category name=”{Category1}” title=“1” />: {Title}””> {Excerpt} </a>
</txp:smd_query>

I’m guessing – but my guess is this:

div#thumbs*<txp:smd_query column=”” table=“textpattern” where=“Posted < ‘?timestamp’ AND Section=‘photos’ AND Status=4 ORDER BY Posted desc LIMIT 8”> <a href=”<txp:permlink id=”{ID}” />” class=“prev_thumb_link num_{smd_thisrow}” title=“Permanent link to “<txp:category name=”{Category1}” title=“1” />: {Title}””> {Excerpt} </a>
</txp:smd_query>

uli · 2012-11-20 18:12:02

What you put before the tag would be output literally as it’s code for CSS that doesn’t belong there. You just need to add wraptag="div" html_id="thumbs" to the smd_query tag, like

<txp:smd_query wraptag="div" html_id="thumbs" column="*" table="textpattern" where="Posted < '?timestamp' AND Section='photos' AND Status=4 ORDER BY Posted desc LIMIT 8"> <a href="<txp:permlink id="{ID}" />" class="prev_thumb_link num_{smd_thisrow}" title="Permanent link to “<txp:category name="{Category1}" title="1" />: {Title}”"> {Excerpt} </a>
</txp:smd_query>

smd_query offers the usual class/break/htm_id attributes, so I used them for entering the necessary div/ID stuff.
You could also put opening/closing tags before and after the smd tag, but would end up with a pair of empty tags in case the query yielded no result.

Last edited by uli (2012-11-20 23:03:33)

jameslomax · 2012-11-20 21:23:54

Thanks – I don’t understand it but it seems to be working.

BUT – using Opera and Firefox, if I set the value for 12 thumbnails I get the same problem. Rows of 4, 3, 3 and 2 not 4, 4, and 4.

It works in Chrome – but not Opera and Firefox.

uli · 2012-11-20 21:50:53

On line 374 of your photos stylesheet, change the padding-right value for a.prev_thumb_link from 6 to 5px, it’s a very tight situation there that’s caused by any misalignment of image edges I don’t see the reason for.

jameslomax · 2012-11-20 22:07:40

No its still not working – I’ve left it at 12 thumbnails so you can see the problem in Opera and Firefox

Also the “permanent link to” text roll over is broken

Last edited by jameslomax (2012-11-20 22:30:05)

uli · 2012-11-20 22:46:09

jameslomax wrote:

No its still not working

And the value is still at 6px.

Also the “permanent link to” text roll over is broken

Copy the code from my post again, I fixed the curly quotes it needs.

Last edited by uli (2012-11-20 23:05:48)

jameslomax · 2012-11-20 23:19:01

Yes that’s corrected the “permanent link” issue!

No I changed the 6px to 5px….

GugUser · 2012-11-20 23:19:02

For the correct horizontal space in all browsers between the a-elements you have to set for this elements display: block; and width and float: left; and clear the wrap div, so as I wrote yesterday.

Last edited by GugUser (2012-11-20 23:19:56)

jameslomax · 2012-11-21 00:19:41

I can’t judge this. All I can do is trust that people are correct, and try what they tell me to do.

Can you provide me with the copy and paste code for what you’re advising Gug?

And does it mean I will have to change Uli’s advice?

Textpattern CMS

Textpattern CMS support forum

#16 2012-11-19 23:11:38

Re: ack! archive article thumbnail navigation display!

#17 2012-11-19 23:51:02

Re: ack! archive article thumbnail navigation display!

#18 2012-11-20 10:18:39

Re: ack! archive article thumbnail navigation display!

#19 2012-11-20 12:53:01

Re: ack! archive article thumbnail navigation display!

#20 2012-11-20 15:21:22

Re: ack! archive article thumbnail navigation display!

#21 2012-11-20 15:33:27

Re: ack! archive article thumbnail navigation display!

#22 2012-11-20 15:42:23

Re: ack! archive article thumbnail navigation display!

#23 2012-11-20 18:12:02

Re: ack! archive article thumbnail navigation display!

#24 2012-11-20 21:23:54

Re: ack! archive article thumbnail navigation display!

#25 2012-11-20 21:50:53

Re: ack! archive article thumbnail navigation display!

#26 2012-11-20 22:07:40

Re: ack! archive article thumbnail navigation display!

#27 2012-11-20 22:46:09

Re: ack! archive article thumbnail navigation display!

#28 2012-11-20 23:19:01

Re: ack! archive article thumbnail navigation display!

#29 2012-11-20 23:19:02

Re: ack! archive article thumbnail navigation display!

#30 2012-11-21 00:19:41

Re: ack! archive article thumbnail navigation display!

Board footer