Sridhar Katakam

Genesis and WordPress Tutorials

How to display full sized (viewport height) featured image on static Pages in Digital Pro

by 10 Comments

In Genesis Facebook group a user asked:

I'm using Digital Pro and was wondering if there is anyway for each of my pages to be like the front page with a big image? Each page on this website will be a landing page for a different product and I want them all to look like the front page of the theme. Yes I know I can create a page template like front-page.php but I want to use a different image on each landing page. Any suggestions?

In this article you can find the code for

1) setting up a page template for static Pages which

a) adds a custom body css class if the Page has a featured image

b) adds a Page Featured section below the header if the Page has a featured image

- on desktops, featured image is set as background image for the section
- on tablets and mobiles, featured image is inserted in the section

c) load the JS file (mentioned below) only if featured image is present and on desktops.

2) creating a JS file which sets the height of Page Featured section to that of viewport on initial page load and on resize event.

3) finally, adding the needed CSS.

digital-pro-full-image-pages

after scrolling down:

digital-pro-full-image-pages-scrolled

On mobile:

digital-pro-full-image-pages-mobile

Static Pages that do not have a featured image continue to appear like before.

Step 1

Add the following in Digital Pro's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar,

    First of all thank you for the amazing tutorials. I am currently working on a site using Digital Pro and what I would like to achieve is to replicate the Front-Page-1 Widget (including the ability to add a new background image) 2 more times in the front page. Meaning I will end up with three large images that I can upload through the optimize menu. Could you please do a short tutorial on how to achieve this?

    Thanks in advance.

    Andoni

    Reply

  • Hi Sridhar, how can I set the front page widget 1 image like a banner (not full height), half height (for example) of the viewport?
    Thanks

    Reply

  • Hi Sridhar!
    Thanks for your tutorials, i have tried out a handful and they all work marvelously!
    I really like the approach in this tutorial with the page.php and use of featured image. How would i go about removing the .js resize and displaying the image responsive as banner instead, with a html widget on top?

    I tried to combine this tutorial with the instructions given in https://sridharkatakam.com/responsive-background-image-front-page-1-section-digital-pro/ but sadly my attempts so far have failed.

    Thanks in advance!

    Reply

  • Hey Sridhar, what if I want an image that has a smaller height than 1050px? Perhaps something like 1600 x 708px.

    Reply
    • >