[Resolved] Make a full feature out of full page image headers with titles

[Paul]

Hey Tom.

Take a look at this… I know it’s not WordPress, and ignore the fact it’s a video and not an image.
http://www.esquire.com/sports/a39499/ronda-rousey-esquire-1115/

See how the image/video is a full-screen image, with the blog title at the bottom. Notice too how the title meta (like author and date etc.) still show on the page header.

I have tried in vain to recreate this using combinations of your page header plugin and/or featured image.

Take a look at http://jackedhacked.com/how-to-build-huge-calves/

That’s the closest I can get right now using just the capabilities you provide in the template and plugins.

Problems:

1. I can not get the title to the bottom. Selecting anything other than “Center your content vertically?” will not respect the “Make background image full screen?” setting, leaving you with a small image with padded title at the top.

2. Hiding the page title also hides the metadata associated with it. Sad face.

3. Using the page header option in this way completely messes with the blog page. Take a look at http://jackedhacked.com/blog/. Why is a “page header” showing on the blog post in the index?

Even if this had worked perfectly, I will have three or four non-tech-savvy contributors on this site. So the chances of them correctly setting the header image, and typing the correct header content, including check-boxes HTML and styling, on every blog post is approximately zero.

Two thoughts.

A) Can you give me some pointers as to how to drop your page header plugin, use the featured image instead, and modify the templates(?) so that page title comes out over the header image like in the examples, with title meta at the top of the content page?

B) This would make a great feature for GeneratePress. Let the user add a standard wordpress page title, excerpt and featured image, and then have a GeneratePress “Use full-page cover image title” (wordy!) option that will use the featured image, title and title meta in the way I described. You could have another checkbox to include the “excerpt” text as sub-text (h2 or h3) under the title. With simple CSS rules, owners could style and size the title, excerpt and meta accordingly.

Thoughts?

[Tom]

Hi there,

Thanks for the awesome post!

1. Adding this line of CSS can accomplish this:

.vertical-center-enabled {
    vertical-align: bottom;
}

2. How are you hiding the title?

3. It will only display on the blog index if you enable that image in the Page Header metabox (Add to blog excerpt (if no Featured Image is set)).

With that being said, I agree this would be a cool feature. I have a rebuild planned for the Page Header add-on, and something like this could make its way into it 🙂

[Paul]

Thanks Tom.

#1 — great. Good to know I can override that center align with custom styling.

#2 — Using your Disable Elements plug-in, hiding the Content Title.

#3 — Ok. I see what happened here. I had previous set the “Add to blog excerpt” checkbox. However, that checkbox is hidden when you select “Use image (from image tab) as a background image?”. So it was hidden AND checked.

Here’s the thing though, for #3, I want the image in the blog excerpt. The only way to do that is to set the Featured Image as well. So I’ve done that, and it’s close to the desired effect. Adding your CSS override would somewhat complete the effect, although I am still missing my title meta (author, date/time etc.)

The biggest challenge is like I said, I’ll never get my authors to remember or consistently set the header image, header content (including writing HTML), check all the right boxes, and set the featured image.

You really just want to be able to set the Title, Featured Image and/or Excerpt, and then tick Tom’s shiny new “Make this page title look awesome with full-screen image and shadow title/meta overlay” checkbox. BOOM.

As an aside, Tom, for personal bloggers and site owners, all your plugins and features are awesome. They are really very flexible and give a lot of control without resorting to PHP coding and CSS overrides. However, if you want wider appeal to site “builders” where lay-people will eventually USE the blogs and sites they create, creating some powerful yet dramatically simplified options would go a long way.

As another general guideline, the more you can leverage the standard WP meta, the better.

For example, for my feature, at least as described, you’re leveraging the title and featured image (and optionally, excerpt), something anyone and everyone can understand and set, and then creating a dynamic, full-page image header with parallax and title/excerpt overlay, all with a single checkbox click.

Of course, if you can find a way to do both, giving one-click visual bombs to users, and all-around control and flexibility for power-users, all the better.

Loving what you do, and happy to work with you to spec this and more features out. Just let me know how I can help.

[Tom]

2. Fixed! Thanks for pointing that out 🙂

3. This will be a part of the total rebuild of that metabox for sure – lots of improvement to be made.

Thanks for the ideas and feedback – I really appreciate it. I plan on implementing something very similar to what you’re explaining in the update for Page Header. More simplified options, but also with the option to get a little advanced.

Thanks again!

[Sven]

Hi Tom,

have you already started with re-programming/advancing “Tom’s shiny new “Make this page title look awesome with full-screen image and shadow title/meta overlay” checkbox”? What’s the current state?

Would be cool, if one could customize, if it affects posts and/or page layouts. I imagine a general setting and page individual setting like there already is in the GP-theme…

Regards, Sven

[Tom]

Hi Sven,

Focusing on the next GP update coming out this week, then I’m on to rebuilding the Page Header and Sections add-ons. Excited 🙂

[Author]

Posts