Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
eichin opened this issue Aug 10, 2024 · 5 comments
Open

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

eichin opened this issue Aug 10, 2024 · 5 comments

Comments

@eichin
Copy link

eichin commented Aug 10, 2024

(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
Copy link
Author

eichin commented Aug 10, 2024

(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
Copy link
Owner

spanezz commented Aug 18, 2024

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
Copy link
Author

eichin commented Aug 20, 2024

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

  • hostnames leaking in to the HTML with ssite show which should just never happen
  • I'm not sure how to control <img> generation in a theme so that I can actually specify img-fluid globally... and maybe also get the link-text into the title= attribute. (Also this doesn't need to be configurable if the code just works.)

@eichin
Copy link
Author

eichin commented Aug 20, 2024

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
Copy link
Author

eichin commented Aug 25, 2024

(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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants