cheatsheets devlog projects search

blog-shortcodes.md

Adding an Image Shortcode to my Blog

2023-01-03 2

This is going to be a very simple change to my site. I’m dumb so I’m going to keep this as simple as possible and hopefully make it better in the future. Because this is going to be just a trial to see if I like it, I’m going to keep this straighforward.

I want to embed images and videos into my blog site and currently I have manually add them in. I’m going to add another function to my blog builder that is going to go through the entire file line by line and when it finds an image short code, it will fetch the image and then embed the image into my markdown file.

#ximage https://example.com/image1.jpg

Ignore the x at the beginning of image, as that is to skip my shortcode logic. The function will simple check to see if a line starts with #image and if it does, it will download the image to the correct directory. It will then add the following snippet replacing the image line.

![sequence](/images/sequence.jpg)

This is because I use a markdown parser. I could write the image in markdown but its a bit easier to type my way rather than to be forced to use the markdown structure.

Steps

  1. Loop through all the files in a directory
  2. Loop through all the lines in a specific file
  3. Check if the line starts with #image
  4. If it starts with the image tag, then download the image (if it hasn’t been downloaded already)
  5. Save the image to a specific name, I chose to hash the url for the name
  6. Replace the image shortcode with the markdown image code
  7. Return the lines of the file so that I can then use the markdown parser library

I used chatgpt as I had a good idea of what I wanted and how the code would look and it definitely delivered. Basically a super powered autocomplete the way I’m using it. I describe what I want the function to do, in this case a download image function and then a string replace function. Both of which that I could keep a directory of snippets of and immediately generate and modify. That’s basically what I did what chatgpt as I didn’t use the code wholesale.

I also ran into an issue with chatgpt where it broke maybe under load and so I ended up having to google a bunch of things anyway. I’m on the fence with chatgpt, it blows me away but I always feel like it didn’t really save me as much time I think. I still had to do some clean up, I still needed to rework the logic a bit. I still used stackoverflow. I had a skeleton but I could find the skeleton online easily and/or I can keep a skeleton handy like I do with other languages.

I think the big thing that chatgpt is going to do is give me boilerplate code that I can muck with which is worth its weight in gold regardless. However I wonder why I’m not amazed by a snippet engine then? Is it because I’m using English to describe the function rather than having to remember the snippet shortcut?

Anyway I finished this little project very quickly!

258a2cd3c54aa1fe7f0d2bf770289844

And if the above image displays then everything is working as intended! I’m happy enough with the shortcode logic for now. If I end up not using it or not liking it, I will be deleting it as deleting things is just as important as making things.