A reader mailed me today:
I would like to add a different full-width image, to every inner page, below the header, in Minimum Pro.
In this article I show how we can show featured image (if present) on single Posts and Pages below the .site-header in Minimum Pro. We are going to center the featured image and set its width to 100% so it fills the full page.
Screenshots:
A particular single Post:
A static Page:
Add the following in functions.php:
Thank you my friend. Can’t wait to try this!
Thank you so much! This advice, as well as the
How to remove site tagline section in Minimum Pro
as well as the
How to push Footer all the way down when there’s little content in Genesis
has been of utmost value to me the last days. I’m so grateful.
Testing your code for How to remove site tagline section in Minimum Pro I see that it also is better than the original Minimum (non html5) theme code where I had to choose a 1600x600px image. Now I can choose whatever image and it will adjust to the full width.
One question: To me it seems like the space below the Featured full width image and the following content becomes too long – it looks as that space is the same as the space earlier occupied by the Tagline area. Am I right? How can this be adjusted?
Thank you for your generous donation.
When you are using the codes in both http://www.sridharkatakam.com/remove-site-tagline-section-minimum-pro/ and this article, the following is no longer needed:
http://pastebin.com/raw.php?i=2HSKTLvc
Just comment or delete it.
Thanks!
If I remove this code
.site-inner {margin-top: 60px;
padding: 40px 0;
}
from your
How to remove site tagline section in Minimum Pro
the content in the pages where I use the full width featured image will look alright, but when I start a page with text, the heading of the page will come underneath the header. You can see what happens here:
test page
Is this possible to solve?
Try this:
1) Leave the following as is.
.site-inner {
margin-top: 60px;
padding: 40px 0;
}
2) Add
.my-featured-image + .site-inner {
margin-top: 0;
}
Thanks! That did it.
I also want to share something I learnt some months ago by contacting StudioPress support. I had found it a bit ugly to see the header flicker side-wards between the Minimum theme’s pages with and the pages without the full-width featured image.
I learnt that this the header’s flickering behavior was caused by short pages where WP first thinks scrolling isn’t necessary, until it realizes that it also has to add a image on top, and when switching between short and long pages.
For me the solutions for a steady site header was to force vertical scroll on every page, like this:
body {overflow-y: scroll;
}
I wonder if it is possible to individualize the featured image where I use pagination, ie where I use the code?
Now the featured image will repeat on top of every page: Example repeated featured image on paginated pages
sorry, I didn’t add the code:
Sorry, didn’t understand how to use the code attribute. Trying again. I mean the
I apologize for littering your valuable website with my problem how to show codes not intended to show. I guess everybody understand that I talk about the WP nextpage code that can be inserted in long pages to divide them on several ones.
No problem.
I have updated my post above with an updated functions.php code to take care of this.
The new code works perfect. Only the first page in pages that use the wordpress nextpage quicktag now shows the fullwidth featured image. Thanks!
Hi there.
This is an excellent idea, the only problem is that you wont keep dimensions throughout in your global settings. This means if you have different image sizes, every page and every post will look different.
I am using your above code successfully. Thank you very much!
My problem is that the featured image is showing up on the portfolio posts (minimum theme) where I don’t want them to.
Is there any way to stop that from happening on the portfolio posts or on individual pages/post?
Thanks again.
Dear Srid,
Thanks for this simple tutorial. Is it possible to add a widget are over the featured image like you do in this post – http://sridharkatakam.com/overlay-opt-form-background-image-header-minimum-pro/ ??
Thanks in advance!!
Sridhar,
Thanks for the excellent tutorial. I’ve implemented it and all is well, except that I’m seeing a sliver of whitespace between the bottom of my feature image and the top of the tagline area on my pages – see here:
http://www.kiersdev.com/mas2/?page_id=6
I’m not sure where this is coming from as it doesn’t show in your screenshot and you don’t seem to have any padding or margin on the bottom of the feature image area. I don’t see anything to do with the tagline CSS that would cause this either. Any thoughts?
Thanks for all the work you post, your site is an invaluable resource for me.
-Kent
I was wondering if you could implement this on just certain pages in the site by using the page id or something?
Dear Sridhar,
thank you very much for your perfect studiopress tutorials!!
I am using your above code successfully.
One question, maybe you have an idea. Do you think this functions (display full width featured image) is also possible for the header?
Thanks in advance for your answer!
KInd Regards Sam
Hi Sam, hi Sridhar, a tutorial for a full width featured image for the header would be great.
Sridhar:
First… thanks for all your work/tutorias you post her!!
Is it also possible to display a full width featured image below the header of the agentpress pro theme?
Warm Regards
– Dominik
Is there a way to add the same scrolling effect to the featured images on single posts and pages as on the Minimum Home Page?
How would you modify this to exclude a CPT?
Do you want this to work on only static Pages and standard Posts but not on single entries of any other post type?
Correct
Try changing http://pastebin.com/raw/zn7BfMqY to http://pastebin.com/raw/3WnU2iZ0.