Question

当我使用Umbraco 7.2.1时，我希望我插入的图像能够响应（img-responsive）bootstrap。

我该怎么做？

Answer 1

我不确定你是如何将图像添加到你的页面的，但是当我开始在Umbraco 7.2中使用新的网格布局时，我遇到了这个问题。

因此，如果您还在使用网格布局，则需要打开视图“Partial Views \ Grid \ Editors \ Media.cshtml”并在那里添加类。

...

<img src="@url" class="img-responsive" alt="@Model.value.caption">

...

这会将类添加到使用标准“图像”网格编辑器添加到网格布局的所有图像。

Answer 2

您可以将自己的自定义类添加到

中的图像中

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

查找tinymce.extend（）的位置。最终应该看起来像这样：

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'
});

我只在Umbraco 6中做过这个，所以希望Umbraco 7中的答案仍然相同。

Answer 3

我不建议更改/ umbraco /或/ umbraco_client /文件夹中的任何内容，因为任何将来的更新都会撤消您的更改，强制您重新应用它们。

假设您要为富文本编辑器中输入的图像添加自适应类，我建议为img元素创建一个新的css规则，添加.img-responsive的相关属性。

例如：您将名为bodyText的富文本数据类型添加到Umbraco中的文档类型。在本文档的模板中，将渲染调用包装在具有类.bodyText的元素中。

<div class="bodyText">
  @Umbraco.Field("bodyText")
</div>

在样式表中，为.bodyText img创建一个新规则，该规则继承.img-responsive类的属性。

.bodyText img {
  max-width: 100%;
  height: auto !important;
}

请注意!important媒体资源上的height。添加此选项可确保为height添加的内联样式被覆盖。当编辑器在富文本编辑器中更改图像的尺寸时，tinyMCE会将新尺寸添加到图像的内联style属性中，从而消除响应高度。

Answer 4

我在Umbraco 7.5.5中很容易做到，更改/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);

响应式Image，Bootstrap 3和Umbraco 7.2.1

4 个答案: