Drupal 8 - Generate carousel from custom content type

Question

I begin to work on D8 few days ago. I want to build a website as you can do it with Wordpress + ACF using D8 and its Content type.

Steps are similar : creating a specific page > add custom fields > display them how we want in the page.

I managed to display some content by reaching the value in the big D8 datas :

// example for a h1 tag
<h1>{{ node.field_accueil_slide_titre.value }}</h1>

Using node or content main Object/array. By the way it's already difficult and quite stupid to have to delve the node/content array to guess the ".value", ".uri" or ".title" that are needed when we want specific things. Is that the good way to do ? I can't find a doc or listing about it.

My point is that I now want to make something as a "foreach loop" on the field that contains images but I can't find a way to reach images in a clean array. And if I try to display the field to delve my chrome tab crash..

{% for images in content.field_accueil_image_slide %}

This do not works for example.

Do I have to generate a new block just for the carousel generation ?

Gabbax0r Gabbax0r · Accepted Answer · 2016-12-05T09:32:25

first step: you have to create a new content-type with a field pictures and the setting unlimited (you can upload as many pictures as you want for your carousel).

second step: create a new template for this content-type. in your template you can loop through the uploaded pictures.

for example: (my field in the contenttype is field_carousell_picture).

i use owl-carousel. i have included the owl-carousel java-script and call it with the style tag.

<div class="col-md-12">
      <div class="owl-carousel">
        {% for i in 0..content.field_carousell_picture|length %}
         {%if content.field_carousell_picture[i]['#item'].entity.uri.value != "" and content.field_carousell_picture[i]['#item'].entity.uri.value is not empty %}
            <div>
                {{ content.field_carousell_picture[i]}}
            </div>
         {%endif%}
        {%endfor%} 
      </div>
    </div>

third step: you can watch your node and see your carousel or include it to a page.

Drupal 8 - Generate carousel from custom content type

1 Answers