WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Slider Image Size (61 posts)

  1. jenmatt
    Member
    Posted 1 year ago #

    Hi,

    What are the image dimensions for slider images? The images I have used are cut off etc.

    Thanks

  2. nikeo
    Member
    Theme Author

    Posted 1 year ago #

    Hi,
    Best dimensions for slider images are width 1170px and height 500px.
    Hope this will help and thanks for using customizr!
    Nicolas

  3. mirkovonberner
    Member
    Posted 1 year ago #

    Thanks for this info. Would be good if this info is in the theme or in the manual.
    Thanks.

  4. ErebusProductions
    Member
    Posted 1 year ago #

    Hi,

    I have tried using the specified dimensions for the slider but my images are being cropped.
    Can you offer any advise?

    Many thanks.

  5. ElectricFeet
    Member
    Posted 1 year ago #

    They will always be somewhat cropped at the bottom as the browser screen size changes. It's part of being responsive.

    A better way would be if the theme allowed us to choose where to crop from: top / bottom / top and bottom. But I don't think that the underlying carousel of the twitter bootstrap allows this.

  6. blogmom
    Member
    Posted 1 year ago #

    it would be great if the scaling and cropping could be turned off. some of my clients want very specific images on their sites, and don't like them to scale or change.

  7. blogmom
    Member
    Posted 1 year ago #

    full width = uncheck. oops, I should have noticed that!! :)
    (love the theme!)

  8. accessbit
    Member
    Posted 1 year ago #

    Can I use smaller than above stated 1170px and height 500px.
    Like 960px x 320
    Thank you

  9. garbunk
    Member
    Posted 1 year ago #

    The default images are 1200x500. I spent some time getting a grid of images aligned for the slider, only to find that the bottom got cut off. I'm glad this post was here because this was my exact same question. I think that the sample images should be 1170x500 so that anyone using them as a template gets a size that will display correctly. Thanks!

  10. garbunk
    Member
    Posted 1 year ago #

    Actually, scratch that. The bottom is what's getting cut off, so altering the width to 1170 wouldn't help. 1200 seems OK for the size of the page, but what should the height be?

  11. garbunk
    Member
    Posted 1 year ago #

    I just verified that even after resizing to 1170x500, the bottoms of the slider images are still being cut off. Please see http://www.ledubooks.com/ (the third slider with the grid) for demonstration.

    What is the correct size for the slider images?

  12. ElectricFeet
    Member
    Posted 1 year ago #

    1170x500.

    See my post here for why the slider gets cropped.

  13. accessbit
    Member
    Posted 1 year ago #

    Does anyone know in what files in php those sizes of the sliders written. I can probably go ahead to modify those from the php file. It is awfully huge size to occupy such a valuable real estate on a website to sue 100x500 pxls. I can probably rewrite the code and give it to all of you to modify the Slider sizes!
    Can anyone help me?
    Thank you all!

  14. garbunk
    Member
    Posted 1 year ago #

    Eh...this is driving my client crazy. She doesn't understand why she can't see the bottom of the image and is insisting that it be redone. I keep explaining I can resize the image but the underlying graphic is still 1170x500 and will still be subject to cropping. I would much rather have an option to keep the original aspect ratio.

  15. RustyWood
    Member
    Posted 1 year ago #

    @garbunk

    I think the image is cropped if the slider is set to "Full width slider" uncheck this and the images seem to be fine.

  16. garbunk
    Member
    Posted 1 year ago #

    By this do you mean "Slider Layout : set the slider in full width"?

    It's already set to "yes". I changed it to "no" and nothing appears to have changed. Slider viewable at http://www.ledubooks.com

  17. RustyWood
    Member
    Posted 1 year ago #

    By this do you mean "Slider Layout : set the slider in full width"?

    Yes, but what I've found is if I change it on page nothing happens for some reason. If you uncheck the box in the Custom- Cutomizr Settings > Front Page > SLIDER OPTIONS > Full Width slider > uncheck this seems to work.

    Hope that helps

  18. garbunk
    Member
    Posted 1 year ago #

    It worked! Thanks so much! I would have never figured that out on my own. :)

  19. joanwalsh
    Member
    Posted 11 months ago #

    hi i'm having problem with slider too. i want the full width slider. i used this tool to get the right ratio http://andrew.hedges.name/experiments/aspect_ratio/ so i put in 1200 / 500 and in the next row i put in the width of my photo 1024 and so it gave me the height 427.

    ...thing is, yes its a smaller pixel (the original photo i have ) but i have done the same ratio... so why is it just cropping it anyway.

    i tried the non-full width slider and it still crops my photo..showing more sky when i saved it as showing more rock... but i want the full width slider and of course want it to show what i cropped and saved.

    please advise.

  20. joanwalsh
    Member
    Posted 11 months ago #

    mindyou..

    what is the ratio / pixels for full width slider ? and
    what is the ratio / pixels for non-full width slider ?

  21. joanwalsh
    Member
    Posted 11 months ago #

    i reloaded one of the photos to the slider, recropped it etc etc and still the slider is showing a whole bunch in the photo that i cropped out. it doesnt make sense at all...at all.

    and i have refreshed and all that.

    is it a customizr glitch?? is there any other theme that would be better?

    breathing out.. :)

  22. joanwalsh
    Member
    Posted 11 months ago #

    ok im going to start again and take the advice of nikeo and base the ratio on 1170 x 500 px. here goes..

  23. joanwalsh
    Member
    Posted 11 months ago #

    NOPE, doesnt make a blind bit of difference! still showing a load of sky i had cropped out ( reloaded image . cropped and all to the tee) . i did the ratio right and still all.... i will refrain from using extra words to express meself here.

  24. joanwalsh
    Member
    Posted 11 months ago #

    This the front page of my website im building http://joanwalsh.ie/ please look at the slider and the extra photo i posted that is the one uploaded to slider) on the page. correct ratio. unresolved for me. thanks

  25. nikeo
    Member
    Theme Author

    Posted 11 months ago #

    Hi Joanwalsh,
    I am working on a fix. I come back to you.
    Regards,
    Nicolas

  26. joanwalsh
    Member
    Posted 11 months ago #

    oh thanks a million Nikeo :) you're a star.

  27. nikeo
    Member
    Theme Author

    Posted 11 months ago #

    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!

  28. joanwalsh
    Member
    Posted 11 months ago #

    oh thanks, i am going to copy the 1st code into the very bottom of the box ( i hope that is correct ) .. titled "Customizr: Stylesheet (style.css)"

    do you mean i copy and paste the above code and paste it below where it says ".....IMPORTANT : If you write your CSS code below, it will be deleted when you update the theme.
    If you want to personnalize the css of Customizr, use the Custom CSS section in the Customizer screen OR create a child theme a add your css code in the style.css file.
    */ "

    ***and paste it here*** yes? and then click 'update button', yes ?

    (and then i closed that and continue to the next step in the other area you mention)

  29. joanwalsh
    Member
    Posted 11 months ago #

    ok 1st step DONE :)

  30. joanwalsh
    Member
    Posted 11 months ago #

    ok 2nd step done.

    and now also updating customizr theme.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic