Copied to clipboard

Flag this post as spam?

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


  • Jacob Leth Hegnsvad 11 posts 62 karma points
    Mar 16, 2015 @ 21:03
    Jacob Leth Hegnsvad
    0

    Mediapicker content as style attribute

    Hi, I'm trying to get a mediapicker content displayed as a background for a html tag in a template as such:

    @if (CurrentPage.HasValue("bannerImage")){
    
    <section id="banner" style="background: url("@Umbraco.Media(CurrentPage.bannerImage).Url");">
    

    That however generates a runtime error. The data is correct and an image tag would result in the correct image being displayed, just not as the attribute I need.

    If anybody knows why this fails and/or how to correct it, any help would be much appreciated. Thanks!

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Mar 16, 2015 @ 21:09
    Jan Skovgaard
    0

    Hi Jacob and welcome to our :)

    You need to fetch the image like this I think

       var mediaItem = Umbraco.TypedMedia(banner.GetPropertyValue("bannerImage")); 
       <section id="banner" style="background: url("@mediaItem.GetPropertyValue("umbracoFile")");">    
    

    If this does not work please do share the exact error message you're getting. It can usually make it easier for people to figure out why your code is failing.

    Hope this helps.

    /Jan

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Mar 16, 2015 @ 21:13
    Dennis Aaen
    0

    Hi Jacob,

    You almost there you just need to change a bit. This the code that woks for me.

    @if(CurrentPage.HasValue("bannerImage")){
    <section id="banner" style="background: url('@Umbraco.Media(CurrentPage.bannerImage).Url');">

    </section
    }

    I have changed the double " to ' inside the url()

    Hope this helps,

    /Dennis

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Mar 16, 2015 @ 21:20
    Jan Skovgaard
    0

    Argh, missed the fact that you're using dynamic razor - What Dennis said should work :)

    /Jan

  • Jacob Leth Hegnsvad 11 posts 62 karma points
    Mar 16, 2015 @ 21:54
    Jacob Leth Hegnsvad
    0

    Hi Jan,

    Thanks for your reply!

    Had to alter my remote web config to the get the error as apparently my webmatrix doesn't actually redownload when I ask it to, and so it took a while longer to respond than I wanted it to.

    The current error I'm getting is a parser error:

    Parser Error Message: The if block is missing a closing "}" character.  Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup.  
    Line 28:            
    Line 29:            <!-- Banner --> 
    Line 30:            @if (CurrentPage.HasValue("bannerImage"))
    Line 31:                {
    Line 32:                    <section id="banner" style="background: url("@Umbraco.Media(CurrentPage.bannerImage).Url");">
    

    Now my code looks like this:

                <!-- Banner --> 
            @if (CurrentPage.HasValue("bannerImage"))
                {
                    <section id="banner" style="background: url("@Umbraco.Media(CurrentPage.bannerImage).Url");">
                }
                else
                {
                    <p>false</p>
                }
    

    And it clearly does not miss a closing bracket. Apparently this mistake only happens when I'm trying to do it in the attribute of the section. If I were to do

    <img src="@Umbraco.Media(CurrentPage.bannerImage).Url" />

    It would render the image with no incident.

    The code you posted, does not change the error message, unless I do a writeout of the value not in the attribute, like:

    var mediaItem = Umbraco.TypedMedia(CurrentPage.GetPropertyValue("bannerImage")); 
                    <p>@mediaItem.GetPropertyValue("umbracoFile")</p>
    

    In which case I get a whole other mess of errors 'Umbraco.Web.Models.PublishedContentBase' does not contain a definition for 'GetPropertyValue'

    If only I could get it fixed so I could input my otherwise fine url into the attribute of the section tag. I assume it has something to do with the use of the @ razor tag inside a @if {} bracket. I however do not completely know if that is true, or why this would present an error, and how to fix it.

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Mar 16, 2015 @ 22:00
    Dennis Aaen
    0

    Hi Jacob,

    Try to see my first comment in the thread, the code I posted should to the trick for you. If you have missed the comment. Then code looks like this.

    @if(CurrentPage.HasValue("bannerImage")){
     <section id="banner" style="background: url('@Umbraco.Media(CurrentPage.bannerImage).Url');">

     
    section
    }

    Hope this helps,

    /Dennis

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Mar 16, 2015 @ 22:00
    Jan Skovgaard
    0

    Hi Jacob

    As my last comment says - Did not notice you were using the dynamic version of Razor - My example is using strongly typed Razor :) Don't know if you have had any success in getting the suggestion from Dennis working though?

    But yeah weird error since the code snippet looks correct. But I actually think it's because you have quotes inside quotes.

    style="background: url("@Umbraco.Media(CurrentPage.bannerImage).Url");"
    

    Instead you can actually remove the quotes in the url so it looks like this

    style="background: url("@Umbraco.Media(CurrentPage.bannerImage).Url");"
    

    Or you can use single quotes like this

    style="background: url('@Umbraco.Media(CurrentPage.bannerImage).Url');"
    

    Hope this helps.

    /Jan

  • Jacob Leth Hegnsvad 11 posts 62 karma points
    Mar 16, 2015 @ 22:22
    Jacob Leth Hegnsvad
    0

    Hi Again :-)

    Thanks for helping me out here.

    I'm sorry I didn't notice your post Dennis. I tried using both single qoutes and without qoutes as also Jan followed up with. They all give me the same parser error.

    Originally I didn't use any qoutes at all, they were put on as I was trying to sush out the error :P

    So to recap:

    "@Umbraco.Media(CurrentPage.bannerImage).Url"

    '@Umbraco.Media(CurrentPage.bannerImage).Url'

    @Umbraco.Media(CurrentPage.bannerImage).Url

    they all generate the same runtime error, that complains about a missing closing bracket of the if statement.

    @Jan - I did notice the whole dynamic vs. strongly typed thing :-) However as I'm getting my data right, it shouldn't matter.

    Any furter help will still be very much appreciated! :-D

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Mar 16, 2015 @ 23:03
    Dennis Aaen
    0

    Hi Jacob,

    If it´s possible for you to share the whole Razor code that you are trying to get to work. If you can this, then I think it mutch easier for us to see what goes wrong and where the missing closing bracket of the if statement should be.

    Looking forward to hear from you.

    /Dennis

  • Jacob Leth Hegnsvad 11 posts 62 karma points
    Mar 16, 2015 @ 23:25
    Jacob Leth Hegnsvad
    0

    Hi Dennis. Sure thing, I've pasted the code below. The code is pretty straight forward. I'm a pretty experienced coder, and my best guess is that I'm missing something about how the razor engine interprets the code. Anyway, the thing to notice is that the code works fine if I just print out the url as text rather than trying to insert it as an attribute.

    http://pastebin.com/y2BQF4sr

    Had to use a pastebin it wouldn't post it with the entire code.

  • Jacob Leth Hegnsvad 11 posts 62 karma points
    Mar 16, 2015 @ 23:47
    Jacob Leth Hegnsvad
    100

    I found the problem by looking through other posts on the forum. Sorry for being such a tool.

    Apparently its the razor parser that has problems with you trying to open up tags you dont close. I don't see the purpose of ever requiring people to close tags or throw errors.

    Example:

    @if(){
    <p>@Umbraco.Media(CurrentPage.bannerImage).Url</p>
    }
    

    Worked fine beecause I closed the paragraph tag I opened. However once I used a single tag:

    @if(){
    <p>@Umbraco.Media(CurrentPage.bannerImage).Url
    }
    

    and then later in the cshtml file did a </p> now the trouble starts!

    So the solution is to

    Html.Raw("<p>" + @Umbraco.Media(CurrentPage.bannerImage).Url);
    

    And now I should hopefully never make that mistake again :P

    Thanks for the help guys!

Please Sign in or register to post replies

Write your reply to:

Draft