Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Using class with article_image
I have a section within the website I am working on which requires an image to have two thumbnail sizes. The first I am creating using the thumbnail option of textpattern>images which works fine. The second, I am trying to create using css.
The “full size” image is either 566×379 pixels or 290×379, and the css thumbnail needs to fit into a 241×160px box including 10px padding. Using just HTML, that works like this:
<code>
.showcasethumbnail
{
height: 140px;
width: auto;
}
.241×160block
{
height: 160px;
width: 241px;
}
<p class=“241×160block”>
<img src=“http://www.epuk.org/images/125.jpg” height=“379” width=“566” alt=”“ class=“showcasethumbnail” />
</p>
</code>
When I come to write that up using article_image, the problem is that article_image accepts the attribute “style=” but not “class=”. At the moment, I have the TXP article form like this:
<code>
img.showcasethumbnail
{
height: 140px;
width: auto;
}
.241×160block
{
height: 160px;
width: 241px;
}
<div class=“241×160block”>
<txp:article_image style=“showcasethumbnail” />
</div>
</code>
but this produces the following html:
<code>
<div class=“241×160block”>
<img src=“http://www.epuk.org/images/125.jpg” height=“379” width=“566” alt=”“ style=“showcasethumbnail” />
</div>
</code>
which outputs the image at full size. What am I doing wrong ? Any help very much appreciated…
~Nick
Offline
Re: Using class with article_image
Solved – and simplified !
<code>
.showcasethumbnail img
{
height: 140px;
width: auto;
}
<div class=“showcasethumbnail”>
<txp:article_image />
</div>
</code>
~ Nick
Offline
Re: Using class with article_image
I spoke too soon….
The above works fine in Safari and Firefox, and takes any sized image, resizes the height to 140px and then resizes the width automatically keeping the same proportions. In IE, however (only have checked in Mac 5.2, but assuming is same for IE 5.x on PC) the height is set to 140px, but the width becomes the maximum width allowed by the containing block.
For example, here each of the six search result images are the full size images resized down by the css. In Safari and Firefox, the top image – which is portrait-orientation – looks as it should. In IE, however, it becomes stretched to landscape-orientation proportions, making Katsuaki-san look rather more chubby than he is in real life.
Is there any way of resizing an image with css, defining ONLY either width or height, and letting IE calculate the correctly-proportioned other side ?
~Nick
Offline
#4 2006-07-16 17:56:07
- NyteOwl
- Member
- From: Nova Scotia, Canada
- Registered: 2005-09-24
- Posts: 539
Re: Using class with article_image
Note that width: auto; will use the width of the containing block (‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’). Realize however that IE has a broken box model.
Have you tried adding thumbnail=“1” to the txp:article_image tag?
Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;
Offline
Re: Using class with article_image
NyteOwl wrote:
Note that width: auto; will use the width of the containing block (‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’).
From what I can see, this happens only in IE; the width:auto works fine for FF and Safari. That makes me think the solution for IE might be just an elusive *html hack away…
NyteOwl wrote:
Have you tried adding thumbnail=“1” to the txp:article_image tag?
Ah, if it were only that simple….we need different sized thumbnails on different pages on the website, and we’re using the thumbnail=“1” option for the other one. The other problem is the different dimensions of thumbnail depending on whether it is “upright” or “landscape”
The only other option I can see is applying different classes depending upon whether a custom field is filled or not. So different styles are applied whether it’s an “upright” or a “landscape” image; but I’d prefer to do it in CSS if possible. (Or are there any plugins I haven’t seen which allow you to set your own values for width and height in the <img> tag ?)
~Nick
Offline
#6 2006-07-16 20:44:23
- NyteOwl
- Member
- From: Nova Scotia, Canada
- Registered: 2005-09-24
- Posts: 539
Re: Using class with article_image
They look the same here in Firefox (slightly older version on this machine) and IE. Opera renders them the way you are looking for.
The behaviour of width: auto; is supposed to be the width of the enclosing container. That is to W3C specifications. Realize that IE calculates container sizes differently than everyone else. It used to resize proportionately if you just left out the second dimension attribute but I haven’t tested that behaviour in the current versions.
Is there is some reason you aren’t using the thumbnails=“1” with the txp:article_image tag?
Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;
Offline
Re: Using class with article_image
NyteOwl wrote:
They look the same here in Firefox (slightly older version on this machine) and IE. Opera renders them the way you are looking for.
Okay, that’s useful to know.
NyteOwl wrote:
Is there is some reason you aren’t using the thumbnails=“1” with the txp:article_image tag?
The full size images are around 566×379pixels, and when loaded we create a thumbnail of around 350pixels wide. However, we also need a second thumbnail size of around 210×140px. As far as I can see, TXP doesn’t have the facility to associate more than one thumbnail with an image – am I wrong ?
There’s a case to be made (for speed of loading) to create the 210×140 css thumbnail from the 350px TXP thumbnail, but unless I can figure out a way to handle both upright and landscape-orientation images within the same styles, it doesn’t seem to take me closer to a solution.
~Nick
Offline
Pages: 1