how do i render images an image on the page

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Yaco Zaragoza 80 posts 334 karma points

Apr 21, 2023 @ 13:43
0

How do I Render Images an image on the page

Using Umbraco And Getting Started

Umbraco 9
When I use the Insert Value option on the templates area I get
```
@Model.Value("image")
```
Which renders

Umbraco.Cms.Core.Models.MediaWithCrops`1[Umbraco.Cms.Web.Common.PublishedModels.Image]

How do I convert it to the Image Path so I can add it inside the proper HTML?
Copy Link
mc2 13 posts 73 karma points

Apr 21, 2023 @ 15:05

0

Hi, @Model.Value<MediaWithCrops>("image").Url() should do it

More information here - https://docs.umbraco.com/umbraco-cms/v/10.latest-lts/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker-3

Copy Link
Yaco Zaragoza 80 posts 334 karma points

Apr 21, 2023 @ 15:40
0
This is what I get when I try that.

Argument 1: cannot convert from 'method group' to 'object?'
```
   @Model.Value<MediaWithCrops>("image").Url()
```
Copy Link
Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib

Apr 22, 2023 @ 15:51
0
Hi Yaco

This syntax keeps changing between the versions, but I think now it would be
```
@Model.Value<MediaWithCrops>("image").MediaUrl()
```
There are some examples here...

https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/media-picker-3#mvc-view-example

regards

Marc
Copy Link
Yaco Zaragoza 80 posts 334 karma points

Apr 22, 2023 @ 16:40
0
I still get the same error.

This is all the code on the page
```
@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.NewsPage>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
    Layout = "Master.cshtml";
}


@Model.Value<MediaWithCrops>("image").MediaUrl()
```
I downloaded the cheat sheet and will study it to become more familiar with it.

I see the VS is telling me the following error but not sure why.

P.S I do have Modelsbuilder enable
Copy Link
Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib

Apr 22, 2023 @ 17:00
0
Hi Yaco

What type of property editor is your 'image' property??

Is it a single MediaPicker3 or can the editor pick more than one Media Item?

if it was multiple then you'd have to do something like this
```
@{
    var typedMultiMediaPicker = Model.Value<IEnumerable<MediaWithCrops>>("image");
    foreach (var entry in typedMultiMediaPicker)
    {
        <img src="@entry.MediaUrl()" style="width:200px" />
    }
}
```
But with multiple not allowed, I think it would be this

@using Umbraco.Cms.Core.Models @{ var typedMediaPickerSingle = Model.Value

You might need to have
```
@using Umbraco.Extensions
```
at the top of your view to access the MediaUrl() method as I think it's an extension method.

https://github.com/umbraco/Umbraco-CMS/blob/36069aa8139b6125398786d378ac712b5382d0b0/src/Umbraco.Core/Extensions/PublishedElementExtensions.cs#L274

regards

marc
Copy Link
Yaco Zaragoza 80 posts 334 karma points

Apr 24, 2023 @ 13:14
0
Still stuck...

The image type I am using is they "Image Media Picker (Umbraco.MediaPicker3)

I already have @using Umbraco.Extensions in my "_viewImports.cshtml" file which should be included on all pages (correct?)

If I try
```
@{
    var typedMultiMediaPicker = Model.Value<IEnumerable<MediaWithCrops>>("image");
    foreach (var entry in typedMultiMediaPicker)
    {
        <img src="@entry.MediaUrl()" style="width:200px" />
    }
}
```
Visual Studio does not like "MediaWithCrops" saying "The type or namespace name 'MediaWithCrops' could not be found (are you missing a using directive or an assembly reference?)"
Copy Link
Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib

Apr 25, 2023 @ 08:43
0
Hi Yaco

That would suggest it's missing the namespace
```
@using Umbraco.Cms.Core.Models
```
which is where MediaWithCrops lives.

regards

Marc
Copy Link

Yaco Zaragoza 80 posts 334 karma points

May 03, 2023 @ 18:20

Just in case anyone else has the same issue.

This is what ended up working for me (Multiple disabled with Modelsbuilder)

@using Umbraco.Cms.Core.Models
@{
    var typedMediaPickerSingle = Model.MEDIA-NAME-HERE;
    if (typedMediaPickerSingle is MediaWithCrops mediaEntry)
    {
        <img src="@mediaEntry.MediaUrl()" style="width:200px"/>
    }
}

Copy Link

Sidney 2 posts 71 karma points

28 days ago

0

Why use all the extra code when
would do?

Copy Link
Sidney 2 posts 71 karma points

28 days ago

100

Just for info this can be cut down to just this line of code

<img src="@Model.MEDIA-NAME-HERE.MediaUrl()" style="width:200px" />

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?