media picker

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

Sheik Naveed 22 posts 90 karma points

May 23, 2022 @ 05:31

0

Media Picker

Used media picker to upload image and display it on the page but it display as a url in page.

Copy Link
Paul Seal 524 posts 2889 karma points MVP 7x c-trib

May 23, 2022 @ 07:56

0

Hi

The value of the property should be the image url, but you need to add the html for the image yourself like this

I’m on my phone and it won’t let me add html. Maybe someone can add if for me

Something like that

Paul

Copy Link
Sheik Naveed 22 posts 90 karma points

May 23, 2022 @ 07:59

0

Please share an example so that I can check on it.

Copy Link
Paul Seal 524 posts 2889 karma points MVP 7x c-trib

May 23, 2022 @ 08:00

0

I’m on my phone it won’t let me write html

Copy Link
Ambert van Unen 175 posts 819 karma points c-trib

May 23, 2022 @ 08:11
0
Probably something like:
```
<img src="@imageUrl"/>
```
Use the value you have (the url to the image) as the source attribute for an HTML IMG element.
Copy Link

Sheik Naveed 22 posts 90 karma points

May 23, 2022 @ 08:18

Already did this but image is not showing. Below is the code

    <div class="row">
      <div class="col-xl-6 col-lg-7" data-aos="fade-right">
        <img src="@Model.Value("imageOV")" class="img-fluid" alt="">
      </div>
      <div class="col-xl-6 col-lg-5 pt-5 pt-lg-0">

Copy Link

Ambert van Unen 175 posts 819 karma points c-trib

May 23, 2022 @ 08:21
0
So if you use that code you say it appears as an URL in the frontend? Or does it show the type? Else you might need
```
@Model.Value("ImageOV").Url 
```
(also dont forget the self-closing / at the end of the IMG tag)
Copy Link
Sheik Naveed 22 posts 90 karma points

May 23, 2022 @ 08:23

0

it doesn't show anything

Copy Link
Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib

May 23, 2022 @ 08:49
0
Hi Sheik

This Media Picker 3 returns IEnumerable<MediaWithCrops> or MediaWithCrops depending in the configuration (single or multiple): https://our.umbraco.com/Documentation/Fundamentals/Backoffice/property-editors/built-in-property-editors/Media-Picker-3/

MediaWithCrops has a reference to IPublishedContent.

You should be able to get the media/image like this:
```
var image = Model.Value<MediaWithCrops>("image");
if (image != null)
{
    <img src="@image.MediaUrl()" alt="" />
}
```
If it's a multi picker you need to cast to IEnumerable<MediaWithCrops> for example:
```
var images = Model.Value<IEnumerable<MediaWithCrops>>("images")
if (images != null && images.Any())
{
    foreach (var image in images)
    {
        <img src="@image.MediaUrl()" alt="" />
    } 
}
```
Instead of MediaUrl() you can also use GetCropUrl() to return better compressed and optimized images.
Copy Link
Paul Seal 524 posts 2889 karma points MVP 7x c-trib

May 23, 2022 @ 08:49

0

Ignore me on my phone

Copy Link
Sheik Naveed 22 posts 90 karma points

May 23, 2022 @ 09:28

0

I am received error now as per below

Copy Link
Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib

May 23, 2022 @ 21:23
0
The variable Image should be image instead.

Furthermore you may need to include the namespace including MediaWithCrops.

At the top of the template/view including the following:
```
@using Umbraco.Cms.Core.Models;
```
Copy Link
Sheik Naveed 22 posts 90 karma points

May 25, 2022 @ 04:53

0

Thanks this has been resolved

Copy Link
Bjarne Fyrstenborg 1284 posts 4038 karma points MVP 8x c-trib

May 25, 2022 @ 07:32

0

Great :)

Make sure to mark the thread as solved, which may help others in future.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?