Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: ack! archive article thumbnail navigation display!
Its the 4 horizontal thumbnails on my front page….below the main photo.
Offline
#14 2012-11-19 21:17:25
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,315
Re: ack! archive article thumbnail navigation display!
I can’t see a reason for this behaviour, no floats in use, all images exactly the same size.
Is it viable that you leave the amount at 8 or 12 images for a while?
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: ack! archive article thumbnail navigation display!
No its not viable. If I change the value to 12 for example, the result is rows of 4, 3, 3 and 2 – not three rows of 4 thumbnails. It looks very bad!
I don’t know if this a css issue or an issue with smd_query and how you use it.
Offline
#16 2012-11-19 23:11:38
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,315
Re: ack! archive article thumbnail navigation display!
Are all your images the same size and orientation? And which browser (version) did you watch the described issues in?
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
#17 2012-11-19 23:51:02
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
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).
Offline
Re: ack! archive article thumbnail navigation display!
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!
Offline
#19 2012-11-20 12:53:01
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
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.
Offline
Re: ack! archive article thumbnail navigation display!
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?
Offline
#21 2012-11-20 15:33:27
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
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 { … }.
Offline
Re: ack! archive article thumbnail navigation display!
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>
Offline
#23 2012-11-20 18:12:02
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,315
Re: ack! archive article thumbnail navigation display!
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)
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: ack! archive article thumbnail navigation display!
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.
Offline