Sridhar Katakam

Genesis and WordPress Tutorials

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

by 7 Comments

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?

blog-banner-dynamik

Here’s how.

Step 1

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

is-home-conditional-dynamik

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&amp;text=Banner" alt="Banner" />
</div>
view raw gistfile1.txt hosted with ❤ by GitHub

Replace the URL with that of your desired banner image.

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

blog-banner-dynamik1

blog-banner-dynamik2

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;
}
view raw gistfile2.css hosted with ❤ by GitHub

  • I’ve followed your instructions exactly and still can’t get my banner to show up on my posts. Dynamik is my theme and I’m using Beaver Builder, but the posts are just done through the wordpress editor. With Beaver Builder, I am able to put my banner on each page, but not so easy on the posts. So I did what you said and the banner won’t show up on my post. I’d like the word Blog to show up like you have Banner on your example, too.

    My website is http://designitdigital.com. My blog posts page is http://designitdigital.com/blog and my blog is http://designitdigital.com/what-if-you-lost-your-website/

    Please advise. Thank you!

    Reply

  • Hi again,

    I found that I had a plugin conflict so I did get it to work. I want my blog posts header to match the blog page header. I didn’t know how to change the font of the word Banner or in my case “blog” to match my blog page header, so I added it to my image. I do want my image to resize the same on mobile as my header does for my blog page. If you look, you can see the difference. I tried to add height=”158px” width=”auto” but that didn’t work. Thanks for your help! I am also one of your paid subscribers.

    Reply

  • I followed your instructions above and it shows up on my blog post pages. Thank you so much!

    However, I don’t want it to resize in mobile. I want the height to stay at 158px but I don’t want it to be out of proportion. I don’t mind if the sides are cut off. How can I keep the height at 158px?

    As you can see, the banner on this page http://designitdigital.com/blog/ stays the same height in mobile. However, the banner on my blog post here
    http://designitdigital.com/what-if-you-lost-your-website/ resizes. I want it to look the same on mobile just like the page http://designitdigital.com/blog/. What do I need to do?

    Reply

  • very good … how can I set a different for each post?
    maybe additional with custom field … can u explain it?

    Reply
    • >