I have a MultiURL Picker and I want to render the link URL or the Anchor. This is what I have in my file so far;

@using Umbraco.Core.Models.Blocks
@inherits UmbracoViewPage<BlockListItem<HomepageBanner>>

<div class="homepage-heading block" id="block_1">
    <div class="inner">
        <div class="text-part">
            <h1>@Model.Content.BannerHeading</h1>
            @Model.Content.BannerContent
            <p><a class="button arrow down" href="@Model.Content.BannerButtonLink"><span>Find</span> <span>out</span> <span>more</span> <span></span><span class="down"></span></a></p>
        </div>
        <div class="image-part">
            <img width="425" height="427" src="https://principle-networks.com/wp-content/uploads/2022/04/Hands-Small-e1650969882279.jpg" class="attachment-full size-full" alt="image" loading="lazy" />                    
        </div>
    </div>
</div>

I also need to render out the image that has been selected in the CMS. These are my fields for the block: https://prnt.sc/Ujj9pmdUdZzw Thanks, Javed

Hi. For the link, this depends on whether you have set the limit in the data type to

1

. This controls whether the picker works a a single picker or a multi picker - where the return values are either

Link

or

IEnumerable<Link>

respectively. Assuming you have configurd it as a single picker, I think your HTML for the link could look something like:

cshtml
@if (Model.Content.BannerButtonLink is not null) {
    <p><a class="button arrow down" href="@Model.Content.BannerButtonLink.Url" target="@Model.Content.BannerButtonLink.Target"><span>Find</span> <span>out</span> <span>more</span> <span></span><span class="down"></span></a></p>
}

These are the settings that I see - I don't see where I need to set the limit. https://prnt.sc/5klfMO94ECdW - it'll always be one. Aha! I see where to set the limit - doh! I forgot that bit!

Can you share a screenshot of the data type?

Sorted it 🙂 I just need to figure how to render my image now.

Can you see what type your

BannerImage

property is?

Yes, Image Media Picker

That depends on a few things. Can you try writing out

@Model.Content.BannerImage

somewhere on the page to see what it says?

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

Ok. So it wraps the

Image

type. If you've added a property with the alias

altText

to the image type, you should be able to access it via

Model.Content.BannerButtonLink.Content.AltText

Ah - I understand now, so I thought in the media section we could upload an image and then set the alt text from there, but it looks like you can't do that. I will add an altText property and use that instead 🙂

You can add an

altText

property or similar directly to the image media type, but users won't be able to set the alt text until after the media has been uploaded

For alt text, one of the things I like to do is create the property for the media file (as suggested), and then supplement this with an extension method.

csharp
public static string AltText(this MediaWithCrops content)
{
    if(content.HasProperty("altText") && !string.IsNullOrWhiteSpace(content.Value<string>("altText")))
    {
        return content?.Value<string>("altText") ?? "";
    }
        
    return content?.Name ?? "";
}

It means that there's always a fallback option available when you're outputting it in razor.

That's a solid approach! I like it. I'll implement this in my project 🙂

Normally, I'd have a second project with core files in it, something like "YourProjectName.Core", then have a folder for Extensions and then name the file after the type we're adding to the extension. So an example of this would be - YourProjectName.Core > Extensions > MediaWithCropsExtensions.cs And then in the file...

csharp
namespace YourProjectName.Core.Extensions
{
    public static class MediaWithCropsExtensions
    {
        public static string AltText(this MediaWithCrops content)
        {
            if(content.HasProperty("altText") && !string.IsNullOrWhiteSpace(content.Value<string>("altText")))
            {
                return content?.Value<string>("altText") ?? "";
            }

            return content?.Name ?? "";
        }
    }
}

However, if you don't have a second project, you can just put the Extensions folder in your main project and update the namespaces accordingly. To then use this in your razor file, add the namespace to the usings list -

@using YourProjectName.Core.Extensions;

And to call the item in your code (using your BannerImage property as the example)

@Model.Content.BannerImage.Image.AltText()

.