Replace markdown img with shortcode?

support
1

Hi,

I have a blog, where posts are created in markdown through Forestry CMS.
They have good UX for inserting photo inside the post. The content is created by non-tech person. So instead of her working with shortcodes I would like to leave her with inserting it easy way and I change to shortcode afterwards in the background.

I want shortcode to change the whole thing to be based on rather than for the sake of responsiveness and art direction principle.

How would you approach this? Use hugo replace function? I’m pretty new to web development, so I would need some direction and help with best practice for this particular problem.

Edit:
Ok, I find that others are trying to solve this (How I Extended Markdown for Hugo), I will look further.

2

We’d have to see your site’s project to understand how Forestry is producing content. You might want to follow up with them, though, as you are modifying the workflow they are using, not one inherit in Hugo. :slight_smile:

3

The flow in forestry is short and easy, in the markdown editor I click choose image and it opens up image library where i choose one of the photos.

Once the photo is selected it will put it in the markdown in this format: ![alt](image.jpg "title")

My plan is to change it into something similar to this:

{{ $image := .Get "image" }}
{{ $alt := .Get "alt" }}
<figure>
<picture class="content-photo">
  <source media="(min-width: 1800px)" srcset="{{ $.Site.Params.cloudinary_url }}w_1800{{ $image }}"
  type="image/jpeg">
  <source media="(min-width: 1200px)" srcset="{{ $.Site.Params.cloudinary_url }}w_1200{{ $image }}"
  type="image/jpeg">
  <source media="(min-width: 900px)" srcset="{{ $.Site.Params.cloudinary_url }}w_900{{ $image }}"
  type="image/jpeg">
  <source media="(min-width: 600px)" srcset="{{ $.Site.Params.cloudinary_url }}w_600{{ $image }}"
  type="image/jpeg">
  <source srcset="{{ $.Site.Params.cloudinary_url }}w_900{{ $image }}" type="image/jpeg">
  <img src="{{ $.Site.Params.cloudinary_url }}w900{{ $image }}" type="image/jpeg" {{ if $alt }} alt="{{ $alt}}" {{ end }}>
</picture>

{{ $caption := .Get "caption" }}
{{ if $caption }} 
<figcaption>{{ $caption }}</figcaption>
{{ end }}
</figure>

What would be your suggestion to do? Is there a way to change markdown code into shortcode right after the post is published. Or rather replace the code when I try to access it as {{ .Content }}

In worst case scenario I will teach the CMS person how to insert the shortcode in the markdown.

4

I don’t use Forestry, but I’d look for another way to do that. Looking at your example, it sounds like Forestry uploads the file to a standardized location, and then you resize and serve it via CDN. If that’s the case, and Forestry doesn’t provide an alternative (other folks will likely chime in, Forestry folks abound), then you might consider uploading the image to a page bundle, and then calling it from a shortcode from the start.

5

Forestry uploads the file to a standardized location

What do you mean by standardized location. Im new and I dont know a lot about web development.

Maybe it helps you also if I explained that my forestry account is linked with cloudinary. So whenever upload an image through forestry, the image is automatically uploaded to my cloudinary account.

Ok. I see if I will have to much problems with this, I will try with putting images in page bundle.

6

I meant it literally, instead of putting some in static, some in page bundles, and maybe a different place.

As for your setup, this is a very specific setup due to your integration with the deployment tool and asset storage, but if Forestry has community forums you might look and see if they’ve shared design patterns for embedding objects into their documents. :slight_smile:

7

@klemenzagar91 check this out, maybe it’ll help your use case

https://forestry.io/blog/how-to-use-hugo-s-image-processing-with-forestry/

1 Like
8

OK. Thanks a lot. Do you recomment any other cms. How do you tackle this if you are making a page for somebody that is not used to operate with code?