Carousel Gallery forced width is super annoying

  • Resolved A.J.

    (@aj-1)


    3 years, 8 months ago

    I’m trying to use the Carousel Gallery Block with a couple of square images and no matter what I do it’s terrible.

    It’s forcing a width on them that just doesn’t work. Out of the box, they’re cut off at the top because it’s forcing a width on them that makes them taller than the height of the Carousel block.
    So I adjust the height of the block, and they’re still cut off.
    So I try the relative height and now the block is gigantic – which I don’t want. I want this as an accent between some text blocks, not to take over the whole page.

    So I decide to outsmart it and edit the images to be 290×290 and reupload them (because I’m using a carousel height of 300). Perfect, right? Nope! You know what happens?

    It forces the width so now I have super pixelated pictures that are cut off at the top!

    No matter what I try, I cannot get these square images to fit nicely top to bottom inside a carousel the height I want it to be and not be super stretched out.

    Why is this so hard?

    Why is it forcing the width on them and causing all this trouble? And if it want’s a width, why can’t I control that so the images I want to use fit inside a carousel the size I want it to be?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support gdandrija

    (@gdandrija)

    3 years, 8 months ago

    Hey @aj-1,

    I’m sorry to hear about your trouble, can you please send us the page you are having the issues with.

    By default, images are cut off if they are too big to fit the carousel height and stretched out if their size is less than carousel height.

    Have you tried checking the Responsive height setting, as seen below:

    View post on imgur.com

    Also, have you tried testing out with a different theme or by disabling plugins? This issue can easily be plugin/theme-specific.

    I want to help you out but this piece of information may prove to be crucial in replicating your issues.

    Thanks in advance, have a nice day,
    Andrija

    Thread Starter A.J.

    (@aj-1)

    3 years, 8 months ago

    Thanks for the reply.

    I set up a test site with the different examples I described above (probably should have done that straight away)
    https://girlsspeakgeek.com/test/

    I did try responsive height (the third option) but it still didn’t resolve it.

    I also disabled all my plugins and reloaded the page and it looked exactly the same as it did before so it does not seem it’s caused by a plugin.

    Finally, I temporarily changed the theme to Twenty Twenty and the images looked exactly the same (screenshot at the bottom of the test page).

    Plugin Support gdandrija

    (@gdandrija)

    3 years, 8 months ago

    Hey @aj-1,

    Thank you for the info provided and the test page created.

    After spending some time testing I noticed that older versions of CoBlocks seem to have this issue and the update released 3 days ago does not have this issue.

    Are you running the latest version of 2.2.0? If not, please update to the latest version and let me know if this helps

    With the latest version, I uploaded one of your images for testing purposes and I can see that it resolves properly on a default theme as seen below:

    View post on imgur.com

    If not, kindly let me know which settings are you using for the Carousel block.

    The result I got was with the following settings:
    Size: large
    Height in pixels: 290
    Arrow navigation: on

    All other toggles: off

    I hope this helps, have a nice day,
    Andrija

    Thread Starter A.J.

    (@aj-1)

    3 years, 8 months ago

    It’s weird – I had 2.2 installed. I’ve since updated to the latest version of WordPress and updated the plugin to 2.2.1

    Same results (nearly).

    I added two new carousel blocks at the top of my test page using the same settings you defined: https://girlsspeakgeek.com/test/

    The first carousel has a mix of images 1024 and 290 and both images are the same height and cropped, though the second image is pixelated.

    The second carousel with all 290 images are cropped at exactly the same place as the larger images above.

    I also disabled all plugins and reverted to the Twenty Twenty theme and took screenshots – they look exactly the same.

    Your screenshot is slightly cropped but much closer. You mentioned that you used a default theme. I would think that the block would work properly with one of the Twenties themes but if you let me know which theme you use I can try that.

    I still think the block is forcing a width on the image and that is why they are all uniform in where they are cropped. If the Carousel block would allow me to modify that forced, uniform width then I could probably fix the issue myself.

    Thread Starter A.J.

    (@aj-1)

    3 years, 8 months ago

    It also looks like with your screenshot that you have the carousel inside a feature block..?

    While I’ve just using the carousel block by itself. Not sure if that’s relevant or not, I’m grasping at this point 🙂

    Plugin Support gdandrija

    (@gdandrija)

    3 years, 8 months ago

    Hey @aj-1,

    I’m sorry to hear this did not work out.

    The carousel block I used was not inside the feature block, however, by playing around with settings and recreating the situation using your images I was able to reproduce the issue and confirm that width is forced, for which I opened a Github issue so our developers could take a look.

    https://github.com/godaddy-wordpress/coblocks/issues/1631

    Now regarding the scaling itself, I could see that images get a bit blurry, but I did get slightly better results in scaling them by using this tool:

    https://www.photopea.com/

    I hope this helps, have a nice day,
    Andrija

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Carousel Gallery forced width is super annoying’ is closed to new replies.

Tags