Inserting rich media into an Alloy blog post

As far as I can see, alloy allows me to style a blog post only in means of text formatting and inserting images (which will always expand to the parent container width) and videos (you tube IDs only)
Is that correct?

Are there any workarounds to insert further media e.g. image slideshows / sliders, self hosted videos, buttons etc.?
@elixirgraphics If not, is there a chance that we will see such things in the further development?

I am asking this because I am always thinking of a blog as a chance to give a client the opportunity to add new content to his website. (In comparison to a CMS which is aiming more on editing existing content)
And it would be great if the clients were able to use more options than are currently available.

The cool thing about Alloy is it uses Markdown for its blog posts. You can insert your own HTML within a blog post. I’d be careful and not overdo it, but simple stuff is fine. Just be sure you’ve comfortable with HTML when doing so though, as I don’t offer support for problems that crop up from your own custom code.

A CMS is not just about editing existing content. A CMS also allows you to add content to a site. I’ve got this functionality in mind for the future of Alloy. That said, it is just a thought right now. I’ve done no pre-planning on it yet or even decided if I want to go down that path yet as I’m still deeeeep in the middle of some major Foundry work.

2 Likes

This is a rare talent among my clients :wink:

That would be great!

By the way, I am also looking forward to what you are currently working on in foundry … happy deep diving!

1 Like

@papart What specific additional “rich media” would you like clients to be able to add? Images and videos have you pretty well covered.

Many (though not all) services provide embed codes (i.e. a bit of HTML) which you can add to any post. So for the end user it’s simply copy/paste. A number of podcasts do this, Vimeo and YouTube do (though not needed with Alloy), SoundCloud, and so on.

2 Likes

The client came up with the idea of slideshows / sliders in case he wants to show several images. or some kind of gallery / thumbnail view would be nice.
When you insert several images in an alloy blog post, you hardly recognise the text below anymore, because every images is scaled to full width. if you insert e.g.5 images in portrait format the text below is literally “miles away” :wink:

in case you use apples notes.app you may have noticed the option (via right click) to scale images “small” or “large” (full width). I really like that and I do make use of the “small” feature very often, whenever I insert more than one image.
Could that be an option for alloy too?

This isn’t really what I would consider blog material, IMHO. This is what you’d use a CMS for.

Scaling images? Is that what you’re referring to here? You should be scaling your images in your image editing software, as well as compressing them, before ever uploading them. Alloy doing so on the backend via PHP is not going to get you results as good as if you do it yourself in your own image editing software. This is because PHP is indiscriminate in its sizing and compression. It doesn’t care how the image looks, while you and your client likely will have an opinion on the quality of the images.

I wasn´t referring to scaling in means of editing image dimensions or resolution.
I meant „scaling" in means of „displaying" mages at smaller sizes
similar to what apples notes.app offers.

I tried to showcase what I am referring to in a 15 second screen capture:

As you can see, since the images are forced to fill the container width they take almost all space as soon as you want to show more than 1 image. This is similar to an alloy blog post.

I think it would be great if there were more options to control the size in which images are displayed within an alloy blog post.

the notes.app approach is very simple, but effective. I am using notes every day as well as the “shrink” feature
You can enlarge the image in notes.app via quicklook (space bar).
In RW/Alloy the image could open in a Lightbox when its clicked.

Just my 2 cents - dream big :wink:

Unfortunately that is not how Markdown works. There’s no specific Markdown code for sizing of an image. There’s two options:

(1) Scale your image appropriately using your image editing software as I suggested. Choose the width you want them to appear on the site. (Best approach) :wink:

(2) Insert your image using an HTML image tag and specify the width and height parameters in that tag. This doesn’t make the image smaller size wise though, so you’re still serving a large image file size in a small form factor, which is not preferable.

<img src="image URL” alt=“image” style=“width:100%; height:auto;”>

You can adjust the width of the image by just changing to 80%, etc.

image

You can also float an image in a paragraph. Change the pixel width to what you would like it to be. You might also want to add a little left side padding by adding “padding-left:10px”.

1 Like

Ok, I got it.
but there are clients that can not do it that way. they would need some kind of control through the toolbar or draggable handles or something obvious like that.

thank you for your message.
indeed, in some cases it could be an option to give a client that piece of html code just to control the width in percentage. that might work in some scenarios.
but as soon as you want to control further aspects like floating/positioning/alignment, margins or padding - there is no way to let a customer do it easily. I guess this simply has to be accepted and considered beforehand.

Markdown just doesn’t do what you’re looking for natively. Like many things in life this is a tradeoff.

I am fine with that. I really love the markdown editor in alloy. It’s great and life wasn’t meant to be easy all the time :slight_smile: