godaddy-wordpress / block-gallery

WordPress gallery blocks built exclusively for Gutenberg
https://wpblockgallery.com
GNU General Public License v2.0
57 stars 13 forks source link

Carousel: adaptiveHeight setting #19

Closed bucketpress closed 4 years ago

bucketpress commented 5 years ago

Since the carousel is using Flickity, we should allow the user toggle adaptive height. This is critical if we want the carousel to work well on both desktop and mobile.

Use case: on desktop for a carousel of landscape images of 4:3 and 16:9 ratios, where the website is contained to about 1200px width. To show the the images resonably well, the user has to set the height to at least 560px. But in a small mobile device, this becomes a carousel that fills up 90% of the screen's height and becomes a portrait carousel, and the images are cropped/zoomed in an way that doesn't do justice to what the images are trying to show.

Having 'adaptiveHeight' set to true, the images are displayed according to the original image ratios defined by the author.

If implemented, when both adaptiveHeight and autoPlay is true, we need to make sure that autoPlay is paused when the carousel is not within the viewport, so that the window's scroll is not changed and shifts other content (that the user is reading at that moment) up or down.

Or if we don't want to implement adaptiveHeight, we should at least allow the user to set a height for mobile devices applied in a media query for 'orientation: portrait'.

richtabor commented 4 years ago

Thanks for the feedback! We're actually focusing development on CoBlocks and deprecating Block Gallery moving forward. CoBlocks has all the same features (and more!) - and each gallery added with Block Gallery can be transformed into its corresponding CoBlocks gallery.