Hello,

First of thanks for the distribution so far it seems pretty awesome!

I have a small question, I'm not sure this is the right place to post it... anyhow, I want to modify the twig file for the rendering of the paragraph carousel so I get something similar to this:
https://bootsnipp.com/snippets/featured/carousel-with-gallery-thumbs

I've done this like so (might be useful for others seeking something similar):
https://pastebin.com/uDCTFBR8

And now the question, is there a way to use smaller images for the thumbs using this method?

Thanks in advance

Comments

Selfirian created an issue. See original summary.

RajabNatshah’s picture

Varbase Bootstrap Paragraphs

https://www.drupal.org/project/varbase_bootstrap_paragraphs

You could do this in 2 ways:
#1 : You could add a css class name, and style it as you could find in the following link
#2904173: Changed [Background Color] in the Styling Settings to use a set of Color set to choose with [Color boxes] with a general color settings

#2 : we do have number of twig files for each paragraph type:
http://cgit.drupalcode.org/varbase_bootstrap_paragraphs/tree/templates?h...

You could copy the twig files to your theme and do any change you like or add more css/js libraries.

Selfirian’s picture

Hi, thanks for the quick reply.

I already managed to overrule the twig template and have the desired result, except I'm loading in the same images for the thumbnails as I do the slides. So I was wondering how I can replace this bit

<ul class="hide-bullets hide-caption thumbs remove-padding">
                        {% for key, item in content.bp_slide_content if key|first != '#' %}
                        <li class="col-sm-4 {% if loop.first %}active{% endif %}" data-slide-to="{{ key }}" data-target="#{{ paragraph_id }}">
                            <a class="thumbnail" id="carousel-selector-{{ key + 1 }}">{{ item }}</a>
                        </li>
                        {% endfor %}
                    </ul>

in order to get images in an other format (something like thumbnails and not the same size as the slides). Can I have a separate view mode for the {{ item }} or something like that?

Also I was wondering why this isn't using Slick, it's used for other carousels and all of a sudden when creating one with a paragraph it's the bootstrap one that's being used this is kind of confusing.

RajabNatshah’s picture

Status: Active » Fixed
RajabNatshah’s picture

Status: Fixed » Closed (fixed)