Responsive Image, Bootstrap 3 and Umbraco 7.2.1 - umbraco

Question

While I'm using Umbraco 7.2.1, I want the image I insert to be responsive (img-responsive) of bootstrap.
How can i do that?

Answer 1

I'm not sure how you are adding the images to your pages but I had this problem when I started using the new grid layout in Umbraco 7.2.
So if you are also using the grid layout what you need to do is open the view "Partial Views\Grid\Editors\Media.cshtml" and add the class there.
...
<img src="#url" class="img-responsive" alt="#Model.value.caption">
...
This will add the class to ALL images added to the grid layout with the standard "Image" grid editor.

Answer 2

You can add your own custom class to to images in
~/umbraco_client/tinymce3/plugins/umbracoimg/img/image.js
Look for where it says tinymce.extend(). It should end up looking something like this:
tinymce.extend(args, {
src: nl.src.value,
width: nl.width.value,
height: nl.height.value,
alt: nl.alt.value,
title: nl.alt.value,
rel: nl.orgWidth.value + ',' + nl.orgHeight.value,
class: 'img-responsive'
});
I've only done this in Umbraco 6, so hopefully the answer is still the same in Umbraco 7.

Answer 3

I don't advise altering anything in the /umbraco/ or /umbraco_client/ folders since any future updates will undo your changes, forcing you to reapply them.
Assuming you want to add a responsive class to images entered in the rich text editor, I would recommend creating a new css rule for img elements that adds the relevant properties from .img-responsive.
For example:
You add a rich text data type called bodyText to a document type in Umbraco. In your template for this document, wrap the rendering call in an element with the class .bodyText.
<div class="bodyText">
#Umbraco.Field("bodyText")
</div>
In your stylesheet, create a new rule for .bodyText img that inherits the properties from the .img-responsive class.
.bodyText img {
max-width: 100%;
height: auto !important;
}
Note !important on the height property. This is added to ensure that the inline-style added for height are overridden. When an editor changes the dimensions of an image in the rich text editor, tinyMCE will add the new dimensions to the image's inline style attribute, thus killing the responsive height.

Answer 4

I did it very easily in Umbraco 7.5.5, change /Umbraco/Js/umbraco.services.js:
$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);
// images must be responsive: commented 3 lines of code, added addClass with img-responsive,
// var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;";
// editor.dom.setAttrib(imgElm, 'style', s);
editor.dom.addClass(imgElm, 'img-responsive');
editor.dom.setAttrib(imgElm, 'id', null);
if (img.url) {
//var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height;
var src = img.url;
editor.dom.setAttrib(imgElm, 'data-mce-src', src);
}
}
}, 500);