inline image

TaoistTotty 246 posts 314 karma points

Jul 29, 2014 @ 15:45

Inline Image

I am using the code below to try and insert some inline styling to a div, but it keeps failing saying a } is missing.

What am I doing wrong?

<div
@{
if(CurrentPage.HasValue("topImage"))
{
var dynamicMediaItem = Umbraco.Media(CurrentPage.topImage);
style="url(@dynamicMediaItem.Url) no-repeat scroll 100% 0 rgba(0, 0, 0, 0)"
}
}
>

Copy Link

TaoistTotty 246 posts 314 karma points

Jul 29, 2014 @ 15:48

I should mention I am using Umbraco 7.1.4

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jul 29, 2014 @ 15:48

How about this:

@{
    if (CurrentPage.HasValue("topImage"))
    {
        var dynamicMediaItem = Umbraco.Media(CurrentPage.topImage);
        var myStyle = "url(" + dynamicMediaItem.Url + ") no-repeat scroll 100% 0 rgba(0, 0, 0, 0)";

        <div style="@myStyle"></div>
    }
}

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jul 29, 2014 @ 15:51

Or even better with a null check on the media item:

@{
    if (CurrentPage.HasValue("topImage"))
    {
        var dynamicMediaItem = Umbraco.Media(CurrentPage.topImage);

        var myStyle = dynamicMediaItem != null ? "url(" + dynamicMediaItem.Url + ") no-repeat scroll 100% 0 rgba(0, 0, 0, 0)" : null;

        <div style="@myStyle"></div>
    }
}

Copy Link

TaoistTotty 246 posts 314 karma points

Jul 29, 2014 @ 16:06

Hi Jeavon

I have just tried the first one and am seeing the following error:

Line 19:     <body>
Line 20:        <div id="main">
Line 21: @{ Line 22:     if (CurrentPage.HasValue("topImage"))
Line 23:     {

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jul 29, 2014 @ 16:07

Could you please post your entire script?

Copy Link

TaoistTotty 246 posts 314 karma points

Jul 29, 2014 @ 16:07

I am seeing the same error with the second one as well

Copy Link

TaoistTotty 246 posts 314 karma points

Jul 29, 2014 @ 16:10

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="utf-8">
        <link rel="stylesheet" href="/css/mycss.css">
        <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
        <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
        <script src="/scripts/responsive-nav.js"></script>
        @Umbraco.Field("description", insertBefore: "&lt;meta name=&quot;description&quot; content=&quot;", insertAfter: "&quot;&gt;")
        <title>
            @Umbraco.Field("pageTitle", altText: "My Page")
        </title>
    </head>
    <body>
        <div id="main">
            @{
    if (CurrentPage.HasValue("topImage"))
    {
        var dynamicMediaItems = Umbraco.Media(CurrentPage.topImage);

        var myStyle = dynamicMediaItems != null ? "url(" + dynamicMediaItems.Url + ") no-repeat scroll 100% 0 rgba(0, 0, 0, 0)" : null;

        <header style="@myStyle">
    }
}
                <h1>
                    Name
                </h1>
                @Umbraco.Field("topImageText", insertBefore: "&lt;p&gt;", insertAfter: "&lt;/p&gt;")
                <nav>
                    @Umbraco.RenderMacro("Menu")
                </nav>
            </header>
            <div id="maincontent">
                <section>
                    @Umbraco.Field("pageText")
                </section>
                @{
                    if(CurrentPage.HasValue("rightImage"))
                    {
                        var dynamicMediaItem = Umbraco.Media(CurrentPage.rightImage);
                        <img src="@dynamicMediaItem.Url" alt="@CurrentPage.rightImageDescription" />
                    }
                }
            </div>
            <footer>
                <p>
                    Copyright 2014. Designed and built by DGS Design
                </p>
            </footer>
        </div>
        <script>
            var navigation = responsiveNav("header nav")
        </script>
    </body>
 </html>

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jul 29, 2014 @ 16:13

Ok, a small nesting issue, try this:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/mycss.css">
    <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
    <script src="/scripts/responsive-nav.js"></script>
    @Umbraco.Field("description", insertBefore: "&lt;meta name=&quot;description&quot; content=&quot;", insertAfter: "&quot;&gt;")
    <title>
        @Umbraco.Field("pageTitle", altText: "My Page")
    </title>
</head>
<body>
    <div id="main">
        @{
            if (CurrentPage.HasValue("topImage"))
            {
                var dynamicMediaItems = Umbraco.Media(CurrentPage.topImage);

                var myStyle = dynamicMediaItems != null ? "url(" + dynamicMediaItems.Url + ") no-repeat scroll 100% 0 rgba(0, 0, 0, 0)" : null;

                <header style="@myStyle">
                    <h1>
                        Name
                    </h1>
                    @Umbraco.Field("topImageText", insertBefore: "&lt;p&gt;", insertAfter: "&lt;/p&gt;")
                    <nav>
                        @Umbraco.RenderMacro("Menu")
                    </nav>
                </header>
            }
        }
            <div id="maincontent">
                <section>
                    @Umbraco.Field("pageText")
                </section>
                @{
                    if(CurrentPage.HasValue("rightImage"))
                    {
                        var dynamicMediaItem = Umbraco.Media(CurrentPage.rightImage);
                        <img src="@dynamicMediaItem.Url" alt="@CurrentPage.rightImageDescription" />
                    }
                }
            </div>
            <footer>
                <p>
                    Copyright 2014. Designed and built by DGS Design
                </p>
            </footer>
        </div>
            <script>
            var navigation = responsiveNav("header nav")
            </script>
        </body>
        </html>

Copy Link

TaoistTotty 246 posts 314 karma points

Jul 29, 2014 @ 16:20

Thank you very much for this and it is now working. I can also, I think, see why it was not working. It was because I did not have the whole of the HTML header tag within the code black. Is this right?

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jul 29, 2014 @ 16:21

Yes exactly, Razor code blocks must be complete, so you needed the whole of the header element within the block

Copy Link

TaoistTotty 246 posts 314 karma points

Jul 29, 2014 @ 16:22

Thanks Jeavon, and that is a good lesson learnt there

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jul 29, 2014 @ 16:25

You're very welcome!