Add new modal window, to edit image properties

[JeanMertz]

It would be nice if a double click on an image doesn't show the insert media model, but instead introduces a new modal in which the user can edit the double-clicked image.

Things like alt tag, width, height and a link for the image could be modified here. With regards to the image dimensions, I think it would be a good idea to have some kind of lock aspect ratio switch for this feature.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/371851-add-new-modal-window-to-edit-image-properties?utm_campaign=plugin&utm_content=tracker%2F134071&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F134071&utm_medium=issues&utm_source=github).

[jejacks0n]

You can edit the html.. I know it's not optimal, but in terms of a feature this is covered.

If you look in the images path I think there's still an image for an "inspector".. The idea behind this may never be realized, but it's a panel that you can open to edit any property of a given node (where your cursor is).. think firebug in terms of allowing you to set any properties on a given tag -- css, attributes etc. It's a big aspect, and there's not yet been a compelling reason to spend the time on it.. but it sounds like that's more what you're asking for. The alternative is to take over the insertMedia modal and add whatever fields you want to in the case that you're editing an image -- which would probably be the easiest way to approach the issue.

eg: on line ~19 of insertmedia.js.coffee:

# if we're editing an image prefill the information
if selection.is && image = selection.is('img')
  # adding additional form fields for editing the properties of the image
  # inject your markup for additional fields here...

and then on line ~47:

attrs = {src: @element.find('#media_image_url').val(), width: @element.find('#media_image_width').val()}

The real way to handle this is probably with something like an inspector, but this is an advanced feature -- for people who understand html considerably more than a typical content editor type person.. I've also encountered times where I don't want people to change the size of images (because they don't understand things about it), so it gets complicated.. Trying to balance advanced users/usage with keeping it dumbed down as much as possible, right?

Anyway, that's my thinking.. I'd say it's a good opportunity to try a plugin or something similar. =) I also just added some information to the wiki about doing this sort of thing.. you can take over the insertMedia modal entirely using the instructions found in the Extending Mercury wiki page. That might just be easier in this case.

[microweber]

What about using the live event of jquery to observe image click

[ghisleouf]

+1 Just having a modal opened when double clicking on image that allows you to edit alt and title attribute would such a great feature ... I don't know if it's easy to implement ...

Thanks !

[michaelkrog]

+1 Edit images(and other objects like video, audio etc) would be great if editable via a simple click on them.

[ghisleouf]

Here is how i did :

Currently, i'm just able to edit alt and title attribute ... so this a work in progress !!! :s

First, i bind a new Image event : double click

this.element.on('dblclick', function(event) {
                if (_this.previewing) return;
                event.preventDefault();
                _this.focus();
                var target = $(this);
                Mercury.modal('/bundles/bigyouthcore/cms/mercury/javascripts/templates/mercury/modals/imageconfigurator.html', { title: 'Image Attributes', fullHeight: false, handler: 'imageConfigurator',item:target });

            });

I declare my handler :

imageConfigurator

this.Mercury.modalHandlers.imageConfigurator = {
        initialize: function() {
            var _this = this;
            var target = this.options.item;

            var alt = (target.attr("alt") != undefined ) ?  target.attr("alt") :"";
            var title = (target.attr("title") != undefined ) ?  target.attr("title") :"";

            this.element.find('#media_image_title').val(title);
            this.element.find('#media_image_alt').val(alt);

            return this.element.find('form').on('submit', function(event) {
                event.preventDefault();
                _this.submitForm();
                return _this.hide();
            });
        },
        submitForm: function() {

            var target = this.options.item;
            //console.log(target.attr("alt"));
            target.attr("title", this.element.find('#media_image_title').val());
            target.attr("alt", this.element.find('#media_image_alt').val());

        }
};

I declare a new moda (/bundles/bigyouthcore/cms/mercury/javascripts/templates/mercury/modals/imageconfigurator.html )l :

<form>

    <div class="control-group">
        <label class="select optional control-label" for="media_image_title">Image title :</label>
        <div class="controls">
            <input class="string url optional" id="media_image_title" name="media[image_title]" size="50" type="text">
        </div>
    </div>

    <div class="control-group">
        <label class="select optional control-label" for="media_image_alt">Image alt :</label>
        <div class="controls">
            <input class="string url optional" id="media_image_alt" name="media[image_alt]" size="50" type="text">
        </div>
    </div>

    <input id="submit" type="submit"  value="Modify attributes" class="btn btn-primary">
</form>

Here is how i started ... i have to implement all the handler logic properly !

[coupling]

+1 on this one!

[jerefrer]

+1 !