Improve responsive checks

Compare image width AND height to available space and load appropriate images accordingly.
This commit is contained in:
Robin Cornett
2017-02-08 14:41:15 -05:00
parent 460a492acf
commit 6321d21813
2 changed files with 17 additions and 11 deletions
@@ -153,6 +153,11 @@ class Display_Featured_Image_Genesis_Output {
'large' => $large[3] ? $large[1] : '',
'medium_large' => $medium_large[3] ? $medium_large[1] : '',
),
'image_height' => array(
'backstretch' => $this->item->backstretch[2],
'large' => $large[3] ? $large[2] : '',
'medium_large' => $medium_large[3] ? $medium_large[2] : '',
),
'height' => (int) $this->setting['less_header'],
'centeredX' => (bool) $backstretch_vars['centeredX'],
'centeredY' => (bool) $backstretch_vars['centeredY'],
+12 -11
View File
@@ -1,9 +1,9 @@
( function ( document, $, undefined ) {
(function ( document, $, undefined ) {
'use strict';
var plugin = {};
plugin.init = function() {
plugin.init = function () {
_backstretchHandler();
};
@@ -20,12 +20,11 @@
}
$el.css( {
height: ( $(window).height() ) - ( [ plugin.params.height ] ) + 'px'
height: ( $( window ).height() ) - ( [plugin.params.height] ) + 'px'
} );
var source = _getSource();
$el.backstretch(
[source], {
[ _getSource() ], {
centeredX: Boolean( plugin.params.centeredX ),
centeredY: Boolean( plugin.params.centeredY ),
fade: parseInt( plugin.params.fade )
@@ -37,24 +36,26 @@
}
function _getSource() {
var source = plugin.params.source.backstretch;
var source = plugin.params.source.backstretch,
width = window.innerWidth,
height = $( '.big-leader' ).height();
if ( plugin.params.source.large && window.innerWidth <= plugin.params.width.large ) {
if ( plugin.params.source.large && ( plugin.params.width.large >= width && plugin.params.image_height.large >= height ) ) {
source = plugin.params.source.large;
}
if ( plugin.params.source.medium_large && window.innerWidth <= plugin.params.width.medium_large ) {
if ( plugin.params.source.medium_large && ( plugin.params.width.medium_large >= width && plugin.params.image_height.medium_large >= height ) ) {
source = plugin.params.source.medium_large;
}
return source;
}
$(document).ready(function () {
$( document ).ready( function () {
plugin.params = typeof BackStretchVars === 'undefined' ? '' : BackStretchVars;
if ( typeof plugin.params === 'undefined' ) {
return;
}
plugin.init();
});
} );
} )( document, jQuery );
})( document, jQuery );