So I did a thing: I wrote my first Micro.Blog plugin. 🥳 It’s nothing fancy, just another image generator but, as I was in the process of migrating the content from my old blog to here, I realized I had already created one in my Hugo instance…all I needed to do was port it over to GitHub and get it in the right format (also, documentation, mustn’t forget the documentation 🤢). Yes, I could have just changed out the Shortcode for proper HTML as part of the migration but I wanted to keep the same format I was already using…and when does a developer ever take the easy road…? 🤣

Once the repo was in place, it was a pretty easy process to move my photos to Micro.Blog (thank you MarsEdit) and the markdown code…and there you have it, easy-peasy.

Screen grab of my work on the Plugin page of Micro.blog's Plug-in page.

I have to say, it's pretty darn cool to see my work (limited as it is) on the Plug-in page. 😄

If you’re interested in the Plugin (and really, you shouldn’t be), it can be found on GitHub. If you want to use the plugin, documentation exists on GitHub or you can continue reading. 😂

Note: In the code examples below, curry brackets have been replaced with straight ones so that Micro.Blog’s Hugo instance doesn’t crash / fail / give-up.

Image Only

The only required parameter for the shortcode / plugin is src.

[[< simple-image src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg" >]]

Result:

<figure>
    <img src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg">
</figure>

Clickable Image

Including the link parameter will allow the image to be clickable.

[[< simple-image src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg" link="https://lostinhaste.com/2023/09/29/september-microblog-photo.html" >]]

Results:

<figure>
    <a href="https://lostinhaste.com/2023/09/29/september-microblog-photo.html">
        <img src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg">
    </a>
</figure>

Image with Caption / Alt

Adding text in the alt parameter will result in the generation of an image with alternative text. If the caption parameter is used, additional text will be rendered near the image, within the figure html tag.

[[< simple-image src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg" alt="View of the St. Lawrence River, with ice chunks occupying most of the surface, at night, with houses covered in snow and streets with lights at the bottom of the picture. On the upper part of the picture, across the river, lights can be seen up and down a bluff, with a few well-light buildings prominent in the cloudy night sky." caption="An icy view of lower Old Town Quebec during winter." >]]

Result:

<figure>
    <img src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg" alt="View of the St. Lawrence River, with ice chunks occupying most of the surface, at night, with houses covered in snow and streets with lights at the bottom of the picture. On the upper part of the picture, across the river, lights can be seen up and down a bluff, with a few well-light buildings prominent in the cloudy night sky.">
    <figcaption>
        <p>
            An icy view of lower Old Town Quebec during winter.
        </p> 
    </figcaption>
</figure>
View of the St. Lawrence River, with ice chunks occupying most of the surface, at night, with houses covered in snow and streets with lights at the bottom of the picture. On the upper part of the picture, across the river, lights can be seen up and down a bluff, with a few well-light buildings prominent in the cloudy night sky.

An icy view of lower Old Town Quebec during winter.

Image with Title / Caption

Adding the title parameter will generate an h4 html tag within the greater figure html tag.

[[< simple-image src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg" title="Winter in Quebec" caption="An icy view of lower Old Town Quebec during winter." >]]

Result:

<figure>
    <img src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg" alt="An icy view of lower Old Town Quebec during winter.">
    <figcaption>
        <h4>Winter in Quebec</h4>
        <p>
            An icy view of lower Old Town Quebec during winter.
        </p> 
    </figcaption>
</figure>
An icy view of lower Old Town Quebec during winter.

Winter in Quebec

An icy view of lower Old Town Quebec during winter.

Including the attr and attrlink parameters will allow for the creation of a hyperlink within the figure html tag element.

[[< simple-image src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg" attr="Original Post" attrlink="https://lostinhaste.com/2023/09/29/september-microblog-photo.html" >]]

Results:

<figure>
    <img src="https://cdn.uploads.micro.blog/8317/2023/winter-ice-and-light.jpg">
    <figcaption>
        <p>
            <a href="https://lostinhaste.com/2023/09/29/september-microblog-photo.html"> 
                Original Post
            </a> 
        </p> 
    </figcaption>
</figure>

Original Post of the photo...