search

AngeloStavrow / indigo

An IndieWeb-friendly custom theme for Hugo
MIT License
58 stars 33 forks source link

img.width=100% in CSS style breaks images #81

Closed strk closed 4 years ago

strk commented 4 years ago

The effects of following CSS snippet in static/css/style.css:

    img {
        width: 100%; 
    }

Break images in that it does not respect their aspect ratio when the images are tagged with explicit width and height. The CSS forces width but height remains stuck with HTML-defined height.

I guess I'm doing something wrong with HTML tags themselves, but this is a markdown obtained directly from https://github.com/SchumacherFM/wordpress-to-hugo-exporter so it's not really me :)

Beside, my images would come out pixelated, with a 100% width, so I really don't want that. What's the rationale for that 100% ? Could we just force central alignment instead ?

AngeloStavrow commented 4 years ago

Good catch, @strk — this comes from an assumption based on how I'd add an image to a post when I was putting together the theme (high-resolution image meant to span the entire reading area). We could certainly just centre the image in the article!

As a workaround for now, you can use Indigo's custom CSS feature and add the following, which should override that behaviour:

img {
  display: block;
  margin: 0 auto;
  width: unset;
}

That said, I'm still curious to know why it's giving you a weird aspect ratio. I'm not familiar with the WP exporter you linked to, do you have some sample output you could point me to?

(The CSS in general needs a lot of work.)

strk commented 4 years ago

Firefox tells me, when clicking to your custom CSS feature link (https://hello-indigo.glitch.me/post/custom-css-support/):

We can’t connect to the server at hello-indigo.glitch.me.

The weird aspect ratio is because your CSS forces the width but does not change the height, and my source file is explicit about both height and width. Changing width keeps the same height which changes apsect ratio.

strk commented 4 years ago

Following the README file I've tried adding my style to static/css/custom.css under hugo website root tree, but that file does not get loaded. Note I'm using v1.1.0 because the hugo version I'm using (v0.56) is not supported by latest version of the theme

strk commented 4 years ago

I see custom.css support was added in v1.3.2, which errors out with:

ERROR 2020/05/19 17:46:21 INDIGO theme does not support Hugo version 0.56.0. Minimum version required is 0.58.3

strk commented 4 years ago

Sorry, I see v1.2.0 also has it, and it works! https://github.com/AngeloStavrow/indigo/commit/7ca58e51b92ac03c4aa8d5e09c5def2f4390c636

AngeloStavrow commented 4 years ago

Firefox tells me, when clicking to your custom CSS feature link (https://hello-indigo.glitch.me/post/custom-css-support/):

We can’t connect to the server at hello-indigo.glitch.me.

That's interesting. It's loading normally for me right now, and I don't see any issues with Glitch's project container availability today, but The Internet can be a little weird sometimes. Is it still not connecting for you?

The weird aspect ratio is because your CSS forces the width but does not change the height, and my source file is explicit about both height and width. Changing width keeps the same height which changes apsect ratio.

This is something I didn't account for — I naïvely expected that the inline width and height on the <img> tag would override the stylesheet cascade, but it doesn't.

My feeling is that the theme should style images in the article body as:

  1. centered;
  2. using their native aspect ratio; and
  3. having a maximum width of the article body.

In other words, something like:

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

…but the problem still exists here if you're setting the height and width of an img tag on an image that's wider than the viewport, which would probably come into play regularly on mobile. I need to explore this more, but I haven't come across any elegant fixes for this infighting between the CSS and the img tag's size properties.

AngeloStavrow commented 4 years ago

And of course a minute after posting that reply, I found something that works:

img {
  display: block;
  height: 100%;
  margin: 0 auto;
  max-width: 100%;
}

See it in action in this Glitch project by clicking on Show in the upper-right, then choosing Next to The Code to open a split-view.

I'll open a PR in the coming days to fix this. You should be able to use this workaround @strk in your custom CSS file; is there something preventing you from upgrading to the latest version of Hugo?

strk commented 4 years ago

On Tue, May 19, 2020 at 11:36:05AM -0700, Angelo Stavrow wrote:

  1. having a maximum width of the article body.

I'm not sure about this point, the image may be tiny, in which case making it large would mean showing pixels

strk commented 4 years ago

Is it still not connecting for you?

Still down for me. DNS issue ?

$ host hello-indigo.glitch.me Host hello-indigo.glitch.me not found: 3(NXDOMAIN)

AngeloStavrow commented 4 years ago

On Tue, May 19, 2020 at 11:36:05AM -0700, Angelo Stavrow wrote: 3. having a maximum width of the article body. I'm not sure about this point, the image may be tiny, in which case making it large would mean showing pixels

Setting a max-width in the CSS only takes an effect if the img is larger than that value. So, if the image is 400px wide and the article is 800px wide, the image will maintain that 400px width. However, if the image is 1200px wide, then it'll be resized to fit the 800px width of the article.

Is it still not connecting for you? Still down for me. DNS issue ? $ host hello-indigo.glitch.me Host hello-indigo.glitch.me not found: 3(NXDOMAIN)

That's really interesting. Maybe an ISP issue?

AngeloStavrow commented 4 years ago

@strk Are you able to load https://hello-webpage.glitch.me in your browser?

strk commented 4 years ago

Nope, my machine can NOT resolve that hostname. 8.8.8.8 DNS server can, so it is definitely my system, will try to find out what it is

strk commented 4 years ago

It looks like these DNS servers both do not resolve hello-webpage.glitch.me:

They are nameservers assigned by Fastweb (big italian provider), so this is pretty scary...

strk commented 4 years ago

After fixing my DNS problems (changing DNS)... The 100% and display:block items won't work in here (for example): https://strk.kbt.io/blog/2013/03/08/on-the-fly-simplification-of-topologically-defined-geometries/ -- I want those 2 images to be side-by-side (display: block breaks that) and I want to avoid stretching them bigger than they are.

strk commented 4 years ago

For the record: I changed provider and your hostname (glitch.me) does not resolve again. Can it be blacklisted somehow ? I just also changed DNS resolver to 8.8.8.8 (google one), and still does not resolve!

> glitch.me
Server:         8.8.8.8
Address:        8.8.8.8#53

** server can't find glitch.me: NXDOMAIN
AngeloStavrow commented 4 years ago

Unfortunately I can't really provide support for Glitch's domain issues — I do believe that they've had reports of users in Italy being unable to access the live-app domain (*.glitch.me), but maybe they can talk to the right people at Fastweb.

AngeloStavrow commented 4 years ago

After fixing my DNS problems (changing DNS)... The 100% and display:block items won't work in here (for example): https://strk.kbt.io/blog/2013/03/08/on-the-fly-simplification-of-topologically-defined-geometries/ -- I want those 2 images to be side-by-side (display: block breaks that) and I want to avoid stretching them bigger than they are.

Try using display: inline-block instead — I think that should work!

strk commented 4 years ago

On Sun, May 24, 2020 at 11:21:28AM -0700, Angelo Stavrow wrote:

Unfortunately I can't really provide support for Glitch's domain issues — I do believe that they've had reports of users in Italy being unable to access the live-app domain (*.glitch.me), but maybe they can talk to the right people at Fastweb.

This time it's from Google resolvers (not Fastweb).

AngeloStavrow commented 4 years ago

On Sun, May 24, 2020 at 11:21:28AM -0700, Angelo Stavrow wrote: Unfortunately I can't really provide support for Glitch's domain issues — I do believe that they've had reports of users in Italy being unable to access the live-app domain (*.glitch.me), but maybe they can talk to the right people at Fastweb. This time it's from Google resolvers (not Fastweb).

Very strange, even after you flush your local DNS cache and restart your browser? If this continues to be a problem, I recommend getting in touch with Glitch through their support forums.

At any rate, that's a separate issue from the img question you asked here. Does the display: inline-block fix work for you?