mirror of
https://github.com/10h30/display-featured-image-genesis.git
synced 2026-07-11 18:46:03 +09:00
Add potential scriptless banner option
This commit is contained in:
Robin Cornett
@@ -33,7 +33,7 @@ class Display_Featured_Image_Genesis_Description {
|
||||
$itemprop = ' itemprop="headline"';
|
||||
}
|
||||
|
||||
$setting = displayfeaturedimagegenesis_get_setting();
|
||||
$setting = displayfeaturedimagegenesis_get_setting();
|
||||
if ( ! $setting['keep_titles'] ) {
|
||||
$headline = sprintf( '<h1 class="entry-title"%s>%s</h1>', $itemprop, get_the_title() );
|
||||
}
|
||||
|
||||
@@ -71,7 +71,12 @@ class Display_Featured_Image_Genesis_Output {
|
||||
* @uses is_in_array()
|
||||
*/
|
||||
if ( $width > $large || Display_Featured_Image_Genesis_Common::is_in_array( 'force_backstretch' ) ) {
|
||||
$this->do_backstretch_image_things();
|
||||
$setting = displayfeaturedimagegenesis_get_setting();
|
||||
if ( $setting['scriptless'] ) {
|
||||
$this->launch_backstretch_image();
|
||||
} else {
|
||||
$this->do_backstretch_image_things();
|
||||
}
|
||||
} else {
|
||||
$this->do_large_image_things();
|
||||
}
|
||||
@@ -192,12 +197,17 @@ class Display_Featured_Image_Genesis_Output {
|
||||
public function do_backstretch_image_title() {
|
||||
|
||||
$this->description = new Display_Featured_Image_Genesis_Description();
|
||||
$setting = displayfeaturedimagegenesis_get_setting();
|
||||
|
||||
if ( $this->move_title() ) {
|
||||
$this->remove_title_descriptions();
|
||||
}
|
||||
|
||||
echo '<div class="big-leader">';
|
||||
$class = 'big-leader';
|
||||
if ( $setting['scriptless'] ) {
|
||||
$class .= ' big-leader--scriptless';
|
||||
}
|
||||
echo '<div class="' . esc_attr( $class ) . '">';
|
||||
echo '<div class="wrap">';
|
||||
|
||||
do_action( 'display_featured_image_genesis_before_title' );
|
||||
@@ -219,14 +229,12 @@ class Display_Featured_Image_Genesis_Output {
|
||||
// close wrap
|
||||
echo '</div>';
|
||||
|
||||
// if javascript not enabled, do a fallback featured image
|
||||
$image_id = Display_Featured_Image_Genesis_Common::set_image_id();
|
||||
$image = wp_get_attachment_image( $image_id, 'displayfeaturedimage_backstretch', false, array(
|
||||
'alt' => $this->get_image_alt_text( $image_id ),
|
||||
'class' => 'post-image',
|
||||
'aria-hidden' => 'true',
|
||||
) );
|
||||
printf( '<noscript><div class="backstretch no-js">%s</div></noscript>', $image );
|
||||
$image = $this->get_banner_image();
|
||||
if ( $setting['scriptless'] ) {
|
||||
printf( '<div class="big-leader__image">%s</div>', $image );
|
||||
} else {
|
||||
printf( '<noscript><div class="backstretch no-js">%s</div></noscript>', $image );
|
||||
}
|
||||
|
||||
// close big-leader
|
||||
echo '</div>';
|
||||
@@ -234,6 +242,26 @@ class Display_Featured_Image_Genesis_Output {
|
||||
add_filter( 'jetpack_photon_override_image_downsize', '__return_false' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the banner/noscript image.
|
||||
* @since 3.1.0
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
protected function get_banner_image() {
|
||||
$image_id = Display_Featured_Image_Genesis_Common::set_image_id();
|
||||
return wp_get_attachment_image(
|
||||
$image_id,
|
||||
'displayfeaturedimage_backstretch',
|
||||
false,
|
||||
array(
|
||||
'alt' => $this->get_image_alt_text( $image_id ),
|
||||
'class' => 'post-image',
|
||||
'aria-hidden' => 'true',
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the alt text for the featured image. Use the image alt text if filter is true.
|
||||
*
|
||||
@@ -509,6 +537,7 @@ class Display_Featured_Image_Genesis_Output {
|
||||
*/
|
||||
protected function get_minimum_backstretch_width() {
|
||||
$common = $this->get_common_class();
|
||||
|
||||
return $common->minimum_backstretch_width();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,66 +1 @@
|
||||
.has-leader .site-inner {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.big-leader {
|
||||
overflow: hidden;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.backstretch.no-js {
|
||||
background-size: cover;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.big-leader .wrap {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.big-leader .entry-title.featured-image-overlay,
|
||||
.big-leader .archive-title.featured-image-overlay {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.big-leader .excerpt,
|
||||
.big-leader .archive-description {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
background: rgba(255,255,255,0.85);
|
||||
}
|
||||
|
||||
.big-leader p {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.home .big-leader p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.big-leader p,
|
||||
.big-leader .excerpt .entry-title,
|
||||
.big-leader .archive-description .archive-title,
|
||||
.home .big-leader p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img.featured {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
.big-leader,
|
||||
.backstretch.no-js {
|
||||
height: 300px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.has-leader .site-inner{margin-top:0}.big-leader{overflow:hidden;max-height:600px;position:relative}.big-leader.--scriptless{height:auto}.big-leader__image img{width:100vw}.big-leader .wrap{position:absolute;right:0;bottom:0;left:0;width:100%;z-index:1}.big-leader .entry-title.featured-image-overlay,.big-leader .archive-title.featured-image-overlay{color:#fff;text-align:center}.big-leader .excerpt,.big-leader .archive-description{margin-bottom:24px;padding:24px;background:rgba(255,255,255,.85)}.big-leader p{margin-top:18px;margin-bottom:0}.home .big-leader p{margin-top:0}.home .big-leader p:last-child{margin-bottom:0}.big-leader .excerpt .entry-title,.big-leader .archive-description .archive-title{margin-bottom:0}.backstretch.no-js{max-height:600px}img.featured{max-width:100%}@media only screen and (max-width: 768px){.big-leader,.backstretch.no-js{max-height:300px}.big-leader--scriptless,.backstretch.no-js--scriptless{height:auto}}
|
||||
@@ -45,6 +45,7 @@ class DisplayFeaturedImageGenesisGetSetting {
|
||||
'large_priority' => 12,
|
||||
'large' => array(),
|
||||
'image_size' => 'displayfeaturedimage_backstretch',
|
||||
'scriptless' => 0,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -92,7 +92,7 @@ class Display_Featured_Image_Genesis_HelpTabs extends Display_Featured_Image_Gen
|
||||
array(
|
||||
'id' => $this->id . 'sitewide',
|
||||
'title' => __( 'Optional Sitewide Settings', 'display-featured-image-genesis' ),
|
||||
'content' => $this->image_size() . $this->skip_front() . $this->keep_titles() . $this->excerpts(),
|
||||
'content' => $this->image_size() . $this->javascript() . $this->skip_front() . $this->keep_titles() . $this->excerpts(),
|
||||
),
|
||||
array(
|
||||
'id' => $this->id . 'archives',
|
||||
@@ -296,4 +296,16 @@ class Display_Featured_Image_Genesis_HelpTabs extends Display_Featured_Image_Gen
|
||||
|
||||
return $help;
|
||||
}
|
||||
|
||||
/**
|
||||
* Help text for the disable JavaScript setting.
|
||||
* @since 3.1.0
|
||||
* @return string
|
||||
*/
|
||||
protected function javascript() {
|
||||
$help = '<h3>' . __( 'Disable JavaScript', 'display-featured-image-genesis' ) . '</h3>';
|
||||
$help .= '<p>' . __( 'Optionally disable JavaScript for your backstretch images. The output will mostly be similar, although some behavior will change. For example, without the backstretch script, images will always display full width, regardless of screen size (with backstretch, you\'ll often only see the center of the image on small screens.', 'display-featured-image-genesis' ) . '</p>';
|
||||
|
||||
return $help;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,6 +106,14 @@ class Display_Featured_Image_Genesis_Settings_Define extends Display_Featured_Im
|
||||
),
|
||||
'type' => 'select',
|
||||
),
|
||||
array(
|
||||
'id' => 'scriptless',
|
||||
'title' => __( 'Disable JavaScript', 'display-featured-image-genesis' ),
|
||||
'callback' => 'do_checkbox',
|
||||
'type' => 'checkbox',
|
||||
'section' => 'main',
|
||||
'label' => __( 'Instead of using the Backstretch featured image, use a banner image which relies only on CSS.', 'display-featured-image-genesis' ),
|
||||
),
|
||||
array(
|
||||
'id' => 'exclude_front',
|
||||
'title' => __( 'Skip Front Page', 'display-featured-image-genesis' ),
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
.has-leader .site-inner {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.big-leader {
|
||||
overflow: hidden;
|
||||
max-height: 600px;
|
||||
position: relative;
|
||||
|
||||
&.--scriptless {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&__image img {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.entry-title.featured-image-overlay,
|
||||
.archive-title.featured-image-overlay {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.excerpt,
|
||||
.archive-description {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
background: rgba(255,255,255,0.85);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 0;
|
||||
|
||||
.home & {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.home & {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.excerpt .entry-title,
|
||||
.archive-description .archive-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.backstretch.no-js {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
img.featured {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
.big-leader,
|
||||
.backstretch.no-js {
|
||||
max-height: 300px;
|
||||
|
||||
&--scriptless {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user