Fun With Markdown
If you recall last week I got my website up and running, and eventually figured out how to get it to automatically update daily. Well since then I have it now updating twice daily to capture any new blog posts between update times. Now that it's online I'm in the stage of optimizing it and just making content updates.
To that end, my pages are messy. They combine both HTML tags and markdown. I would much prefer it to be ALL markdown, but until last night I couldn't get image markdown tags to work (which is done the same way as here on Bear: ). For days powershell was spitting back error messages at me, but some how last night I got it to work, so I committed that change finally.
But my next problem stemmed from the fact that I couldn't style my images when posting them this way. My <IMG> tags had classes assigned for certain things - so how would I style them without HTML tags? I figured someone found a way around this at some point, because I can't be the only person to want to do this. While I brute-forced an image to the height and width I wanted1, I found this more elegant solution:
https://dzone.com/articles/how-to-style-images-with-markdown
To save you a few clicks, it boils down to assigning a tag to the image URL:
![A fancy image](https://fancy.com/image.jpg#thumbnail "Title text, if you want it."
Then, in your CSS file, add the styling you want:
img[src*="#thumbnail"] {
width: 20%;
height: 20%;
}
So that's what I applied to my "Podcasts" page, because I wanted the images to appear a certain way. But this process also made me realize a few things - namely that you can apply attributes to images with markdown. I'm going to go back and edit a few posts to bring their sizes down to something more reasonable. Or try it out. I haven't actually tested this.
Reply via email
Or if you prefer, find me on Mastodon!
I resized the file in Paint and replaced it. Brute force.↩