Question

我们最近已从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中的解决方案是让服务器自动调整图像大小以适应不同的屏幕分辨率？（在移动设备上查看我们的网站时，我们遇到了最大的麻烦。）

Answer 1

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

有几种主要的方式来处理响应式图像：

您可以让CSS处理所有调整大小。这样做的好处是简单，没有额外的js处理，图像总是随页面下载。但这也意味着您必须提供最大尺寸的图像。所以对大多数人来说，他们下载的太多了。
使用JavaScript执行此操作。拥有多种尺寸的图片，并使用媒体查询根据特定的断点交换图像。我在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/

Answer 2

当您使用JavaScript添加size参数时，它确实无法在Sitecore 8中运行。这是因为，从sitecore 7.5及更高版本开始，MediaRequestProtection会看到App_Config\include\Sitecore.Media.RequestProtection.config

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

使用缩放功能时，会在查询字符串中添加一个哈希值。您需要此哈希来进行图像缩放。如果您使用图像或richtext控件，这是开箱即用的。生成URL时，可以使用HashingUtils.ProtectAssetUrl方法。

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

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

Answer 3

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

误导误导。

Sitecore 8 RTE图片重新调整大小

3 个答案: