Vote Charlie!

Patching Movable Type to insert image Markdown

Posted at age 28.

To improve the readability of the body text in my posts, I use Markdown as much as possible. When uploading and inserting images using Movable Type’s editor, the result is a jumble of image tags all on one line containing extra information I don’t need. I finally took 10 minutes to fix this, making it output Markdown instead.

Within the MT directory, I edited the file lib/MT/Asset/Image.pm. I found this code:

$text = sprintf(
    '<img alt="%s" src="%s" %s %s />',
    MT::Util::encode_html( $asset->label ),
    MT::Util::encode_html( $asset->url ),
    $dimensions, $wrap_style,
);

I don’t need the dimensions and I don’t use any text alignment styles. In addition, the existing code couldn’t output the asset descriptions. I added code to show the description if it exists, otherwise the label.

my $caption = $asset->description ? $asset->description : $asset->label;
$text = sprintf(
    "![%s](%s)\n",
    MT::Util::encode_html( $caption ),
    MT::Util::encode_html( $asset->url ),
);

For example, I was just creating the entry “First impressions of OMAX M837ZL series microscope“, and before making this change, after I inserted a bunch of images, I got this code, but all on one line:

<img alt="cheek-40x-brightfield-2.jpg" src="https://votecharlie.com/blog/2016/06/cheek-40x-\
brightfield-2.jpg" width="4096" height="3286" class="mt-image-none" style="" /><img alt="ch\
eek-40x-darkfield-2.jpg" src="https://votecharlie.com/blog/2016/06/cheek-40x-darkfield-2.jp\
g" width="4096" height="3286" class="mt-image-none" style="" /><img alt="cheek-40x-darkfiel\
d.jpg" src="/images/2016/06/cheek-40x-darkfield.jpg" width="4096" heig\
ht="3286" class="mt-image-none" style="" /><img alt="dried-cheek-omax-10x-wb2x.jpg" src="ht\
tps://votecharlie.com/blog/2016/06/dried-cheek-omax-10x-wb2x.jpg" width="4096" height="3286\
" class="mt-image-none" style="" /><img alt="strange-moss-friend.jpg" src="https://votechar\
lie.com/blog/2016/06/strange-moss-friend.jpg" width="4096" height="3286" class="mt-image-no\
ne" style="" /><img alt="maybe-tardigrade-cryptobiosis.JPG" src="https://votecharlie.com/bl\
og/2016/06/maybe-tardigrade-cryptobiosis.JPG" width="7360" height="4912" class="mt-image-no\
ne" style="" />

With the above code but before adding descriptions, I would get this Markdown style image code:

![cheek-40x-brightfield-2.jpg](/images/2016/06/cheek-40x-brightfield-2.jpg)
![cheek-40x-darkfield-2.jpg](/images/2016/06/cheek-40x-darkfield-2.jpg)
![cheek-40x-darkfield.jpg](/images/2016/06/cheek-40x-darkfield.jpg)
![dried-cheek-omax-10x-wb2x.jpg](/images/2016/06/dried-cheek-omax-10x-wb2x.jpg)
![strange-moss-friend.jpg](/images/2016/06/strange-moss-friend.jpg)
![maybe-tardigrade-cryptobiosis.JPG](https://votecharlie.com/blog/2016/06/maybe-tardigrade-cryptobiosis.JPG)

And after adding descriptions, inserting those same images yields the end result I would normally manually create:

![Human cheek cells viewed through an OMAX achromatic 40X NA0.65 160/0.17 objective lit through an OMAX dry brightfield Abbe NA1.25 condenser captured by an OMAX 14.0MP USB3.0 camera with 0.5X adapter](/images/2016/06/cheek-40x-brightfield-2.jpg)
![Human cheek cells viewed through an OMAX achromatic 40X NA0.65 160/0.17 objective lit through an OMAX dry darkfield NA0.7-0.9 condenser captured by an OMAX 14.0MP USB3.0 camera with 0.5X adapter](/images/2016/06/cheek-40x-darkfield-2.jpg)
![Human cheek cells viewed through an OMAX achromatic 40X NA0.65 160/0.17 objective lit through an OMAX dry darkfield NA0.7-0.9 condenser captured by an OMAX 14.0MP USB3.0 camera with 0.5X adapter](/images/2016/06/cheek-40x-darkfield.jpg)
![Dried, shriveled human cheek cells on a slide left out for a day viewed through an OMAX achromatic 10X NA0.25 160/0.17 objective lit through an OMAX dry brightfield Abbe NA1.25 condenser captured by an OMAX 14.0MP USB3.0 camera with 0.5X adapter](/images/2016/06/dried-cheek-omax-10x-wb2x.jpg)
![Unknown cells found near moss viewed through an OMAX achromatic 40X NA0.65 160/0.17 objective (not totally certain) lit through an OMAX dry brightfield Abbe NA1.25 condenser captured by an OMAX 14.0MP USB3.0 camera with 0.5X adapter](/images/2016/06/strange-moss-friend.jpg)
![Might be a tardigrade in cryptobiosis found near moss viewed through an OMAX achromatic 40X NA0.65 160/0.17 objective (not totally certain) lit through an OMAX dry brightfield Abbe NA1.25 condenser captured by an OMAX 14.0MP USB3.0 camera with 0.5X adapter](https://votecharlie.com/blog/2016/06/maybe-tardigrade-cryptobiosis.JPG)

Yay for code!

Ideally I would write this into a plugin, but the change is so easy modifying the core directly, and would take a lot more work for a plugin, so I opted to just make a note of what I did so I can redo it if I later upgrade. And this entry will serve as a backup of that note!