Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

gaekwad
Server grease monkey
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 4,215
GitHub

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

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.

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,138
Website

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

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

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

halftone
Member
Registered: 2011-12-22
Posts: 10

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

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)

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,132
Website GitHub

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

I think your media rules do not apply here:

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

Offline

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

halftone
Member
Registered: 2011-12-22
Posts: 10

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

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

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,132
Website GitHub

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

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.

Offline

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

halftone
Member
Registered: 2011-12-22
Posts: 10

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

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.

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,132
Website GitHub

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

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.

Offline

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

halftone
Member
Registered: 2011-12-22
Posts: 10

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

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

Offline

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

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,064
Website GitHub Mastodon Twitter

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

A couple of questions.

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

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

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

etc
Developer
Registered: 2010-11-11
Posts: 5,132
Website GitHub

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

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.

Offline

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

halftone
Member
Registered: 2011-12-22
Posts: 10

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

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

Offline

Board footer

Powered by FluxBB