Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
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
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
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
Re: Dimensionless img via height="0" width="0" works no more?
A couple of questions.
- Why is your stylesheet served as css.php?
- 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
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
Re: Dimensionless img via height="0" width="0" works no more?
Glad it helps and nothing to apologize for, but your showcase section is distorted (now?). Probably because you have two height:auto declarations in screen.css
img {
max-width: 100%;
height: auto;
height: auto;
}instead of
img {
max-width: 100%;
height: auto;
width: auto;
}Offline
Re: Dimensionless img via height="0" width="0" works no more?
halftone wrote #336126:
I was trying to edit CSS through the Txp admin interface. Didn’t know public_html/css had an independent existence.
It depends on your theme. If the theme author hard-codes paths to your file system then Textpattern will fetch assets from there. If not, it will fetch them from the database (which is usually a fraction slower).
If you are editing the CSS in the admin interface and your theme is fetching assets from the file system, check the Save to drive box near the Save button and your changes to that asset will be stored directly to the filesystem too.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
#27 2023-12-12 20:01:55
- halftone
- Member
- Registered: 2011-12-22
- Posts: 10
Re: Dimensionless img via height="0" width="0" works no more?
@bloatware
That is odd, but my fault. I had added
/* height: auto; added by TS */ as a note for the site developer if he needs to know.
That was parsed as a comment in my browser and the img displayed just fine on PC and mobile (after clearing cache).
Apparently not seen as a comment in yours, but as a duplicate height: statement. Probably because it was within the .img {.. ..}
I have now removed it. There’s a backup copy of his screen.css anyway.
width: auto;Seemed superfluous in view of max-width: 100% but I’ll add that.
@bloke
Thanks for the enlightenment! That does make sense, and in retrospect explains a lot of bemused exasperation.
Offline
#28 2023-12-12 20:11:25
- halftone
- Member
- Registered: 2011-12-22
- Posts: 10
Re: Dimensionless img via height="0" width="0" works no more?
footnote:
@ Bloatware
Of course you are right. Adding width so the statement is
img {
max-width: 100%;
width: auto;
height: auto;
}fixes the messed-up aspect ratios of the thumbnail links to other Showcases as well. Which was a minor problem I hadn’t even looked at yet…
Offline