How to add a Full Width Image below Header on Blog page in Dynamik

In the comments section of How to add a Full Width Image below Header on Blog page in Genesis, a user asked:

How would you do this in Dynamik?

Here’s how.

Step 1

At Genesis > Dynamik Custom > Conditionals, add a new is_home() conditional like this:

Step 2

At Dynamik Custom > Hook Boxes, add a new function hooked to genesis_after_header having the following code:

<div class="blog-banner">
<img src="http://placehold.it/1600x222&text=Banner" alt="Banner" />
</div>

Replace the URL with that of your desired banner image.

Make sure you select the is_home conditional created in the earlier step.

Step 3

Add the following in Dynamik Custom > CSS:

/* Full Width Banner Image on Posts page
--------------------------------------------- */
 
.blog-banner {
	text-align: center;
}
 
.blog-banner img {
	width: 100%;
	vertical-align: top;
}