Umbraco Archetype 渲染图像（MediaPicker 2）

Question

我正在使用 Umbraco 中的 Archtype 构建图像滑块。

开始时我使用的是 umbraco 7.5.9 和 Umbraco.MediaPicker，但与此同时，我使用最新版本的 Umbraco (7.6.2) 开始了一个新项目，该项目使用 Umbraco.MediaPicker2

使用旧的 MediaPicker 渲染图像没有问题，但使用 MediaPicker2 似乎不可能。

这是我的设置。

原型：这是呈现旧 MediaPicker

的部分视图

<div class="fullWidthSlider">
    @foreach (var image in @CurrentPage.SliderImages)
    {
        <div>Id: @image.GetValue("image")</div>@*Line added for debug*@
        var media = @Umbraco.Media(image.GetValue("image"));
        <img src="@media.Url" />
    }
</div>

这曾经适用于旧的媒体选择器，@image.GetValue 返回了 int id。但是有了新的 MediaPicker2 它 returns Umbraco.Core.Udi[]

如果我使用下面的代码遍历 archtype 的属性，我会得到这个结果（见下面的代码）

@foreach (var fieldset in Model.Content.GetPropertyValue<ArchetypeModel>("sliderImages"))
{
    foreach(var prop in fieldset.Properties){

        <p>@prop.Alias - @prop.Value</p>

    }
}

href -

altText - 替代测试

图片-umb://media/c33bfe07a82b4df18a79db154139cb91

href -

altText - Fjall

图片-umb://media/40d5778d34bb4035b5146c901de75212

谁能告诉我如何根据这些数据渲染图像。

谢谢

Answer 1

我刚刚坐过山车弄明白了！

您可以使用以下代码从图像字符串中获取 IPublishedContent：

// Your string which is retrieved from Archetype.
var imageString = "umb://media/c33bfe07a82b4df18a79db154139cb91";

// Get the guid from this string.
var imageGuidUdi = GuidUdi.Parse(imageString);

// Get the ID of the node!
var imageNodeId = ApplicationContext.Current.Services.EntityService.GetIdForKey(guidUdi.Guid, (UmbracoObjectTypes)Enum.Parse(typeof(UmbracoObjectTypes), guidUdi.EntityType, true));

// Finally, get the node.
var imageNode = Umbraco.TypedMedia(imageNodeId.Result);

在我们的 Umbraco 上查看 this thread，其中涵盖了这个问题。

我用 this comment 弄清楚了如何从图像的 guid 中获取 ID。

看起来 Umbraco HQ 正在推动人们使用新的 ModelsBuilder 和打字模型。我不确定 ModelsBuilder 是否支持 Archetype，这就是为什么会有这么多麻烦。

我个人在我的所有项目中都使用 Nested Content，因为它执行相同的功能，但 Umbraco 更好地支持 (IMO)，因为它使用文档类型来存储可重复的内容模式。因此，它可以很容易地映射到 IPublishedContent，因此受到 ModelsBuilder 的支持！

Umbraco Archetype 渲染图像（MediaPicker 2）

Umbaco Archtype rendering images (MediaPicker2)

umbraco

umbraco7