Sitecore 8 RTE 图像大小调整答案

【问题标题】：Sitecore 8 RTE Image re-sizingSitecore 8 RTE 图像大小调整
【发布时间】：2015-12-17 18:26:36
【问题描述】：

我们最近从 Sitecore 6.5 升级到了 Sitecore 8。

我们将 RTE 专门用于我们的内容（长篇大论）。

在 6.5 中，我们的作者可以插入指向图像的链接并删除大小参数，并在 HTML 视图中拥有如下所示的图像 URL：

<img src="~/media/39ad74e4cc7749fd9ee31ba6b6b0cd07.ashx" />

Sitecore 会根据我们是在桌面浏览器还是移动屏幕（小）中查看而自动调整图像大小。即使原始图像是 1600x900 ，Sitecore 也会调整图像大小以适应屏幕。

现在，在 Sitecore 8 中，该功能已不复存在。使用与我们之前相同的 <img> 标签，无论在桌面浏览器还是移动浏览器上，1600x900 图像将始终呈现为 1600x900。

Sitecore 8 中有什么解决方案可以让服务器针对不同的屏幕分辨率自动调整图像大小？（在移动设备上查看我们的网站时，我们遇到了最大的麻烦。）

【问题讨论】：

我的猜测是，在升级之前，您有一些 CSS 正在调整客户端上的图像大小。您作为示例给出的 URL 将完全任何调整大小。此外，Sitecore 不知道视口大小，因此它无法根据设备调整图像大小，除非您有额外的代码来执行此操作。 Sitecore 从来没有“自动”调整图像大小的功能，您必须为其提供参数才能做到这一点。

标签： image resize sitecore sitecore8 rte

【解决方案1】：

Sitecore 从来没有开箱即用的这个功能。因为 Sitecore 是一个基于服务器的组件，它永远不知道用户的视口大小是多少，除非该信息是通过 JavaScript 专门发送的。

制作响应式图片的主要方法有以下几种：

您可以让 CSS 处理所有大小调整。这样做的好处是简单，不需要额外的js处理，图片总是随页面一起下载。但这也意味着您必须提供最大尺寸的图像。所以对于大多数人来说，他们会下载太多。
使用 JavaScript 来完成。具有多种尺寸图像的 url，并使用媒体查询根据某些断点交换图像。在http://xoxco.com/projects/code/breakpoints/

你可以这样设置图像：

<img data-responsive="true" 
     data-small-url="@(imageUrl)?w=100" 
     data-medium="@(imageUrl)?w=200" 
     data-large="@(imageUrl)?w=300" />

然后像这样设置你的js：

$(window).setBreakpoints({
    breakpoints: [
        480,
        768,
        1024
    ] 
});     

$(window).bind('enterBreakpoint480',function() {
  var $img = $('img[data-responsive="true"]');
  $img.attr("src", $img.data("smallUrl"));
});

$(window).bind('enterBreakpoint768',function() {
  var $img = $('img[data-responsive="true"]');
  $img.attr("src", $img.data("mediumUrl"));
});

$(window).bind('enterBreakpoint1024',function() {
  var $img = $('img[data-responsive="true"]');
  $img.attr("src", $img.data("largeUrl"));
});

这是非常粗略且未经测试的代码，但应该可以为您提供基本概念。如果您不想编写自己的脚本，也可能有一些插件可以为您完成。

还有第三个选项使用一些较新的标签，但浏览器对这些标签的支持会受到限制。这是一篇关于该选项的好文章：http://blog.navigationarts.com/responsive-image-sizing-with-html5-and-sitecore/

【讨论】：

数字 2 将无法在 Sitecore 8（或任何升级的 SC7.x）中使用，因为有媒体保护，如果您不提供它们，将提供完整尺寸的图像...
@jammykam - 是的，我保持简单。如果您将该图像 url 包装在将哈希添加到查询字符串的 util 函数中，它将起作用 tho

【解决方案2】：

当您使用 JavaScript 添加 size 参数时，它确实在 Sitecore 8 中不起作用。这是因为，从 sitecore 7.5 及更高版本开始，有 MediaRequestProtection 参见App_Config\include\Sitecore.Media.RequestProtection.config

您可以禁用此功能或使用匹配的令牌生成正确的 url。

使用缩放功能时，查询字符串中会添加一个哈希。你需要这个散列来进行图像缩放。如果您使用图像或富文本控件，这可以开箱即用。生成 url 时，可以使用 HashingUtils.ProtectAssetUrl 方法。

var options = new MediaUrlOptions();
options.MaxWidth = maxWidth;
options.AlwaysIncludeServerUrl = true;
imageUrl = HashingUtils.ProtectAssetUrl(Sitecore.Resources.Media.MediaManager.GetMediaUrl(item, options))

每个不同的尺寸都有另一个标记。

【讨论】：

【解决方案3】：

我面临的问题与 Sitecore 无关。这是一个未被发现的 CSS 问题。

对误导的道歉。

【讨论】：