Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Cedeste 37 posts 129 karma points
    Jan 26, 2023 @ 20:35
    Cedeste
    0

    @ModelValue not rendering background images

    I apologize in advance - I'm a newbie to Umbraco.

    I have a header composition to add a jumbotron for each page.

    I can get the title and subtitle to render, but the background image won't render.

    In the composition, title and subtitle are both rich text editors. The header image is an image media picker.

    My header is in a partial view, and the code looks like this:

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage



<header class="masthead jumbotron text-center jumbotron-fluid" style="background-image: url("@Model.Value("headerImage")")">
    <div class="container position-relative px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-md-10 col-lg-8 col-xl-7">
                            <div class="container">
                <h1 class="display-1">@Model.Value("title", fallback: Fallback.ToAncestors)</h1>
                <p>@Model.Value("subTitle", fallback: Fallback.ToAncestors)</p>
            </div>
                    </div>
                </div>
            </div>
        </header>

    When I Inspect the code - this is what the @Model.Value is rendering.

    url('Umbraco.Cms.Core.Models.MediaWithCrops`1[Umbraco.Cms.Web.Common.PublishedModels.Image]')

    Any assistance would be greatly appreciated.

    Copy Link
  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Jan 27, 2023 @ 08:31
    Huw Reddick
    0

    Hi Cedeste,

    try doing it this way url(@Model.Value<MediaWithCrops>("headerImage").Url())

    Copy Link
  • Cedeste 37 posts 129 karma points
    Jan 27, 2023 @ 12:55
    Cedeste
    0

    Thank you.

    But that doesn't work; I get the following error:

    Argument 3: cannot convert from 'method group' to 'object?'

    Any advice?

    Copy Link
  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Jan 27, 2023 @ 13:34
    Huw Reddick
    0

    could be the way you are using it in the style declartion because of the nested quotes, I would do it this way, it should work fine

    @{
    var bImage = Model.Value<MediaWithCrops>("headerImage").Url();
}

<header class="masthead jumbotron text-center jumbotron-fluid" style="background-image: url('@bImage')">
    Copy Link
  • Cedeste 37 posts 129 karma points
    Jan 27, 2023 @ 13:51
    Cedeste
    0

    That didn't work, either.

    The type or namespace name 'MediaWithCrops' could not be found (are you missing a using directive or an assembly reference?)

    I'm using Umbraco 11 - not sure if that makes a difference.

    Copy Link
  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Jan 27, 2023 @ 14:16
    Huw Reddick
    0

    you need to have this at the top of your View page

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Core.Models
    Copy Link
  • Cedeste 37 posts 129 karma points
    Jan 27, 2023 @ 14:19
    Cedeste
    0

    THAT WORKED!! THANK YOU!

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft