Add scroll down div

Hey, that’s a pretty fun idea, and someone else has wanted to add something to that overlay area as well, so I’ve added some hooks to the output to make it possible, although the implementation will be up to you.

I’m not pushing this to the official plugin yet, but if you are willing to experiment, you can download this one file: class-displayfeaturedimagegenesis-output.php. You’ll want to replace the existing file, which will require FTP access. It’s in the plugin’s /includes directory.

There are two new hooks you can use: display_featured_image_genesis_after_title (the one you’ll want) and display_featured_image_genesis_before_title. An example function would be:

add_action( 'display_featured_image_genesis_after_title', 'rgc_scroll_down' );
function rgc_scroll_down() {
	echo '<div class="scroll-down"></div>';
}

although obviously the styling and functionality is all another matter entirely. Hope that helps!

Thanks, Robin! A great start, for sure…

Okay – one more thing:

When the image loads here (sunshinelavenderfarm.com), the content below shows at the top and the the image pushes it down. Of course, my client is annoyed by this, so is there any way to fix that?

Let’s make it two: you’re awesome!

Wow, that’s lovely!

Because the backstretch image is delivered via javascript, it does do that thing because the backstretch image is loaded after the content. One thing you could do, although you’d need to test it and do media queries, would be to set a min-height for the .big-leader via CSS. I don’t think there is a way to make it perfect, because you don’t want to overshoot and set the min-height as something taller than the screen would actually be, but it would leave a “hole” for the image, whereas right now there is no hole, and the image is just pushing everything out of the way as needed.

I would also suggest optimizing your images for the website–either using Photoshop or a similar program, or there are some WordPress plugins which can really help with image size. The painting on the front page is 1.2MB, and the photo on the About the Lavender page is 1.84MB, which are both pretty large for websites. If you can cut down the image size, that will reduce the load time, which will help make the shift less noticeable.

Hope that helps! Really beautiful site!

Thanks, Robin! I’m gonna go play around a little now.