setting an inline background image with the media picker

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

Stefan Joseph 19 posts 120 karma points

Aug 04, 2017 @ 15:24
0

Setting an inline background image with the Media Picker

Templates, (partial) views and macros

Umbraco 7
Hoping for a quick and easy solution to this - I have a media picker set up that would allow users to select a background image.

However, the following code set up in my partial view:
```
<div class="banner text-center" style="background-image:url('@Umbraco.Field("contactBannerBackgroundImage")');">
```
Is outputting as:
```
<div class="banner text-center" style="background-image:url('1223');">
```
Any help appreciated!
Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Aug 04, 2017 @ 22:11
100
Hi Stefan

Welcome to our forum!

Try this code:
```
<div class="banner text-center" style="background-image:url('@Umbraco.TypedMedia(Umbraco.AssignedContentItem.GetPropertyValue<int>("contactBannerBackgroundImage")).Url');"></div>
```
"contactBannerBackgroundImage" property stores id of the media item, so you have to get Media item by id with Umbraco.TypedMedia(id) method and after that retrieve URL of the image.

Thanks,

Alex
Copy Link
Stefan Joseph 19 posts 120 karma points

Aug 06, 2017 @ 21:14

1

Thanks for your help Alex, that worked perfectly!

Front end development is more my thing so I really appreciate the explanation.

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Aug 06, 2017 @ 21:17

0

You are welcome, Stefan

Have a great time with Umbraco :)

Alex

Copy Link
Stefan Joseph 19 posts 120 karma points

Sep 04, 2017 @ 08:51

0

Hi Alex, I wonder if you could help me a little further with this - I've had success with this code via templates - but it doesn't seem to work in Macro Partial Views.. any ideas?

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Sep 04, 2017 @ 08:56

0

Hi Stefan,

Can you show all macro code?

Thanks,

Alex

Copy Link

Stefan Joseph 19 posts 120 karma points

Sep 04, 2017 @ 09:21

Sure no problem:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

<section class="banner top-banner" style="background-image:url('@Umbraco.TypedMedia(Umbraco.AssignedContentItem.GetPropertyValue<int>("pageBannerBackgroundImage")).Url');">
    <div class="container">
        <h1>@Model.MacroParameters["pageTitle"]</h1>
        <div class="zip-divider"></div>
    </div>
</section>

I presume there's a slight variation in the calling method for Macros?

Copy Link

Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Sep 04, 2017 @ 09:27

Stefan, please check that current page has value:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@if (Umbraco.AssignedContentItem.HasValue("pageBannerBackgroundImage"))
{
    <section class="banner top-banner" style="background-image: url('@Umbraco.TypedMedia(Umbraco.AssignedContentItem.GetPropertyValue<int>("pageBannerBackgroundImage")).Url');">
        <div class="container">
            <h1>@Model.MacroParameters["pageTitle"]</h1>
            <div class="zip-divider"></div>
        </div>
    </section>
}

Copy Link

Stefan Joseph 19 posts 120 karma points

Sep 04, 2017 @ 09:34

0

No error page, but the macro doesn't actually display on the page now.

Copy Link
Stefan Joseph 19 posts 120 karma points

Sep 04, 2017 @ 09:35

0

No error page, but the macro is no longer displaying on the page either.

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Sep 04, 2017 @ 09:35

0

So the problem is that current page doesn't have "pageBannerBackgroundImage" property value.

Copy Link
Stefan Joseph 19 posts 120 karma points

Sep 04, 2017 @ 09:40

0

But I have defined a title and image to be used in the 'content' tab - everything is set up correctly in the macro as well.. so I don't understand why the page doesn't have the pageBannerBackgroundImage value?

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Sep 04, 2017 @ 09:44
0
In the macro?

Where did you define image?

This method works with Current Umbraco Page, not the macro settings.
```
Umbraco.AssignedContentItem.GetPropertyValue("pageBannerBackgroundImage")
```
Copy Link
Stefan Joseph 19 posts 120 karma points

Sep 04, 2017 @ 09:52

0

so, in the macro I have:

pageBannerBackgroundImage as an Alias for a media picker

In the macro partial view:

the code I pasted in (along with your amendments)

With the idea being, that via the media picker I can upload an image, and it will display as the background image

Copy Link

Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Sep 04, 2017 @ 09:58

Sorry, I thought you have "pageBannerBackgroundImage" property on the page, you can use this code in this situation:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@if (Model.MacroParameters["pageBannerBackgroundImage"] != null)
{
    var pageBannerBackgroundImage = Model.MacroParameters["pageBannerBackgroundImage"];

    <section class="banner top-banner" style="background-image: url('@Umbraco.TypedMedia(pageBannerBackgroundImage).Url');">
        <div class="container">
            <h1>@Model.MacroParameters["pageTitle"]</h1>
            <div class="zip-divider"></div>
        </div>
    </section>
}

Copy Link

Stefan Joseph 19 posts 120 karma points

Sep 04, 2017 @ 10:02

0

My man!! Thank you so much Alex

Copy Link
Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib

Sep 04, 2017 @ 10:02

0

You are welcome, have a nice day!

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?