The Debut Theme slideshow is great, and it is awesome that text size and position can be set for the slideshow. However, many images are either high key and light all over or contain dark elements, and this presents a problem with multiple images. At times, dark or black text can't be seen on dark images or if the text is set to white, it can't be seen easily on light images. Also, the area of interest in the image changes, so headings and subheadings need to be moved for each image. I know the overlay opacity setting was designed to try to provide text readability, but it doesn't work well for many images as it darkens the image too much.
Currently, the text size and text position are set at the section level while the image, heading text and subheading text are set at the block.settings level. It would be so awesome if we could move the text size and position into the block.section with each individual image and also add color for the heading and subheading text. This would allow a multi-image slideshow that could accommodate almost any image. Text could be colored for each slide and text could be positioned in different areas for each slide. Perfection! :-)
I have made a few attempts at this. I do development, but I am new to Shopify and Liquid. I added heading and subheading text color into the block setting schema. I understand block variables are limited to blocks, but I wondered if there is a way to assign a block variable to a section settings variable that could be rendered in CSS. This way, each block containing individual heading and subheading text colors and positions could be passed to CSS.
Does anyone know of a way to accomplish this? Thanks so much!
Solved! Go to the solution
This is an accepted solution.
I never received any responses to this. I went ahead and took the existing slideshow in Debut and created a new custom slideshow that has all of the properties I described. Now, each image in the slideshow has text adjustments plus additional attributes can be set for individual slides, and I added the ability to make the entire slide a clickable link. These text adjustments are implemented on non-mobile device screens, For mobile, it uses the default Debut text positioning.
Please share your site URL,
So I will check and provide a solution here.