Markdown … limiting the width of an image

<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Alt text" style="width: 500px; height: auto; max-width: 100%;" />

incase you need external address example

Not tried publishing this so no idea if it will work

@jbob dont think this works, I tried and it cannot find the images

Thanks Steve - I got your first example to work … will take another look tomorrow. Cooked now. Night and thanks again for all your input !!

if I use the full address to the image it works, not used markdown before except the bit I have tried with Elements, so may not understand the path

OK - will have a play with that.

Perhaps when using html within markdown, one must specify the full url ?

Still hoping for a markdown version of max image xx px

Otherwise it feels like a kludge

Thanks again

Jol

You can include raw HTML inside your Markdown file if you prefer, but when you do that, you’ll need to use the absolute path to your image.

Also, don’t link to an external Tailwind CDN, especially the development-only version shown in your snippet. Elements already includes Tailwind automatically, so you never need to add it yourself.

If you want to control the image size directly, you can use Tailwind’s arbitrary value syntax i.e. [&_img]:w-[320px]. It’s a bit harder to read, but perfectly valid. For example:

<img src="/resources/blog/highland.jpg" clt="Alt text" class="[&_img]:w-[320px] sm:[&_img]:w-full h-auto"/>

Hope that points you in the right direction :slight_smile:

1 Like

@dan not that I know much about markdown, if I dont include the cdn I cannot get tailwind to work

Elements will only include classes for Tailwind that is on the page at export. The CMS is a separate system.

Tailwind classes used in Markdown (or code files) will not be included as Elements doesn’t process those.

A better explanation on how this works (and the workaround), is available here:

so best to use css? in markdown

My conclusion is that Markdown is manageable if you just have text … but quite hard work if you have text interspaced with lots of images and links.

So I’m wondering if it’s possible to set up a more complex blog post template in the following format : bodytext1, image1, caption1, bodytext2, image2, caption2, bodytext3, image3, caption3, bodytext4, image4, caption4 etc.

Could you see this working Dan, Ben ?

I’d get a lot more control over my layout … and the markup would be just text as I think it was intended

Yes, this is one of the main drawbacks for Markdown.

You could certainly try breaking up your content to give yourself a little more control. Why not do a trial and see how it goes…

And this has been my point for over a year: Elements does not really have a solution for “articles” and nothing that matches the old Styled Text of RWC. This is clearly a stumbling block for quite a few of us.

1 Like

Closing this thread as it’s got too long and off topic, multiple times.

1 Like