Is there a preferred way to handle image resizing? #566
Replies: 1 comment
-
I also started questioning myself how to better handle images, in particular in relation to the Open Graph image and making images added to a blog post responsive. I'm not considering images related to the graphical theme as those can be generated in the best way in advance. I guess that the only way is to do it at build time, but which part of the build process is tricky. As pointed out in #509 the In #432 the two possible solutions are still valid in my opinion
My personal preference, and is the one I'm trying now, is to place the images inside the folder containing the blog post because all resources are confined and easy to spot/create for post authors. The build and what happens after is a different topic.
I also what to create responsive images out of those images and of course the problem is how to replace the image reference in the html. I'm still thinking, but I will give it a try to edit the generated html, as presented in #357 (comment) In summary my pipeline would look like
In this last step I'm not sure if place those files in the assets folder or in the folder generated for each blog post, but for sure I need to decide an option as the path must be already decided in step 1. Probably being able to integrate with the Markdown parser before the html is generated could help. |
Beta Was this translation helpful? Give feedback.
-
Context: I'm transitioning an old WordPress site over to Jigsaw. One of the things I appreciate about Wordpress is the way it automatically resizes images on upload—and give you ways to call the different sizes in the templates.
I understand Jigsaw does not offer this out of the box, so I'm looking to build something to mimic this and I'm not sure the best approach. Ideally, I'd take a source image, resize and rename it (a la file-small.jpg, file-medium.jpg and file-large.jpg). Within the template I could simply add the appropriate images to the srcset.
It seems like this could be done at build time with webpack (maybe with sharp? ) or with a php helper function using imagik. But really, I'm just not sure the best way to approach this and wondering if anyone has a similar approach to handling this. I've read through #432 and #357 and there is some good guidance in there, but (probably due to my green-ness with php and javascript) I'm still not sure of the best path forward.
Beta Was this translation helpful? Give feedback.
All reactions