I’ve been somewhat surprised, but quite pleased, with the positive response and adoption for my featured image plugin, which is available on the WordPress repository. Apparently, I really am not the only one who wanted this functionality! If you’re not familiar with it, here’s what it does: it adds a featured image as a really large, backstretched image, to your website. The key is that it does so intelligently, so if the featured image isn’t large enough to span the site, it will fall back and display the image at a smaller size. There is quite a bit more to the plugin, such as featured images for terms and post types, but the decision making process is key to the output. This plugin is key to this tutorial, so if you’re not already a Display Featured Image for Genesis user, you’ll need to get a copy (it’s free!).
I wanted to share a tutorial to showcase a feature which is somewhat hidden inside the plugin: the ability to add content, such as a widget area, to the featured image overlay. So if you have a post or page with a smaller image, or no featured image as a fallback, this content/widget area won’t show. This means that if you want to add something to this area, you need to make sure that it shows another way on pages without the backstretch image, if it’s important to you.
By default, all that’s in the featured image overlay is the post/page title, but there are two hooks tucked in there which can be used to add something else. I’ll be adding a widget area, but you could theoretically add pretty much anything, such as a navigation menu (again, be careful with this if you might have a page without a backstretch image). The two hooks are (creatively named):
- display_featured_image_genesis_before_title: outputs before the title
- display_featured_image_genesis_after_title: outputs after the title
I’ve used the first hook to add a widget area to my own site. Actually, I’ve added two widget areas: one which is used throughout the site, and one which is exclusive to the front page. There are other ways to handle this setup–one could, for instance, add just one widget area and use the conditional logic in Jetpack or a similar plugin to show specific widgets only on specific pages–but I’m not currently using Jetpack, so this was easier for me.
You May Also Like:
Register the Widget Areas
Your first step will be to register the new widget areas, or sidebars, if you prefer that terminology. You can add these to your site’s functions file, either adding the new widget areas into your existing widget registration function (on my own site, this is part of a much larger function which adds all of my widget areas at once), or use this function in its entirety:
add_action( 'after_setup_theme', 'leaven_register_featured_image_sidebars' );
/**
* Register sidebars for the Display Featured Image for Genesis overlay area.
* One is specific to the front page, the other is site-wide.
*
* @author Robin Cornett
*/
function leaven_register_featured_image_sidebars() {
$sidebars = array();
if ( class_exists( 'Display_Featured_Image_Genesis' ) ) {
$sidebars[] = array(
'id' => 'over-image-home',
'name' => __( 'Featured Image Overlay (Front Page)', 'leaven' ),
'description' => __( 'This widget area overlays the featured image, but only on the front page.', 'leaven' ),
);
$sidebars[] = array(
'id' => 'over-image',
'name' => __( 'Featured Image Overlay', 'leaven' ),
'description' => __( 'This widget area overlays the featured image.', 'leaven' ),
);
}
foreach ( $sidebars as $sidebar ) {
genesis_register_sidebar( $sidebar );
}
}Code language: PHP (php)Note that the widget areas will only be added to your site if Display Featured Image for Genesis is active. If it isn’t, they’ll disappear, both from the front end of the site, and from the dashboard. At this point, they’ve only been added to the dashboard, so if you add anything to the widget areas, they still won’t show on your site.
Show the Widget Areas Over the Featured Image
To show them, we’ll need another function:
add_action( 'display_featured_image_genesis_before_title', 'leaven_featured_image_widget_area' );
/**
* Add the featured image widget areas to the featured image, if they are active.
*
* @uses leaven_do_sidebar
* @author Robin Cornett
*/
function leaven_featured_image_widget_area() {
$widget_area = 'over-image';
if ( is_front_page() && is_active_sidebar( 'over-image-home' ) ) {
$widget_area = 'over-image-home';
}
leaven_print_sidebar( $widget_area );
}
Code language: PHP (php)You’ll note that by itself, this function doesn’t appear to do anything at all, because it’s not. This function is merely determining which widget area to use. The general 'over-image' widget area is used by default, but if we’re on the front page, and the custom front page widget is active, we’ll use that instead. Then the function calls another function, leaven_print_sidebar, which also doesn’t do any real work of its own, but sets up the rules for the genesis_widget_area function to output the sidebar.
/**
* Outputs the sidebar/widget area to the site. No internal wrap is added.
*
* @param $sidebar Which sidebar to be checked and output (required).
* @param string $class Add an extra class to the sidebar (optional). Otherwise,
* the class used will be the name of the sidebar.
*
* @author Robin Cornett
*/
function leaven_print_sidebar( $sidebar, $class = '' ) {
if ( ! is_active_sidebar( $sidebar ) ) {
return;
}
$area_class = $sidebar;
if ( ! empty( $class ) ) {
$area_class .= ' ' . $class;
}
genesis_widget_area( $sidebar, array(
'before' => '<div class="' . $area_class . '">',
'after' => '</div>',
) );
}Code language: PHP (php)You absolutely do not have to use this function–I created it because I felt like I was performing the same checks every time I added a widget area to my site, and this just simplified things for me.
What Does It Look Like?
Styling the widget area output is totally going to be a personal decision, and will really depend on what you’ve got in it. My front page widget is a simple text widget; the default over image text area has only a search widget in it:
Here’s how I’ve styled that (including some of the styling for the overlay and search forms in general):
/* ## Search Form
-------------------------------------------- */
.search-form input[type="search"] {
margin-right: 5px;
width: -webkit-calc(100% - 63px);
width: calc(100% - 63px);
}
.search-form button[type="submit"] {
background-color: #292c33;
border: 1px solid #fff;
border-radius: 3px;
color: #fff;
height: 58px;
padding: 0;
width: 58px;
}
.search-form button[type="submit"]:after {
display: inline-block;
font: normal normal normal 18px FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
content: '\f002';
}
.search-form button[type="submit"]:active, .search-form button[type="submit"]:focus, .search-form button[type="submit"]:hover {
background-color: #de2f25;
}
/* ## Display Featured Image for Genesis
-------------------------------------------- */
.big-leader {
max-height: 800px;
}
.big-leader .wrap {
top: 40px;
}
.big-leader .entry-title.featured-image-overlay,
.big-leader .archive-title.featured-image-overlay {
bottom: 0;
font-size: 2.5em;
right: 0;
left: 0;
position: absolute;
}
/* ## Featured Image Overlay
-------------------------------------------------- */
.over-image .widget_search input[type="search"] {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.6);
}
.over-image .widget_search button[type="submit"] {
background-color: #292c33;
}Code language: CSS (css)So there isn’t too much to it, but I think those two little hooks provide the opportunity for some good creativity.
Hi Robin,
I hadn’t yet considered this possibility, and thank you for demonstrating it including the code. It recognize some of it from the welcome-text snippet of Studiopress that I have used, but you structured it a bit different so that’s good to explore.
I’m sure this code will become handy at some point, and I notice that after following your solutions for a while and having to solve some problems myself, I’m starting to understand more about how hooks, actions and filters work and can be used. You are one of my teachers on this path.
Thanks
Thank you, Hans! That’s one of the nicest compliments I could receive. I’m glad that my tutorials are helping you understand, rather than just a copy/paste resource.
Thank you Robin. You’ve been so nice to help me setting up this plugin too.
I understand action hooks and php/javascript now somewhat (simple tasks), but don’t yet feel secure in using filters (which hooks can manipulate which data?) and there is still a lot to learn like queries and such but I’m not in a hurry.
Thanks again, Hans
ps. Is it on purpose that I no longer receive emails from your reactions on my comment? Because the last two times I didn’t.
Filters took me a while to wrap my head around, too, but they can be incredibly useful–I was so excited when that finally started making sense to me!
A while back, I deactivated Jetpack, which was handling the comment notifications. I had some site issues and that plugin was one of the casualties–I may need to look into an alternative, or bring it back for that. I promise it’s nothing personal!
Hi Robin,
I’ve used Jetpack for comments on a website but really didn’t like that wordpress.com is than interacting in a way that my visitors can recognize it’s not from my website.
On my own website I now use “Subscribe to Comments Reloaded” and it worked flawlessly from the start, and is also localized in the Dutch language.
I have also tried “Comment Mail” that seems to have a lot of functionality and looks advanced and modern, but is new and I don’t know how lean it is. In the beginning I’ve had some problems getting it to work, so perhaps it’s too early yet to use.
The simplest solution was “Subscribe to Comments Reloaded” (I consider it proven technology), and next to it I use a php&javascript to enhance the user experience (I didn’t like how standard WP reacts if you forget to fill a comment-field and submit) and the plugins “Simple Comment Editing” and “Mention comment’s Authors” (the last one just for fun). It seems to work fine now (after some revisions of the script).
All the above plugins and scripts are described in a blog post of Saumya Majumder (I requested that in a earlier post of him in which he argues why you shouldn’t use third party services for comments). I only localized the script (he considered that to be to advanced for his readers to share) and he seems to know what he’s doing and always tests and uses before writing about it. He has helped me too on occasion.
Perhaps it can help you decide?
Thanks again, Hans
Thanks for sharing that, Hans–I will check it out! I agree about the comment emails from WordPress. They’re certainly convenient, but I don’t know that I care for them all that much. I honestly haven’t thought much about comment notifications, as I’ve never thought that people might be all that interested in them. Maybe I need to change that!
Hi Robin! This is an amazing snippet for genesis and I’d love to use this in my site however it doesn’t seem to be registering. I’ve input all the code (although haven’t styled anything yet), but it seems to just not want to work. The widget areas don’t show up in the widgets section and nothing changes anywhere in my code when I view it with an inspector. I’m using the genesis framework on the minimum pro theme. Do you know why your code wont work for me? I appreciate any feedback! 🙂
Please ignore my last comment. I didn’t realize I needed to download your plugin! However I’m still having troubles as when I’m in the settings uploading the default featured image (I like that idea!) the min size has to be 2001px however my max size for my large widths is always 1px less then the required plugins min size.
For example, your plugin is saying it needs a min size of 2001px but my max file width is 2000. So then I go to Settings > Media to increase the large size max width to the required 2001px, head back to your plugins settings and now all of a sudden the min file size is 2002px! So I can never upload a default featured image.
Also, after the code has been inserted again I still don’t see anything happening?
Any help or advice on this is appreciated. Thanks!
Hey Amber! So you are in the unusual (as far as I know) situation of having a fairly large “large” image size, so the plugin is likely getting a little scrambled trying to evaluate this. You should be able to correct it by telling the plugin to ignore the site’s “large” width and compare to a different number instead. There is a filter for that:
add_filter( 'display_featured_image_genesis_set_minimum_backstretch_width', 'prefix_override_backstretch_width' );function prefix_override_backstretch_width( $width ) {
return 1024;
}
That should help with the first issue. If the newly registered widget areas are not showing in the WordPress admin, that might take a bit more digging; I might need to see your functions file. If you want to create a private gist or pastebin, and use my contact form to send that to me privately, I’d be happy to look it over and see if anything obvious jumps out at me.
Hi Robin,
First, Thank You for this awesome plugin, I really like it. I’ve used this plugin for 2 weeks, and very satisfied.
I would like to know, could I move the [post_date] (or other post meta) just below the title in backstretch featured image?
Like this one: https://goo.gl/Uyu0WY
Yes, you can do that. There is a hook:
display_featured_image_genesis_after_title, which outputs directly after the featured image title, and you can put pretty much whatever you want (within reason) in there. The standard Genesis shortcodes for the post date, etc. should work just fine.Hi, Robin I’ve tried filter the display_featured_image_genesis_after_title, but the date still not showing up
This is the code:
function cfmld_post_info( $post_info ) {if ( is_single() || is_page() ) {
remove_action( 'genesis_before_post_content', 'genesis_post_info' );
}
else{
$post_info = '@ [post_date] [post_comments] [post_edit]';
return $post_info;
}
}
//Reposition Post Date Below Backstretch Featured Imagefunction cfmld_postdate_backstrecth( $postbackstrecth_info ) {
if ( is_single() && class_exists( 'Display_Featured_Image_Genesis' ) ) {
$postbackstrecth_info = '@ [post_date] [post_edit]';
return $postbackstrecth_info;
}
}
add_filter( 'display_featured_image_genesis_after_title', 'cfmld_postdate_backstrecth' );
No, the hook I mentioned is an action hook, not a filter. I’m not sure if your cfmld_post_info function is doing what you want it to, but it’s not being called in the code you posted. Something like this:
add_action( 'display_featured_image_genesis_after_title', 'prefix_change_post_info' );function prefix_change_post_info() {
if ( is_single() ) {
genesis_post_info();
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
}
}
should get you started, although this doesn’t modify the actual post info (and this is for HTML5 themes; you may need the older XHTML post info code instead). This just moves the post info when
is_single()is met. Hope that helps get you started.The cfmld_post_info function is just to hide the author link.
Thank you for your help, work like a charm
Is it possible to change the location of the widget+featured image? I would like to place it under the header (genesis_after_header).
Thanks for sharing your great work. 🙂
Loy
Yes, you can absolutely move the featured image using filters (see the plugin FAQ page). However, the backstretch image is already hooked into the
genesis_after_headerhook, so you may need to just tweak the priority on it, if it’s showing before something else that’s using the same hook. The filter for that is in the same section on the FAQ. HTHthanks 🙂
This won’t work unless you’re using backstretch to display the featured images, right? I’m using the [code]display_featured_image_genesis_move_large_image[/code] filter for my featured images.
Right, this widget area is for the backstretch image only, because that output is quite a bit more extensive, and has hooks.
got it, thanks!
Hey Robin,
It is a great idea you had with your plugin. I am already using the backstretch Plugin for Landingpages on my Website without your Plugin and I am thinking of switching all Posts and Pages to Backstretch with your Plugin.
But I am a bit concerned about SEO. Because Search Bots and Social Media don’t seem to fetch the dynamically added Featured Image. That’s very sad for the ranking of the page.
Do you know a workaround for this?
Kind regards
-Norman
If you use an SEO plugin such as Yoast, it handles adding the proper meta tags to your HTML to pass the featured image on to social media. Something like that is required no matter how you display featured images, since WordPress Core doesn’t do it, and my featured image plugin only handles visual output. Some social sharing plugins may also add the appropriate tags–personally, I have just always used Yoast.
That’s absolutely correct in the first place.
But imagine one of your editors forgot to set the og:image meta with yoast for example:
In this case Facebook has no chance to fetch your featured image because the featured image is added on the client trough backstretch.js after the page is loaded. Its simply not there so it fetches a different image from the content area.
For example:
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Frobincornett.com%2Ffeatured-image-overlay-widget-area%2F
Within the standard implementation of wordpress the featured image is visible because its loaded without ajax.
Isn’t there a method to display the featured image the usual way and apply backstretch on the existing image?
Kind regards
-Norman
Hey Norman! Actually, I apparently completely failed to turn on the “Add Open Graph meta data” setting in Yoast, so thank you for making me check and fix that. With that on, facebook does properly retrieve the featured image (I had it scrape again). You raise a good point about the image being loaded after the page, but that is intentional, so that the script doesn’t prevent the content loading quickly. The image is actually output a second time in the markup as a fallback for users without js enabled, but I don’t know if that’s accessible to scrapers since it’s in a
tag–or it may not show since it’s a background image, rather than inline. I’ll dig into this, and consider the possibility of adding the meta tag, although I would only want to do that if I was sure it wasn’t otherwise being handled. Thanks for the feedback!Youre welcome! I’m glad I can help.
Changing the Fallback image in the noscript area from a background-image to a real could be worth a try.
I expect that (at least) Google is able to understand whats written within the -Tags. (It comes initially with pageload within the DOM and as well as are known HTML-Tags. So it should work). I found this article which is interesting: https://northcutt.com/how-the-noscript-tag-impacts-seo-hint-be-very-careful/
What do you think?
Kind regards
-Norman
This is awesome, I have already been using your plugin for the featured image and have been puzzling over how to do something like this. I am new to genesis and working in the code. had a question, how could I set this up so that it was conditional? Meaning having 2-3 different sections of text that show up on different sets of pages. Also how do I deactivate the page title from displaying? Everyone’s questions and comments are really interesting!
For your first question, although I expect you could register multiple widget areas and handle the output conditionally in the code, it might be easier to use a plugin that allows you to display different widgets conditionally. Jetpack has a module for this and it’s pretty user friendly.
For the second question, you can prevent the title from showing on the backstretch image with an option in the plugin settings. If you want to remove the title from the site, StudioPress has a good library of code snippets which includes that, or you can hide it with CSS.
Hi Robin,
Nice work! The page title is align to the bottom of the featured image, how do I align it to the center of the image instead? Thanks!
You can tackle that a few different ways, but it should just be CSS. This CSS is modified from my site and seems to work:
.big-leader .wrap {top: 0;
}
.big-leader .entry-title.featured-image-overlay,
.big-leader .archive-title.featured-image-overlay {
bottom: 50%;
right: 0;
left: 0;
position: absolute;
}
Thank you, thank you, thank you! This solved a big problem for me!
I believe this the answer to a design problem I’ve had. My client wants the widget title overlaid on the featured image in the front page only! Can’t wait to give this a try. Your tutorial is terrific!