Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2007-11-22 16:13:26
- simsim
- Member
- Registered: 2006-05-06
- Posts: 70
<txp:article_image thumbnail="1" />
The problem when using the thumbnail="1" attribute with this tag is that it doesn’t include image dimenions in the HTML source! The weird thing is that using <txp:article_image /> does generate the image dimenions in the coressponding HTML code. In addition to the fact that not providing image dimenions prevents W3C validating, it does produce accessiblity & usability issues as well. In my case, when turning off images, the layout got borken, and even specifying dimensions through CSS doesn’t help as images have different dimensions & turing off CSS again would reinforce the problem.
I believe this should be fixed in the next version, but could anyone show us how to fix this in TXP code?
Last edited by simsim (2007-11-22 16:14:41)
Offline
Re: <txp:article_image thumbnail="1" />
prevents W3C validating, it does produce accessiblity & usability issues as well
It does validate. Only required attributes for img-tag are src and alt. Second thing, is that you won’t need to provide the width and height, they scale correctly with out it. And they should not be even used in XHTML, as you should use css for images that need height and width, but afterall, backgrounds are for those kind of things, and images scale correctly without specifing them.
In my case, when turning off images, the layout got borken, and even specifying dimensions through CSS doesn’t help as images have different dimensions & turing off CSS again would reinforce the problem.
First, you can not scale images with CSS corretly, without corresponding values, or just using one of them, ie width: 400px;
Cheers!
Offline
#3 2007-11-22 17:39:12
- simsim
- Member
- Registered: 2006-05-06
- Posts: 70
Re: <txp:article_image thumbnail="1" />
OK.. It’s good that markup validation doesn’t require width and height attributes in the img element. But still it’s very encouraged to do so. As I said the layout got broken when turning off images and/or CSS. Another benefit of determinning image dimenions is to prevent some ouccurances of elements overlapping when the browser is still downloading images. When width and height are already specificed, the brwoser preserve the space for images and doesn’t allow other elements surrounding an image from occupying its space.
First, you can not scale images with CSS corretly, without corresponding values, or just using one of them, ie width: 400px;
I wasn’t trying to scale images with CSS; actually I already said it wouldn’t work in the case of image thumbnails that have different dimensions.
So is this was left out intentionally by the devs? :)
Last edited by simsim (2007-11-22 17:43:28)
Offline
Re: <txp:article_image thumbnail="1" />
Another benefit of determinning image dimenions is to prevent some ouccurances of elements overlapping when the browser is still downloading images.
Img-tag is only for content, not for the design. Styling should be still done by CSS and classes, not with those really old attritubes. But yes, it should be good to be able to use width and height with thumbails if your using a old-kind markup.
As txp:article_image-tag will lose completely align (and style) attributes in crockery
Cheers!
Offline
Re: <txp:article_image thumbnail="1" />
simsim wrote:
So is this was left out intentionally by the devs? :)
<txp:thumbnail /> doesn’t use width and height atts, so perhaps this is true. They haven’t been added to the dev version either (the file in question is textpattern/publish/taghandlers.php).
simsim, how will your layout work with CSS disabled?
edit: Gocom, you’re way too fast :).
Last edited by jm (2007-11-22 18:00:50)
Offline
#6 2007-11-22 21:03:16
- simsim
- Member
- Registered: 2006-05-06
- Posts: 70
Re: <txp:article_image thumbnail="1" />
Gocom wrote:
Img-tag is only for content, not for the design. Styling should be still done by CSS and classes, not with those really old attritubes. But yes, it should be good to be able to use width and height with thumbails if your using a old-kind markup.
They’re content images. I’ve a news slurps article form on the front page that publishes a thumbnail of an article’s image along with the article’s excerpt.
jm worte:
simsim, how will your layout work with CSS disabled?
Unfortunately I’m still working on the site locally and didn’t upload it yet so I can’t provide live links. However, here the portions that relate to issue being discussed here:
HTML code:
<div class="newsItem">
<a rel="bookmark" href=""><img src="5t.jpg" alt="" class="newsThumb" /></a>
<div class="newsText">
<h3><a rel="bookmark" href="">Article Title</a></h3>
<p class="newsDate">
November 21 | <a href="#comment">2 Comments so far</a>
</p>
<p>Excerpt</p>
<p class="readmore"><a rel="bookmark" href="">Read full article...</a></p>
</div>
</div>CSS code:
div.newsItem {
height: 1%;
padding-bottom: 1em;
margin-bottom: 1em;
}
img.newsThumb {
float: right;
border: 1px solid #c0c0c0;
padding: 2px;
background-color: #fff;
width: 126px;
height: 95;
}
div.newsText {
overflow: auto;
}I’ve used overflow: auto on the div.newsText to prevent excerpts text from wrapping around images.
To give you the full picture, the insider form that outputs this is:
news_slurp form:
<div class="newsItem">
<txp:permlink><txp:article_image thumbnail="1" class="newsThumb" /></txp:permlink>
<div class="newsText">
<h3><txp:permlink><txp:title /></txp:permlink></h3>
<p class="newsDate">
<txp:posted /> | <txp:if_comments><a href="<txp:permlink />#comment"><txp:comments_count /> comments so far</a><txp:else />No comments yet</txp:if_comments>
</p>
<txp:if_excerpt><txp:excerpt /></txp:if_excerpt>
<p class="readmore"><txp:permlink>Read full article...</txp:permlink></p>
</div>
</div>
<div class="clear"> </div>Last edited by simsim (2007-11-22 21:08:41)
Offline
Pages: 1