OK joanwalsh,
I have made a patch that automatically centers your picture in sliders so that it will not seems to be cropped on any device.
Here is what I can do. Copy the following code at the very bottom of your functions file (if you are not using a child theme, go in admin and use appearance > editor) :
add_action ('wp_footer','tc_slider_adjust' );
function tc_slider_adjust() {
global $wp_query;
$queried_id = get_queried_object_id();
$queried_id = ( !tc__f('__is_home') && $wp_query -> is_posts_page && !empty($queried_id) ) ? $queried_id : get_the_ID();
$slider_active = esc_attr(get_post_meta( $queried_id, $key = 'post_slider_check_key' , $single = true ));
if ( tc__f('__is_home') && tc__f('__get_option','tc_front_slider') !=null) {
$slider_active = true;
}
if(!$slider_active) {
return;
}
?>
<script type='text/javascript'>
jQuery(document).ready(function() {
!function ( $) {
var imgNbr = 0;
$(".item img").each(function(index, value) {
imgNbr++;
});
//adjustments counter
var count = 0;
//alert(ImgSrc);
function adjust() {
var HeightSliderContainer = jQuery('.carousel-inner').height();
var ImgHeight = jQuery('.item.active img').height();
var Adjustment = Math.ceil((ImgHeight-HeightSliderContainer)/2);
if (Adjustment > 0) {
$('.item.active img').css('top', -Adjustment + 'px');
$('.item.active img').css('position','relative');
count++;
var ImgSrc = $('.item.active img').attr('src');
}
}//end of adjust function
<?php
//we retrieve the carousel value
$delay_value = tc__f( '__get_option' , 'tc_slider_delay' );
?>
var delta = Math.ceil(<?php echo $delay_value ?>)/2;
var adjustinterval = setInterval(adjust, delta);
}(window.jQuery);
});
</script>
<?php
}
Then open the customizer panel and copy / paste the following code in the custom CSS section :
img {
-moz-transition: all 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
-webkit-transition: all 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
-moz-transition: all 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
-o-transition: all 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
transition: all 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
}
This should be it.
Hope this helps and I look forward for your feedback!
