Last active
October 17, 2017 17:28
-
-
Save srikat/79ca041ba8339723ce70 to your computer and use it in GitHub Desktop.
How to display full width Featured image below Header in Minimum Pro. http://sridharkatakam.com/display-featured-image-header-minimum-pro/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//* Do NOT include the opening php tag | |
/** | |
* Get featured image markup. | |
* | |
* Only when the single Post or Page has a featured image, and only when | |
* showing the first page when the Page or Post is divided into multiple | |
* pages using next page quicktag. | |
* | |
* @author Sridhar Katakam | |
* @author Gary Jones | |
* @link http://sridharkatakam.com/display-featured-image-header-minimum-pro/ | |
* | |
* @return string|bool Image markup if image could be determined | |
*/ | |
function sk_get_featured_image() { | |
// Uncomment the lines below if you want to limit to *just* featured | |
// images, and not fallback to first-attached images. | |
// if ( ! has_post_thumbnail() ) { | |
// return; | |
// } | |
if ( ! is_page() && ! is_single() ) { | |
return; | |
} | |
if ( (int) get_query_var( 'page' ) > 0 ) { | |
return; | |
} | |
// If post has no featured image, it will attempt to fallback to | |
// first-attached image if the first conditional in this function | |
// is commented out. | |
return genesis_get_image( 'class=aligncenter' ); | |
} | |
add_action ( 'genesis_after_header', 'sk_featured_image', 9 ); | |
/** | |
* Display Featured image after header. | |
* | |
* Only on the first page when the Page or Post is divided into multiple | |
* using next page quicktag. | |
* | |
* Scope: static Pages and single Posts. | |
* | |
* @author Sridhar Katakam | |
* @author Gary Jones | |
* @link http://sridharkatakam.com/link-to-your-tutorial | |
*/ | |
function sk_featured_image() { | |
if ( $image = sk_get_featured_image() ) { | |
echo '<div class="my-featured-image">' . $image . '</div>'; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
//* Do NOT include the opening php tag | |
add_action ( 'genesis_after_header', 'sk_featured_image', 9 ); | |
/** | |
* Display Featured image after header | |
* only on the first page when the Page or Post is divided into multiple using <!--nextpage--> | |
* | |
* Scope: static Pages and single Posts. | |
* | |
* @author Sridhar Katakam | |
* @author Gary Jones | |
* @link http://sridharkatakam.com/display-featured-image-header-minimum-pro/ | |
*/ | |
function sk_featured_image() { | |
if ( has_post_thumbnail() && ( is_page() || is_single() ) && 0 === get_query_var( 'page' ) ) { | |
// Get the URL of featured image | |
$image = genesis_get_image( 'format=url' ); | |
// Get the alt text of featured image | |
$thumb_id = get_post_thumbnail_id( get_the_ID() ); | |
$alt = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true ); | |
// If no alt text is present for featured image, set it to Post/Page title | |
if ( '' == $alt ) { | |
$alt = the_title_attribute( 'echo=0' ); | |
} | |
// Display featured image | |
printf( | |
'<div class="my-featured-image"><img src="%s" alt="%s" class="aligncenter" /></div>', | |
esc_url( $image ), | |
$alt | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.my-featured-image { | |
margin-top: 60px; | |
} | |
.my-featured-image img { | |
width: 100%; | |
margin-bottom: 0; | |
} | |
.my-featured-image + .site-tagline { | |
margin-top: 0; | |
} | |
@media only screen and (max-width: 1023px) { | |
.my-featured-image { | |
margin-top: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment