spanezz / staticsite

Static site generator
GNU General Public License v3.0
47 stars 7 forks source link

`ssite --host` doesn't fix `<img>` urls (or they shouldn't need fixing) #70

Open eichin opened 3 months ago

eichin commented 3 months ago

(Tests with 2.4-1 as packaged on Ubuntu 24.04/noble.)

I start with an index.md with site_url: https://ssite-bug-t1.thok.org and template: blog.html (and the other basic bits from the howto for a simple blog.) Then I run ssite show --debug --host bug1.localhost to get a name to bind to (that happens to be a localhost name, at least as far as the browser is concerned.)

If I write a post1.md and then run convert -background lightblue -fill blue -font AvantGarde-Book -pointsize 72 label:post1 post1.jpg to generate a magic-image-for-post, I get <img alt='' srcset='/post1-thumbnail.jpg 128w, /post1.jpg 189w' src='/post1.jpg'></img> which are all relative, so that's fine (though neither a # nor a metadata title appear in the alt=, that's probably another ticket.

If I create a similar post2.md but with lightred.jpg as the image file, and then ![lightred](lightred.jpg) to explicitly include it (as I would when I want them in specific parts of the text, or simply to have more than one), I instead get <img alt="" src="https://ssite-bug-t1.thok.org/lightred.jpg" srcset="https://ssite-bug-t1.thok.org/lightred-thumbnail.jpg 128w, /lightred.jpg 471w"> Note that this does happen to render because the screen I'm using is wider than 471 (and the image-magick-generated image is 471x94) but the src and the rest of the srcset don't work - in fact, if I resize the browser (using inspect) down to 114 pixels wide, the image vanishes and the console shows GET https://ssite-bug-t1.thok.org/lightred-thumbnail.jpg net::ERR_NAME_NOT_RESOLVED.)

It is possible from the wording in the man page that --host isn't supposed to do rewriting at all, and is just about letting you share on a local network or something - in that case, it's not about fixing them, it's about "inline images shouldn't get site_url added to them" instead.

(For background: I'm pretty sure that what I really want is for the inline images to be class=img-fluid like they are for magic-name images, except in the above example I can't reproduce that in the index or post pages, even though the <figure ... ml-3 is getting generated.)

(Also, no additional template or .staticsite.py or settings.py, these are just defaults - but show doesn't obey those anyway since it's a Command not a SiteCommand.)

eichin commented 3 months ago

(This is a small corner of a larger possible problem with images that have EXIF width/height metadata, but I'm not sure yet - I ran into that doing updates to a published site, and when testing with ssite show some of the images came from the testing sandbox, but some of them came from the live site instead, possibly depending on window size, so I'm hoping a fix for this helps me come up with a reasonable test and/or report for the other one. Turns out I can brute force it with {: class="img-fluid" title="sundae" } in the markdown instead, which will do for now, but I'm still hoping for something higher level.)

spanezz commented 3 months ago

Thank you for the great report! I tried to do my best when I implemented srcset support, but I admit my experience with it is limited, and this could be an opportunity to reimplement it properly.

Could you sketch what should be the expected behaviour wrt image handling, and then I'll try to use it as a blueprint to redo it right?

eichin commented 3 months ago

I think the overall idea of having smaller sizes in srcset is good, but since img-fluid exists they'd mostly be about saving download time (and if I convince myself of this I'll probably pick size breakdowns that correlate more with "how much smaller the jpg files get" than screen size - I'll need to experiment more, but that's already configurable.) I guess the two details I'm most concerned with are

eichin commented 3 months ago

Also, I have a more real-world case: I have a photo-heavy blog (where I'm already forcing img-fluid with markdown "attributes") and most of my images are from a cell phone - so either they're 4000x1848 (landscape) or 1840x4000 (portrait). These render just fine on the final site where the hostname is correct, but with ssite show, only the portrait shots show up, since the landscape ones end up picking a srcset with a hostname and they're not on the live host yet. (I just went back to check the example and all of the images show up now, which briefly confused me: I'd actually published the page, so it's getting the portrait ones from the sandbox and the landscape ones from the live site.) Just to be clear, this isn't a different problem, just another consequence of the hostname problem.

eichin commented 3 months ago

(related thing I just noticed that might deserve a separate issue: [foo](foo.md) links also point to {site_url}/foo instead of the ssite show URL.)