Question

我想要响应式图片，例如picture元素或srcset属性。我可以使用标准媒体选择器或其他任何方式在我的Umbraco站点轻松实现自动化，然后在视图中使用以下内容：

<img src="@Model.Src.GetCropUrl(290)"
    srcset="@Model.Src.GetCropUrl(380) 420w, @Model.Src.GetCropUrl(700) 992w"/>

但是，我更喜欢Umbraco中的Image Cropper属性编辑器，它为编辑提供了支持，所以我想利用它。我的问题在于我发现很难将现成的助手（如GetCropUrl()）的结果与响应性结合起来，因为控制基础ImageProcessorModule的所有参数都包括在内 - 即只改变宽度或String的高度参数，如：

/media/1013/myImage.jpg?crop=0,0.43395061728395062,0,0.31604938271604938&cropmode=percentage&width=2560&height=360&rnd=131213663460000000`

......充其量似乎很麻烦;）

在查看Umbraco源代码后，我意识到我可以将Image Cropper数据反序列化为内置的ImageCropDataSet类型，如下所示：

var jsonCrop = content.GetPropertyValue<String>(imageFieldName);
var cropSet = JsonConvert.DeserializeObject<ImageCropDataSet>(jsonCrop, new JsonSerializerSettings() {
            Culture = CultureInfo.InvariantCulture,
            FloatParseHandling = FloatParseHandling.Decimal
        });

这实际上解决了我的问题 - 我得到了我需要的所有信息，然后可以用我想象的任何方式将这些碎片拼凑在一起 - 但解决方案似乎有点开箱即用。

经验丰富的Umbraco开发人员是否可以使用Image Cropper属性编辑器在其他一些更符合Umbraco标准的方式中实现图像响应？

使用Umbraco图像裁剪器的响应图像

0 个答案: