How to control the slider images cropping and display?

  • Greybox

    #49339

    With the latest Graphene I lost control over how the slider images are cropped and displayed and have to disable the slider until I find the solution. Before I was able to use Post Thumbnail Editor plugin to manually crop “graphene_slider” image and use it in “Thumbnail and excerpt” option. Now it appears that previously generated “graphene_slider” thumbnails are ignored and just take up disk space. Both STANDARD and CARD options crop the images the way they want and this often produces very strange results when the slider zooms to unsuitable parts of the original image.

    Is there a way to control the slider images cropping and display?

    Admin

    Syahir Hakim

    #49341

    The slider is still using the graphene_slider image size. The difference now is that the following CSS style is being applied on the slider image:

    .carousel .item {
    	background-size: cover;
    	background-position: center center;
    }
    

    That does two things:

    1. If the slider image is smaller than the slider’s available space, enlarge the image to cover the available space.
    2. Center the image within the available space.

    This ensures that the available space for the slider image is always fully covered and no empty whitespace is left. We had to do this since Graphene users can use arbitrary slider width and height, so we can’t fix a single dimension for the slider image.

    The side effect of this is some part of the image’s edges may not be visible, especially so if the image’s aspect ratio is significantly different than the slider’s aspect ratio. You should still be able to use plugins like Post Thumbnail Editor to manually crop the image. Just make sure you’re cropping to the exact slider image dimension as per applicable to your site.

    Even then, the dimension will still be adjusted according to the device the website is displayed on. On smaller devices like tablets and phones, you will see different image dimension than on a desktop PC.

    Because of this large variability, perhaps the best solution is to make sure any image you use for the slider has some margin of “croppable” area around the image.

    cleevewebby

    #49343

    Why doesnt the image scale rather than crop to smaller spaces?

    Greybox

    #49344

    I would also prefer scaling rather than cropping.

    And also CARD option ratio is almost square 1:1 ratio, and STANDARD is wide 3.84:1 ratio. Wouldn’t it make sense to use “thumbnail”, “large” or another image size thumbnail with 1:1 ratio for CARD option and “graphene_slider” for STANDARD slider? This would be MUCH easier to create and control slider images.

    Admin

    Syahir Hakim

    #49345

    Why doesnt the image scale rather than crop to smaller spaces?

    The aim is to ensure the available space is filled. The image is first cropped to a best-guess estimate of the slider’s dimension, and then scaled so that it completely fills the container it’s in. See this page on how this property works: https://css-tricks.com/almanac/properties/b/background-size/

    This way, we can balance between performance (cropping and resizing reduce the image file size) and appearance (ensuring available space is filled).

    And also CARD option ratio is almost square 1:1 ratio, and STANDARD is wide 3.84:1 ratio. Wouldn’t it make sense to use “thumbnail”, “large” or another image size thumbnail with 1:1 ratio for CARD option and “graphene_slider” for STANDARD slider? This would be MUCH easier to create and control slider images.

    As I mentioned earlier, these ratios can and do vary widely. The image is almost square in card option only if you’re using the default settings. If you change the content column layout, column width, extend the slider to full width, or choose a number of other different settings, the slider image dimension in card option will change significantly and won’t be square anymore. The same goes for the other slider display options.

    In the next update, we’ll be including a routine that will better estimate the actual dimension of the image required based on the many different settings that can affect it. This can never be 100% precise though, so some allowances will still have to be made.

    Greybox

    #49349

    I would agree that the idea of STANDARD option is to fill all available space. But in CARD option not all available space is not filled. Could you turn the CARD option into “old school” scaling without any cropping, or introduce another option similar to old “Thumbnail and excerpt” without scaling?

    Greybox

    #49370

    Sorry, I meant to say “without cropping”. In other words, can we use CARD or reintroduce “Thumbnail and excerpt” option with scaling without cropping?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.