Mosaic Carousel

[skleinfeldt]

For the Testimonials row on the homepage we need a slider for a series of 5 or more quotes. The quotes should be displayed in the same style as is used on the Project pages, with the big quote symbol to the side of the text (for example https://jazkarta.com/projects/uc-davis-opsworks-deployment-and-plone-consulting). There will be no attribution for the quote, but the block of text will link to a Project page where the full quote, attribution, and more information is given.

It should be possible to set

• Background color to be blue, green, or white
• Quote symbol color to be blue, green, white, or black
• Block of text to be white or black

The background color will bleed to the edge.

As on #153 the slider behavior should be controlled by an arrow that is the same design as the related slider arrow and the slider behavior should be circular.

[skleinfeldt]

Per discussion on #155, I guess I want 2 new options on the Mosaic Format menu for rows (this is now ticket #159):

• Blue background, bleed to edge
• Green background, bleed to edge

The white or black text color can be handled by the existing Mosaic Format tile option "Light Color Text". That will also handle the white or black quote color if the quote symbol is actually a character. If the quote character were an image, I could have several colors available.

No matter whether it is an image or a character, with a couple of additional styles available in TinyMCE I could probably use a rich text field on a page to create the testimonials, thus use the tesserae slider solution as for #153.

[alecpm]

I'm not sure the tesserae slider will work for this because it's very much focused around using image backgrounds. It may be a good place to try the redturtle slider mockup pattern

Or maybe the patternslib carousel, though that demo isn't working currently because it's trying and failing to load images over http.

For the background colored tiles, the tesserae background image tile allows you to use a CSS color value for the background instead of or in addition to (as a mask) an image. I think that should handle the colored backgorund and bleed to edge requests, and a pattern based slider could allow you to enter the quotes as HTML in the WYSIWYG.

[skleinfeldt]

Per discussion, we're giving up on the idea of using carousels on the homepage for now. We'll eliminate the need by reducing the number of testimonials and blog/news items to 3, and adding responsive row behaviors to shrink or drop tiles (#159).

If we decide to add carousels in the future, Owl looks promising: https://owlcarousel2.github.io/OwlCarousel2/ The same package could be used to power the Related Slider as well.

The carousel could be a Mosaic row style, which would limit the number of items in the carousel to the max number of mosaic columns. (Which might be OK.) Or the carousel could get the content from the items in some folder, as has often been done in Plone.

Renaming this ticket and putting it on hold.