Jekyll: Simplify posting images to a post
When writing Markdown posts in Jekyll, and we want to include images in our posts. However, we want to simplify the process of posting images to a post. This post discusses how to do that.
About
- Can start paste of an image from the clipboard into a Jekyll post
- Suggest use Snipping Tool or Print Screen to copy an image to the clipboard.
- Image is resized to a specified width (px) and saved to /media with a timestamped filename.
- Image size is adjusted when rendered in smaller screen such as phone so that it is full screen width without impacting text area width.
- Prompts for image name and width (px)
- Stores the modified image in /media.
- Liquid code for displaying image in a post is then generated
- and copied to the clipboard for pasting into the post.
- Needs /_includes/image.html in /_includes for this to work.
- By default image is placed in /media and referenced there. You can change this by using the -imageFolder parameter to specify a different folder.
View files from here: -
- paste-image.ps1 …the script.
- image.html …called from the above script.
Comment
When writing blog posts about coding, often want to capture a small part of the screen and comment on it. This script allows you to do that quickly and easily, without having to manually resize the image or write the HTML code for displaying it. It also ensures that the image is displayed correctly on smaller screens, which is important for mobile users.
Previously had written scripts for doing parts of this but now you can do it all in one hit!
Footnote
I have now noticed that when authoring these pages and I start to place anything that looks like an image it auto-generates and inserts the liquid code!
| Topic | Subtopic | |
| < Prev: | M365Image | Using AI to remove background from an image |
| This Category Links | ||
| Category: | Web Sites Index: | Web Sites |
