Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: ack! archive article thumbnail navigation display!
I don’t know how you do that – could you please show me the copy and paste code….
Offline
#38 2012-11-21 14:09:10
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
Offline
Re: ack! archive article thumbnail navigation display!
…..I did that yesterday.
The form now looks like this:
<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 12"> <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>
{Edited to add bc.
for better code display. – Uli}
Last edited by uli (2012-11-21 17:45:58)
Offline
#40 2012-11-21 17:58:39
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,315
Re: ack! archive article thumbnail navigation display!
Whenever I add id="thumbs"
to the div via Firebug all the images wrap up properly. Can’t tell the reason why this code shouldn’t produce the ID on its own. Pragmatic solution:
Remove wraptag="div" html_id="thumbs"
from the above code and add <div id="thumbs">
before that tag, and put a closing </div>
after it.
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!
Thank you it seems to have worked.
The form now likes this, is it correct? (because i don’t want problems later)
<div id="thumbs"><txp:smd_query column="*" table="textpattern" where="Posted < '?timestamp' AND Section='photos' AND Status=4 ORDER BY Posted desc LIMIT 12"> <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></div>
Offline
#42 2012-11-21 22:25:26
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
Can you try if this looks better?
#thumbs a {
display: block;
width: 160px;
float: left;
line-height: 0;
margin: 0 10px 10px 0;
padding: 6px;
border: 1px solid #ddd;
}
#thumbs a.num_4, #thumbs a.num_8, #thumbs a.num_12 {
margin-right: 0;
}
/* total width for four images = 726px */
#thumbs a:hover, #thumbs a:focus, #thumbs a:active {
border-color: #999;
-webkit-transition: border-color .3s;
-moz-transition: border-color .3s;
-o-transition: border-color .3st;
transition: border-color .3s;
}
#thumbs img {
margin: 0;
padding: 0;
border: 0 none;
}
#thumbs:after {
content: " ";
height: 0;
clear: left;
display: block;
visibility: hidden;
}
Last edited by GugUser (2012-11-21 22:25:57)
Offline
Re: ack! archive article thumbnail navigation display!
Thank you! Yes that does look better!
Offline
Re: ack! archive article thumbnail navigation display!
Hmmm when you mouse over the main photographs on my site, the red forward / back direction arrow needs to be aligned for the top. I assume this needs a simple “align top” adjustment or similar – but I don’t know how you do that. Anyone know the code and where you write it?
And the writing below the main photograph also needs center aligning, and a small gap inserted under the photograph. Many thanks.
Offline
#45 2012-11-26 17:13:18
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
The code for this part is not very good. A quick solution:
Replace in …
a.prev_photo_link:hover {
background: transparent url(http://www.jameslomax.com/images/2220.png) no-repeat 25% 50%;
}
… and …
a.next_photo_link:hover {
background: transparent url(http://www.jameslomax.com/images/2221.png) no-repeat 75% 50%;
}
… the 50% value with a pixel-value.
Offline
Re: ack! archive article thumbnail navigation display!
Thank you – yes that’s better!
Offline
#47 2012-11-26 18:43:39
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: ack! archive article thumbnail navigation display!
BTW: With the “the code for this part is not very good” I did not refer to the CSS. The solution in the CSS resolves only the visual part for the arrows. But all, the image and the text, is inside the same paragraph. So the hover-sensible parts for the arrows are extended to the bottom of the text. And the text is very close to the image.
Offline
Re: ack! archive article thumbnail navigation display!
Yes I don’t know how to change that!
Offline