Dimensionless img via height="0" width="0" works no more?

gaekwad · 2022-05-19 11:09:21

etc wrote #333356:

4.9 is profiled ‘imagery’,

…and also, hopefully, moving on from old-ass PHP if / when we can decide on a plan.

phiw13 · 2022-05-19 12:10:56

etc wrote #333356:

4.9 is profiled ‘imagery’, but I’m null in this stuff, so cf is appealing…

My wishlist is CF first and second.

halftone · 2023-12-06 20:55:21

Sorry to ask, but this appears to be the only thread on the internet that deals with this problem.
I’ve spent 3 days on trying to sort out this problem! I’m far from expert at Txp (I inherited our site) but recently upgraded our voluntary site from 4.3 to 4.8.8, because we were using ancient Php 5.7something.

Now we have a ton of (314) articles that no longer display properly. The aspect ratio gets stretched to fit the native height of the image. We were successfully using

[code]<txp:article_image height=“0” width=“0” />[/code]

I’ve tried implementing the workaround as follows (it’s not a thumbnail, like the example)…
[code]
<if::article_image>
<txp:images>
<a href=”<txp:permlink />” <txp:image width=“0” height=“0” /></a>
</txp:images>
</if::article_image>
[/code]

CSS that controls this:
[code]
.article_image_wrapper img {
margin-left: 0;
margin-right: 0;
max-width: 100%;
height: auto;
}
[/code]

You can see how the images should display at the list of Showcases
http://www.epuk.org/showcase

but if you click on a title to the full article the image aspect ratio is screwed
eg http://www.epuk.org/showcase/henna-by-michael-amplett

TL/DR it still displays at correct width but native height, even with height: auto; in CSS

Is txp:image broken as well as txp:article_image? Any help much appreciated!

Last edited by halftone (2023-12-06 20:56:17)

etc · 2023-12-06 22:02:46

I think your media rules do not apply here:

@media only screen and (min-width: 768px) and (max-width: 1024px)

halftone · 2023-12-07 18:09:08

You appear to be right: @media now deprecated. I hadn’t looked at the responsive stuff, because it did work with 4.3 and still works with 4.8.8 on screens and mobiles aside from this single issue.

I’m unconvinced this is /the/ issue, but I know far too little about Txp and responsive CSS. My apologies for intruding on a devs conversation.

Thanks / Tony

etc · 2023-12-08 08:15:45

No worries. Yes, it still works on tablets because the corresponding rules

.article_image_wrapper  img {
margin-left: 0;
margin-right: 0;
max-width: 100%; 
max-height: 100%; 
height: auto;
width:auto;
}

belong to

<!-- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
#top_ads .ad_space {
...
} -->

section. Note that it is invalid now, because  are html comments, not css. Also, the opening closing {} pairs do not match.

I’m not really a css person, but many on this forum can help.

halftone · 2023-12-11 14:55:10

Thanks for help. I believe I added the <!— —> to try and understand the effect of the @media stuff, which W3C checker flags as invalid due to deprecated use of (min-device-width) and (max-device-width). My mistake.

As mentioned, the txp:article_image problem that this thread identifies is likely what stopped the image rendering correctly when I upgraded Txp from 4.3 to 4.8.8. However the workaround conditional upthread doesn’t work, using txp:image. The image renders but with the same distortion as txp:article_image.

At this point I am out of my depth with both Txp and the CSS, so have asked the person who developed the site to take a look.

etc · 2023-12-11 17:02:56

Replacing

img {
  max-width: 100%; }

with

img {
  max-width: 100%;
  height: auto;
}

in screen.css file should suffice, at least for the page mentioned above.

halftone · 2023-12-12 13:09:42

Sadly it doesn’t. That’s how I ended up here in the first place ;-)

EG:
http://www.epuk.org/showcase/henna-by-michael-amplett

Page HTML

<div class="article_image_wrapper">
<a href="http://www.instagram.com/atthewoodchoppersball">
<img src="http://www.epuk.org/images/1004.jpg" alt="" width="1102" height="725" />
</a>

CSS in Overrides

.article_image_wrapper  img {
margin-left: 0;
margin-right: 0;
max-width: 100%; 
height: auto;
}

Height: auto is ignored. The image displays at correctly scaled width, 614 but height is not scaled and stays at height=725. == Distorted aspect ratio.
This happens in multiple different browsers and devices.

The same happens whether I use txp:article_image or txp:image via the workaround mentioned upthread. Was fine in 4.3 (without needing height: auto;)

colak · 2023-12-12 15:08:51

A couple of questions.

Why is your stylesheet served as css.php?
I cannot see a style for .article_image_wrapper

etc · 2023-12-12 16:50:55

halftone wrote #336123:

Sadly it doesn’t. That’s how I ended up here in the first place ;-)

You are looking in a wrong place, it is not in overrides, but in www.epuk.org/_css/screen.css. If you have no access to this file, replace

<!-- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
#top_ads .ad_space {
height: 86px;
width: 330px;
} -->

#top_ads .ad_space img {
max-width: 100%;
}
.article_image_wrapper  img {
margin-left: 0;
margin-right: 0;
max-width: 100%; 
max-height: 100%; 
height: auto;
width:auto;
}
#content_wrapper #content {
padding-right: 0;
width: 100%;
}
#content_wrapper #aside {
clear: both;
width: 100%;
}

#aside .box {
float: left;
margin-left: 20px;
width: 360px;
}
#aside .fb_box {
margin-left: 10px;
width: 343px;
}
}

with

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
#top_ads .ad_space {
height: 86px;
width: 330px;
}

#top_ads .ad_space img {
max-width: 100%;
}
#content_wrapper #content {
padding-right: 0;
width: 100%;
}
#content_wrapper #aside {
clear: both;
width: 100%;
}

#aside .box {
float: left;
margin-left: 20px;
width: 360px;
}
#aside .fb_box {
margin-left: 10px;
width: 343px;
}
}
.article_image_wrapper  img {
margin-left: 0;
margin-right: 0;
max-width: 100%; 
max-height: 100%; 
height: auto;
width:auto;
}

at the end of overrides. I’m not sure that’s all, but it’s not really a txp issue.

halftone · 2023-12-12 17:48:51

Aha! Mr Bloatware, thank you for your patience and help. Now that I know that screen.css exists and where, your post #20 was spot on.

It now works correctly! :-)

Did I mention that I have a kindergarten grasp on Txp and no mental map of how it works? especially how the CSS is structured… I was trying to edit CSS through the Txp admin interface. Didn’t know public_html/css had an independent existence.

I can’t answer post #22’s question about css.php. It’s how the pro designer left it. Maybe some addon? There are many installed.

My apologies again, and gratitude

Tony

Textpattern CMS

Textpattern CMS support forum

#13 2022-05-19 11:09:21

Re: Dimensionless img via height="0" width="0" works no more?

etc wrote #333356:

#14 2022-05-19 12:10:56

Re: Dimensionless img via height="0" width="0" works no more?

etc wrote #333356:

#15 2023-12-06 20:55:21

Re: Dimensionless img via height="0" width="0" works no more?

#16 2023-12-06 22:02:46

Re: Dimensionless img via height="0" width="0" works no more?

#17 2023-12-07 18:09:08

Re: Dimensionless img via height="0" width="0" works no more?

#18 2023-12-08 08:15:45

Re: Dimensionless img via height="0" width="0" works no more?

#19 2023-12-11 14:55:10

Re: Dimensionless img via height="0" width="0" works no more?

#20 2023-12-11 17:02:56

Re: Dimensionless img via height="0" width="0" works no more?

#21 2023-12-12 13:09:42

Re: Dimensionless img via height="0" width="0" works no more?

Page HTML

CSS in Overrides

#22 2023-12-12 15:08:51

Re: Dimensionless img via height="0" width="0" works no more?

#23 2023-12-12 16:50:55

Re: Dimensionless img via height="0" width="0" works no more?

halftone wrote #336123:

#24 2023-12-12 17:48:51

Re: Dimensionless img via height="0" width="0" works no more?

It now works correctly! :-)

Board footer