Add object position to scriptless output

This commit is contained in:
Robin Cornett
2019-05-13 14:26:02 -04:00
parent ed3c2e4130
commit 97e7df22f7
3 changed files with 24 additions and 12 deletions
@@ -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
*
@@ -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}}
.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%}
+1 -10
View File
@@ -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;
}
}