Adding images to body part content using the Media Library in Orchard 1.7

Topics: General
Sep 4, 2013 at 12:13 PM
You can use the insert media item button to add images to the body content of a post or page. However it doesn't seem to give you any resizing options and there's no clear way to modify the HTML to do the resizing.

Can this be done?

I had started off by attaching a media library picker field, but the client wants more control over the placement and size of pictures on different pages than I'm able to give them with a field.
Sep 4, 2013 at 7:13 PM
Edited Sep 24, 2013 at 1:40 PM
Hi Richard,

I have appreciated using your modules in the past and hope I can help you out with one I have forked / customized to meet the needs of the new Media Library Picker. Here is a link to the source code for the Full Featured Tiny MCE Deluxe

This module exposes all of the features of Tiny MCE (one of which is an Insert/Edit image button which is nice). You can also manipulate the inserted image by dragging it's corners to resize it (if you don't want to use the button):
Image

On top of that, I have customized it the same way the TinyMce module is to show the Media Picker (if it is enabled) and the Media Library Picker (if it is enabled). One note, you shouldn't have both TinyMce and TinyMceDeluxe running at the same time, one or the other.

Look forward to hearing if this works for you.
Sep 5, 2013 at 10:39 AM
Thanks! I'll check it out.

Does it use the media library resizing stuff, or just change the image tag's dimensions?

And can you customise which TinyMCE buttons are shown? I'd like to keep things simple for the client, but I can always go and alter the source.
Sep 5, 2013 at 6:39 PM
It uses the tag's dimensions. I have been dreaming about using the "profile" part of the media library but haven't made it there yet.

You can customize the TinyMCE buttons shown BUT only in the code (no Settings yet). You just edit the orchard-tinymce.js Script - specifically, line 27 is where the plugins are referenced and lines 41 - 43 are where you actually choose to display the buttons (you can see I removed "save,newdocument,|," on line 40 as they really had no relevancy. The rest of them are quite useful.

One I just discovered is the "Insert/Edit Attributes" button, it lets you set the Id, Class, and much more. I also just upgraded it off the base to now allow you to connect a CSS file in your theme (file name in your Styles folder needs to be tiny.mce.css). By having that file, it will pull in the class names in the class dropdown list. As an example, I use bootstrap often so I have added in the ".pull-right" and ".pull-left" classes.

Hope this helps.
Sep 6, 2013 at 10:33 AM
I've been dreaming about media profile parts as well. I'd like a token that makes it easy to insert an image from the library at any size you want. Something like:
{image url: "/Blog/nice.jpg" width: 200 height: 200}
although I'm not sure that fits with the format of tokens. And it would be nice if the editor inserted these tokens rather than the HTML for images directly.
Developer
Sep 6, 2013 at 1:44 PM
Did you try the ImageEditor?
Enable the feature and you will have an Edit link.
You could try to resize the image as you want.
Sep 17, 2013 at 2:25 PM
I gave it a little ago. I liked it, but I needed something more nailed down for this client. I want to enforce consistent image sizes across the site.

So I ended up adding a drop down field with image size options. The field was hidden on display but the image template referred to it. Seems to be working quite nicely.