diff --git a/includes/class-displayfeaturedimagegenesis-description.php b/includes/class-displayfeaturedimagegenesis-description.php index 320ee64..6b2aee6 100644 --- a/includes/class-displayfeaturedimagegenesis-description.php +++ b/includes/class-displayfeaturedimagegenesis-description.php @@ -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( '

%s

', $itemprop, get_the_title() ); } diff --git a/includes/class-displayfeaturedimagegenesis-output.php b/includes/class-displayfeaturedimagegenesis-output.php index 057e5a4..9cca4e5 100644 --- a/includes/class-displayfeaturedimagegenesis-output.php +++ b/includes/class-displayfeaturedimagegenesis-output.php @@ -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 '
'; + $class = 'big-leader'; + if ( $setting['scriptless'] ) { + $class .= ' big-leader--scriptless'; + } + echo '
'; echo '
'; do_action( 'display_featured_image_genesis_before_title' ); @@ -219,14 +229,12 @@ class Display_Featured_Image_Genesis_Output { // close wrap echo '
'; - // 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( '', $image ); + $image = $this->get_banner_image(); + if ( $setting['scriptless'] ) { + printf( '
%s
', $image ); + } else { + printf( '', $image ); + } // close big-leader echo '
'; @@ -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(); } diff --git a/includes/css/display-featured-image-genesis.css b/includes/css/display-featured-image-genesis.css index 9fe90de..16535b5 100644 --- a/includes/css/display-featured-image-genesis.css +++ b/includes/css/display-featured-image-genesis.css @@ -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}} \ No newline at end of file diff --git a/includes/settings/class-displayfeaturedimagegenesis-getsetting.php b/includes/settings/class-displayfeaturedimagegenesis-getsetting.php index c7370b9..5115ada 100644 --- a/includes/settings/class-displayfeaturedimagegenesis-getsetting.php +++ b/includes/settings/class-displayfeaturedimagegenesis-getsetting.php @@ -45,6 +45,7 @@ class DisplayFeaturedImageGenesisGetSetting { 'large_priority' => 12, 'large' => array(), 'image_size' => 'displayfeaturedimage_backstretch', + 'scriptless' => 0, ) ); } diff --git a/includes/settings/class-displayfeaturedimagegenesis-helptabs.php b/includes/settings/class-displayfeaturedimagegenesis-helptabs.php index e8de242..76894f7 100644 --- a/includes/settings/class-displayfeaturedimagegenesis-helptabs.php +++ b/includes/settings/class-displayfeaturedimagegenesis-helptabs.php @@ -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 = '

' . __( 'Disable JavaScript', 'display-featured-image-genesis' ) . '

'; + $help .= '

' . __( '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' ) . '

'; + + return $help; + } } diff --git a/includes/settings/class-displayfeaturedimagegenesis-settings-define.php b/includes/settings/class-displayfeaturedimagegenesis-settings-define.php index 80e5e0c..9ac899c 100644 --- a/includes/settings/class-displayfeaturedimagegenesis-settings-define.php +++ b/includes/settings/class-displayfeaturedimagegenesis-settings-define.php @@ -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' ), diff --git a/sass/display-featured-image-genesis.scss b/sass/display-featured-image-genesis.scss new file mode 100644 index 0000000..4376c60 --- /dev/null +++ b/sass/display-featured-image-genesis.scss @@ -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; + } + } +}