From 97e7df22f7e05a53a38933d58bd6de9720b4fb2c Mon Sep 17 00:00:00 2001 From: Robin Cornett Date: Mon, 13 May 2019 14:26:02 -0400 Subject: [PATCH] Add object position to scriptless output --- ...ass-displayfeaturedimagegenesis-output.php | 23 ++++++++++++++++++- .../css/display-featured-image-genesis.css | 2 +- sass/display-featured-image-genesis.scss | 11 +-------- 3 files changed, 24 insertions(+), 12 deletions(-) diff --git a/includes/class-displayfeaturedimagegenesis-output.php b/includes/class-displayfeaturedimagegenesis-output.php index 128fca3..6fb924b 100644 --- a/includes/class-displayfeaturedimagegenesis-output.php +++ b/includes/class-displayfeaturedimagegenesis-output.php @@ -87,10 +87,31 @@ class Display_Featured_Image_Genesis_Output { * @since 2.6.0 */ public function add_inline_style() { - $css = sprintf( '.big-leader, .big-leader--scriptless img { max-height: %spx; }', $this->setting['max_height'] ); + $css = sprintf( '.big-leader, .big-leader--scriptless img { max-height: %spx; }', $this->get_setting('max_height' ) ); + $css .= $this->get_object_position(); wp_add_inline_style( 'displayfeaturedimage-style', wp_strip_all_tags( $css ) ); } + /** + * Add object-position to scriptless banner if needed. + * + * @return string + * @since 3.1.0 + */ + private function get_object_position() { + $setting = displayfeaturedimagegenesis_get_setting(); + if ( ! $setting['scriptless'] ) { + return ''; + } + if ( $setting['centeredX'] && $setting['centeredY'] ) { + return ''; + } + $x = $setting['centeredX'] ? '50%' : '0'; + $y = $setting['centeredY'] ? '50%' : '0'; + + return ".big-leader--scriptless img {object-position: {$x} {$y};}"; + } + /** * set body class if featured images are displayed using the plugin * diff --git a/includes/css/display-featured-image-genesis.css b/includes/css/display-featured-image-genesis.css index 1ebd93d..c6aab88 100644 --- a/includes/css/display-featured-image-genesis.css +++ b/includes/css/display-featured-image-genesis.css @@ -1 +1 @@ -.has-leader .site-inner{margin-top:0}.big-leader{overflow:hidden;max-height:600px;position:relative}.big-leader .wrap{position:absolute;right:0;bottom:0;left:0;width:100%;z-index:1}.big-leader--scriptless{height:auto}.big-leader--scriptless img{display:block;-o-object-fit:cover;object-fit:cover}.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,.big-leader--scriptless,.backstretch.no-js{max-height:300px}} \ No newline at end of file +.has-leader .site-inner{margin-top:0}.big-leader{overflow:hidden;max-height:100vh;position:relative}.big-leader .wrap{position:absolute;right:0;bottom:0;left:0;width:100%;z-index:1}.big-leader--scriptless{height:auto}.big-leader--scriptless img{display:block;-o-object-fit:cover;object-fit:cover}.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%} \ No newline at end of file diff --git a/sass/display-featured-image-genesis.scss b/sass/display-featured-image-genesis.scss index 90805f7..9e1d3fb 100644 --- a/sass/display-featured-image-genesis.scss +++ b/sass/display-featured-image-genesis.scss @@ -4,7 +4,7 @@ .big-leader { overflow: hidden; - max-height: 600px; + max-height: 100vh; position: relative; .wrap { @@ -68,12 +68,3 @@ img.featured { max-width: 100%; } - -@media only screen and (max-width: 768px) { - - .big-leader, - .big-leader--scriptless, - .backstretch.no-js { - max-height: 300px; - } -}