How to set background-image to BlogEngine.NET post header

Question

Is there any solution how to set the background-image to BlogEngine.NET post header. I'm trying to modify custom them PostView.ascx to get first image from post body and set it as background-image to post header, but there is only and i don't know how to get image url from it.

Answer 1

My workaround is that user must added in post editor class "imgheader" to picture which he wants to set as background to post header. Then add .imgheader {display: none;} to styles.css Then add script to theme site.master

    <script  type="text/javascript">
        var updateImageHeaders = function() {
            var postArticles = document.evaluate("//article[contains(@class,'post-home')]", document, null, null, null);
            var article = postArticles.iterateNext();
            while (article != null) {                
                var imgheader = article.getElementsByClassName("imgheader");
                if (imgheader.length > 0) {
                    var postHeader = article.getElementsByClassName("post-header");
                    if (postHeader.length > 0) {
                        var imgSrc = imgheader[0].getAttribute("src");
                        postHeader[0].style.backgroundImage = 'url(' + imgSrc + ')';
                    }                    
                }
                article = postArticles.iterateNext();
            }
        };

        document.addEventListener('DOMContentLoaded', function () {            
            updateImageHeaders();
           
        });

    </script>