Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Files to easily render the Text Over Image Editor on the front.
.banner {
position: relative;
width: 100%;
box-sizing: border-box;
background-color: #708090
}
.banner--tall {
height: 100vh;
}
.banner--mid {
height: 80vh;
}
.banner--short {
height: 50vh;
}
.banner--inner {
position: absolute;
display: inline-block;
top: 0;
left: 0;
max-width: 90%;
color: white;
text-shadow: 0 0 5px black;
}
.banner--tl {
left: 5%;
top: 5%;
}
.banner--tc {
top: 5%;
left: 5%;
text-align: center;
width: 90%;
}
.banner--tr {
top: 5%;
right: 5%;
left: auto;
width: auto;
}
.banner--ml {
left: 5%;
top: calc(33% - 1em);
}
.banner--mc {
top: calc(33% - 1em);
left: 5%;
width: 90%;
text-align: center;
}
.banner--mr {
top: calc(33% - 1em);
left: auto;
right: 5%;
width: auto;
}
.banner--bl {
top: auto;
bottom: 5%;
left: 5%;
}
.banner--bc {
top: auto;
left: 5%;
bottom: 5%;
width: 90%;
text-align: center;
}
.banner--br {
top: auto;
bottom: 5%;
left: auto;
right: 5%;
width: auto;
}
@model TextOverImage.Models.ImageWithText
@{
// Use this code to render this partial in your template. Replace "banner" with whatever your property name is
// Make sure to include @using TextOverImage.Models at the top of your template
//@if(Model.Content.HasProperty("banner") && Model.Content.HasValue("banner"))
//{
// @Html.Partial("TextOverImagePartial", Model.Content.GetPropertyValue<ImageWithText>("banner")
//}
// You could use banner.Media.GetCropUrl(width,height) here instead if you want to set it!
var imageUrl = Model.Media != null ? Model.Media.Url : string.Empty;
// Only render the style tag if the image url exists
var style = !string.IsNullOrEmpty(imageUrl) ? MvcHtmlString.Create(" style=\"background: url(" + imageUrl + ") no-repeat center center; background-size: cover;\"") : MvcHtmlString.Empty;
}
<div class="banner banner--@Model.Height"@style>
<div class="banner--inner banner--@Model.Position">
<h1>@Model.Headline</h1>
<h2>@Model.Subheadline</h2>
@if (Model.Link != null)
{
<a href="@Model.Link.Url" target="@Model.Link.Target" class="button">@Model.Link.Name</a>
}
</div>
</div>
@naepalm
Copy link
Author

naepalm commented Jan 12, 2017

This works pretty well on all screen sizes, but could be tweaked to look even nicer on mobile. However, it does work and looks fine :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment