Adding a class to Image Media Type?

Question

Under Setting->Media Types "Image" defined. I'm using Bootstrap, and really want to add the class class="img-responsive" to it by default.

I've looked at the generic properties for that Media Type but can't seem to find the one where I can modify class.

Adding a image in a content page now results in:

<img style="width: 281.25px; height:500px;" src="/media/1004/foo.jpg?width=281.25&amp;height=500" alt="foo.jpg" rel="1087" />

Where I realy want:

<img class="img-responsive" src="/media/1004/foo.jpg?width=281.25&amp;height=500" alt="foo.jpg" rel="1087" />

Adding that class manually makes everything look nice, so having it by default would be nice :)

Answer 1

Got it. In my case i added class:'img-responsive' in ~/Umbraco/Js/umbraco.service.js . I'm using Umbraco7

In this block:

/**
        * @ngdoc method
        * @name umbraco.services.tinyMceService#createMediaPicker
        * @methodOf umbraco.services.tinyMceService
        *
        * @description
        * Creates the umbrco insert media tinymce plugin
        *
        * @param {Object} editor the TinyMCE editor instance        
        * @param {Object} $scope the current controller scope
        */
        createMediaPicker: function (editor) {
            editor.addButton('umbmediapicker', {
                icon: 'custom icon-picture',
                tooltip: 'Media Picker',
                onclick: function () {

                    var selectedElm = editor.selection.getNode(),
                        currentTarget;


                    if(selectedElm.nodeName === 'IMG'){
                        var img = $(selectedElm);
                        currentTarget = {
                            altText: img.attr("alt"),
                            url: img.attr("src"),
                            id: img.attr("rel")
                        };
                    }

                    userService.getCurrentUser().then(function(userData) {
                        dialogService.mediaPicker({
                            currentTarget: currentTarget,
                            onlyImages: true,
                            showDetails: true,
                            startNodeId: userData.startMediaId,
                            callback: function (img) {

                                if (img) {

                                    var data = {
                                        alt: img.altText || "",
                                        src: (img.url) ? img.url : "nothing.jpg",
                                        rel: img.id,
                                        id: '__mcenew',
                                        class:'img-responsive' //I Added it here
                                    };

                                    editor.insertContent(editor.dom.createHTML('img', data));

                                    $timeout(function () {
                                        var imgElm = editor.dom.get('__mcenew');
                                        var size = editor.dom.getSize(imgElm);

                                        if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) {
                                            var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);

                                            var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
                                            editor.dom.setAttrib(imgElm, 'style', s);
                                            editor.dom.setAttrib(imgElm, 'id', null);

                                            if (img.url) {
                                                var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
                                                editor.dom.setAttrib(imgElm, 'data-mce-src', src);
                                            }
                                        }
                                    }, 500);
                                }
                            }
                        });
                    });


                }
            });
        },

Answer 2

I think that in order to achieve what you want you need to be looking at the TinyMce configuration.

After a quick check I think this is where you will need to start looking:

~/umbraco_client/tinymce3/plugins/umbracoimg/img/image.js

Hope that helps.

Answer 3

you can add class attribute by default in ~/umbraco_client/tinymce3/plugins/umbracoimg/img/image.js

    tinymce.extend(args, {
        src: nl.src.value,
        width: nl.width.value,
        height: nl.height.value,
        alt: nl.alt.value,
        title: nl.alt.value,
        class: 'img-responsive',
        rel: nl.orgWidth.value + ',' + nl.orgHeight.value
    });