Textpattern CMS

#31 2012-11-21 02:35:01

GugUser

Member

From: Quito (Ecuador)

Registered: 2007-12-16

Posts: 1,477

Re: ack! archive article thumbnail navigation display!

It’s not about uli or me, our instructions in parts are complementary.

The problem is that for inline-elements (<a>) you can’t define precise horizontal spaces. The real horizontal spaces between your images actually are more than 5 or 6 pixels. For this reason, you have to define display: block; and float it.

Actually, the new wrapper-div has no id or class name. Give them an id or class, for example as you proposed id="thumbs".

In the CSS comment out this part:

/*
a.prev_thumb_link {
padding-right:5px;
}
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;
}
*/

And put this:

#thumbs a {
	display: block;
	width: 160px;
	float: left;
	line-height: 0;
	margin: 0 6px 6px 0;
	padding: 6px;
	border: 1px solid #ddd;
}

/* total width for four images = 720px */

#thumbs a:hover, #thumbs a:focus, #thumbs a:active {
	border-color: #999;
}

#thumbs img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

#thumbs:after {
	content: " "; 
	height: 0; 
	clear: left; 
	display: block; 
	visibility: hidden;
}

I hope this works.

You don’t made your CSS? You don’t know how to do this? If that is so, how you made your site? I don’t understand this detail.

Last edited by GugUser (2012-11-21 02:38:07)

#32 2012-11-21 12:07:56

jameslomax

Member

From: UK

Registered: 2005-05-09

Posts: 448

Website

Re: ack! archive article thumbnail navigation display!

Thank you. Other kind people built my site for me. I will respond further when I try your code…..

Last edited by jameslomax (2012-11-21 12:08:23)

---

james lomax photography

#33 2012-11-21 12:28:26

jameslomax

Member

From: UK

Registered: 2005-05-09

Posts: 448

Website

Re: ack! archive article thumbnail navigation display!

Its making four rows of three thumbnails, not three rows of four thumbnails – in Opera, Chrome, and Firefox.

---

james lomax photography

#34 2012-11-21 12:33:07

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,319

Re: ack! archive article thumbnail navigation display!

jameslomax wrote:

Its making four rows of three thumbnails, not three rows of four thumbnails – in Opera, Chrome, and Firefox.

Give the wrapper div the id “thumbs” and all will slip up!

---

_{In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links}

#35 2012-11-21 13:00:36

GugUser

Member

From: Quito (Ecuador)

Registered: 2007-12-16

Posts: 1,477

Re: ack! archive article thumbnail navigation display!

The images has padding 12px … I’m looking why.

#36 2012-11-21 13:04:21

GugUser

Member

From: Quito (Ecuador)

Registered: 2007-12-16

Posts: 1,477

Re: ack! archive article thumbnail navigation display!

Ah … please, as uli and I wrote, please give the div an ID!

Last edited by GugUser (2012-11-21 13:05:13)

#37 2012-11-21 13:24:18

jameslomax

Member

From: UK

Registered: 2005-05-09

Posts: 448

Website

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

---

james lomax photography

#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!

Yesterday

#39 2012-11-21 17:20:30

jameslomax

Member

From: UK

Registered: 2005-05-09

Posts: 448

Website

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)

---

james lomax photography

#40 2012-11-21 17:58:39

uli

Moderator

From: Cologne

Registered: 2006-08-15

Posts: 4,319

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}

#41 2012-11-21 18:35:38

jameslomax

Member

From: UK

Registered: 2005-05-09

Posts: 448

Website

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>

---

james lomax photography

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

#43 2012-11-25 12:45:54

jameslomax

Member

From: UK

Registered: 2005-05-09

Posts: 448

Website

Re: ack! archive article thumbnail navigation display!

Thank you! Yes that does look better!

---

james lomax photography

#44 2012-11-26 15:42:57

jameslomax

Member

From: UK

Registered: 2005-05-09

Posts: 448

Website

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.

---

james lomax photography

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