why the header image is not displayed on the entire web page

mikkel 143 posts 365 karma points

Feb 20, 2019 @ 13:14

Umbraco 7

Hi I have made a header document type without template that should show 1 header image on the whole website.

The code I put on my master page and it will not show the image.

But if I make the header doctype as a composition for all my pages then it works, but then I have to choose a header image on each page.

It is only on node front page that you set the header image for the whole home page

Here is my code on the master page. What do i do wrong??

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="da">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title></title>

    <script src="~/Lightbox/lightbox.min.js"></script>

    <link href="~/Lightbox/lightbox.css" rel="stylesheet" />
    <!-- Bootstrap core CSS -->
    <link href="~/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/css/image-gallery.css" rel="stylesheet" />
    <!-- Custom styles for this template -->
    <link href="~/css/clean-blog.css" rel="stylesheet" />
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
        <div class="container">
            <a class="navbar-brand" href="/">Forsiden</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                @Html.Partial("navbar")
                @*<ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="post.html">Sample Post</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>*@
            </div>
        </div>
    </nav>
    <!-- HEADER IMAGE START -->
   @{
    var typedMediaPickerSingle = Model.Content.GetPropertyValue<IPublishedContent>("billedeBanner");
    if (typedMediaPickerSingle != null)
    {
        <header class="masthead" style="background-image: url('@typedMediaPickerSingle.Url')">
            <!--  <img src="@typedMediaPickerSingle.Url" alt="@typedMediaPickerSingle.GetPropertyValue(" alt")" />-->
            <div class="overlay"></div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-10 mx-auto">
                        <div class="site-heading">
                            <h1>@Umbraco.Field("titelBanner")</h1>
                            <span class="subheading">@Umbraco.Field("undertitelBanner", convertLineBreaks: true)</span>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    }

}
    <!-- HEADER IMAGE END -->


    @RenderBody()
    <hr>
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-10 mx-auto">
                    <ul class="list-inline text-center">
                        <li class="list-inline-item">
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fas fa-circle fa-stack-2x"></i>
                                    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fas fa-circle fa-stack-2x"></i>
                                    <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                        <li class="list-inline-item">
                            <a href="#">
                                <span class="fa-stack fa-lg">
                                    <i class="fas fa-circle fa-stack-2x"></i>
                                    <i class="fab fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                    <p class="copyright text-muted">Copyright &copy; Your Website 2019</p>
                </div>
            </div>
        </div>
    </footer>
    <!-- Bootstrap core JavaScript -->
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script src="~/Scripts/bootstrap.bundle.min.js"></script>
    <!-- Custom scripts for this template -->
    <script src="~/Scripts/clean-blog.min.js"></script>
</body>
</html>

Copy Link

Amir Khan 1282 posts 2739 karma points

Feb 20, 2019 @ 15:09

You can set your header image to be recursive so it will look up the tree for one, just pass in the "true" parameter like below.

var typedMediaPickerSingle = Model.Content.GetPropertyValue

Hope this helps!

-Amir

Copy Link

Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib

Feb 20, 2019 @ 15:11

hi,

you can fetch a property recursively, so if you've defined a property on the "homepage" document type, you can always fetch it in your master template as

Model.Content.GetPropertyValue

(2nd param specifies to fetch property recursively until it found one)

in that case, you'd only need to specify it on one document type, but you could keep it as a composition and add it on all document types, and let editors decide whether they want a different header image on a specific page. Above code will still work in that case.

Only downside to using the composition is that you'd want to specify the property to be mandatory (on top most level document type), while keeping it optional everywhere else.

--Dirk

Copy Link

Amir Khan 1282 posts 2739 karma points

Feb 20, 2019 @ 16:20

Looks like neither Dirk or I's code pasted completely, here it is again incase you need it, we both shared the same thing.

var typedMediaPickerSingle = Model.Content.GetPropertyValue<IPublishedContent>("billedeBanner", true);

Copy Link

Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib

Feb 20, 2019 @ 16:21

Shuck, forgot to mark as code... glad someone reviewed... thanks for noticing

Copy Link

mikkel 143 posts 365 karma points

Feb 20, 2019 @ 18:45

Thanks for the help Dirk and Amir it work finde with , true

Copy Link

is working on a reply...

Flag this post as spam?

why the header image is not displayed on the entire web page