3

I have created the view for image slider as below:

enter image description here

I want to get the structure for the image slider as below:

            <ul id="image-slider" class="image-slider">

                <li>
                    <a href="#" target="_blank">
                        <img src="images/1.jpg" alt="image1"/>
                    </a>
                    <div class="image-description">
                        <h3>This is is title</h3>
                        <p>This is description</p>
                    </div>
                </li>

                <li>
                    <img src="images/2.jpg" alt="image2"/>
                    <div class="image-description">
                        <h3>...</h3>
                    </div>
                </li>

                <li><!-- ... --></li>

                <!-- ... -->

            </ul>

My template files are the following:

  • views-view-unformatted--main_slider.html.twig

            {#
        /**
         * @file
         * Theme override to display a view of unformatted rows.
         *
         * Available variables:
         * - title: The title of this group of rows. May be empty.
         * - rows: A list of the view's row items.
         *   - attributes: The row's HTML attributes.
         *   - content: The row's content.
         * - view: The view object.
         * - default_row_class: A flag indicating whether default classes should be
         *   used on rows.
         *
         * @see template_preprocess_views_view_unformatted()
         */
        #}

        <ul id="image-slider" class="image-slider">
            {% for row in rows %}
              {%
                set row_classes = [
                  default_row_class ? 'views-row',
                ]
              %}
                {{ row.content }}
            {% endfor %}
        </ul>

  • views-view-fields--main_slider.html.twig

    {#
/**
 * @file
 * Theme override to display all the fields in a row.
 *
 * Available variables:
 * - view: The view in use.
 * - fields: A list of fields, each one contains:
 *   - content: The output of the field.
 *   - raw: The raw data for the field, if it exists. This is NOT output safe.
 *   - class: The safe class ID to use.
 *   - handler: The Views field handler controlling this field.
 *   - inline: Whether or not the field should be inline.
 *   - wrapper_element: An HTML element for a wrapper.
 *   - wrapper_attributes: List of attributes for wrapper element.
 *   - separator: An optional separator that may appear before a field.
 *   - label: The field's label text.
 *   - label_element: An HTML element for a label wrapper.
 *   - label_attributes: List of attributes for label wrapper.
 *   - label_suffix: Colon after the label.
 *   - element_type: An HTML element for the field content.
 *   - element_attributes: List of attributes for HTML element for field content.
 *   - has_label_colon: A boolean indicating whether to display a colon after
 *     the label.
 *   - element_type: An HTML element for the field content.
 *   - element_attributes: List of attributes for HTML element for field content.
 * - row: The raw result from the query, with all data it fetched.
 *
 * @see template_preprocess_views_view_fields()
 */
#}

<li>
{% for field in fields -%}
      {%- if field.element_type -%}

          {{ field.content }}

      {%- endif %}
{%- endfor %}
</li>

When I inspect the element, I get the following, in the browser.

            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'views_view_unformatted__main_slider' -->
            <!-- FILE NAME SUGGESTIONS:
               * views-view-unformatted--main-slider.html.twig
               * views-view-unformatted--main-slider.html.twig
               * views-view-unformatted.html.twig
            -->
            <!-- BEGIN OUTPUT from 'themes/custom/law_advice_theme/templates/views/views-view-unformatted--main_slider.html.twig' -->

            <ul id="image-slider" class="image-slider">


            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'views_view_fields__main_slider' -->
            <!-- FILE NAME SUGGESTIONS:
               * views-view-fields--main-slider.html.twig
               * views-view-fields--main-slider.html.twig
               * views-view-fields.html.twig
            -->
            <!-- BEGIN OUTPUT from 'themes/custom/law_advice_theme/templates/views/views-view-fields--main_slider.html.twig' -->

            <li>

            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'views_view_field__main_slider' -->
            <!-- FILE NAME SUGGESTIONS:
               * views-view-field--main-slider.html.twig
               * views-view-field--main-slider.html.twig
               * views-view-field.html.twig
            -->
            <!-- BEGIN OUTPUT from 'themes/custom/law_advice_theme/templates/views/views-view-field--main_slider.html.twig' -->

             <div class="image-description">

            <a href="/my_project/lorem-ipsum-dolor-sit-amet-falli-noster-constituam" hreflang="en">Lorem ipsum dolor sit amet, falli noster constituam</a>
           </div>

            <!-- END OUTPUT from 'themes/custom/law_advice_theme/templates/views/views-view-field--main_slider.html.twig' -->

            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'views_view_field__main_slider' -->
            <!-- FILE NAME SUGGESTIONS:
               * views-view-field--main-slider.html.twig
               * views-view-field--main-slider.html.twig
               * views-view-field.html.twig
            -->
            <!-- BEGIN OUTPUT from 'themes/custom/law_advice_theme/templates/views/views-view-field--main_slider.html.twig' -->

             <div class="image-description">

            <p>sea in discere feugiat, modus moderatius intellegebat ad pro. Tantas indoctum ut eum, eirmod consequuntur est id, id partem euripidis qui. Wisi fastidii concludaturque te vim, ei wisi quaerendum est. Nam an option hendrerit, ius nulla viris similique ad, nam apeirian delicatissimi ad. Id autem harum adipiscing cum, duo eu hinc nibh inani.</p>
           </div>

            <!-- END OUTPUT from 'themes/custom/law_advice_theme/templates/views/views-view-field--main_slider.html.twig' -->

            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'views_view_field__main_slider' -->
            <!-- FILE NAME SUGGESTIONS:
               * views-view-field--main-slider.html.twig
               * views-view-field--main-slider.html.twig
               * views-view-field.html.twig
            -->
            <!-- BEGIN OUTPUT from 'themes/custom/law_advice_theme/templates/views/views-view-field--main_slider.html.twig' -->

             <div class="image-description">

            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'image_formatter' -->
            <!-- BEGIN OUTPUT from 'themes/custom/law_advice_theme/templates/field/image-formatter.html.twig' -->

            <!-- THEME DEBUG -->
            <!-- THEME HOOK: 'image' -->
            <!-- BEGIN OUTPUT from 'themes/custom/law_advice_theme/templates/field/image.html.twig' -->
            <img src="/my_project/sites/default/files/2016-08/u215_a_0.png" width="1200" height="431" alt="Lorem ipsum dolor sit amet, falli noster constituam" typeof="foaf:Image" />

            <!-- END OUTPUT from 'themes/custom/law_advice_theme/templates/field/image.html.twig' -->

            <!-- END OUTPUT from 'themes/custom/law_advice_theme/templates/field/image-formatter.html.twig' -->

            </div>

            <!-- END OUTPUT from 'themes/custom/law_advice_theme/templates/views/views-view-field--main_slider.html.twig' -->

            </li>
            <!-- END OUTPUT from 'themes/custom/law_advice_theme/templates/views/views-view-fields--main_slider.html.twig' -->

The class image-description is added to all the fields. I want to add that class only for the title and description fields, but not for the image to get the structure for image slider. How do I remove the parent <div> from image? Is there any hook to get this structure?

Improve this question

1 Answer 1

Reset to default
2

In views-view-fields--main-slider.html.twig

<div class="image-description">{{ fields.title.content }}</div>
<div class="image-description">{{ fields.field_slider_description.content }}</div>
<div>{{ fields.field_slider_image.content }}</div>

If you need the <li>'s you should use HTML List as your format instead of using Unformatted list.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.