Tag: image

My goal: I’m learning drupal. I’m creating bootstrap carousel myself. Without any plugins or themes. I use default classy theme.

So far what I have done.

1. Administration -> Configuration -> Media :: Added new image with 1000×800 with scale and crop.
2. Administration -> Structure -> Content types :: Added new content, Has two fields banner(image) and title(text).
3. Administration -> Structure -> Views :: I created a new view.
4. Added this view to my template block

My Over ride:
File one: views-view-list–home-banner.html.twig
code:

<div id="fzCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for row in rows %}
            <li data-target="#fzCarousel" data-slide-to="{{ loop.index0 }}" class="{{ loop.first ? 'active' }}"></li>
            {% endfor %}
    </ol>
    <div class="carousel-inner">
        {% for row in rows %}
            <div{{ row.attributes.addClass( loop.first ? 'active' ) }}>
                {{- row.content -}}
            </div>
        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#fzCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#fzCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

and File two: views-view-fields–home-banner.html.twig
code:

{{ fields.field_banner_images.content }}

<div class="carousel-caption">
    {{ fields.field_banner_text.content }}
</div>

HINT 1: I checked Administration -> Structure -> Views many times, I can’t find any place to add css to img. Some places it adds to parent div, not for img tag.

HINT 2: This works good. The bootstrap carousel is running good. BUT

I’m not getting the exact html code what I wanted. < img > tag has different css. I can’t add css to img field. Need help.

What I wanted: I need to add css to img field in twig template code {{ fields.field_banner_images.content }} . So that In future, I can apply for other works. Not in .theme file.

I tried .theme file code too (Just for now), but it dose’nt worked for me. I don’t know what I have done wrong there.
code:

function mhe_preprocess_field(&$vars) {
  if ($vars('element')('#field_name') == 'field_banner_images') {
    foreach($vars('items') as $key => $item){
      $vars('items')( $key )('content')('#item_attributes')('class')() = 'my_class';
    }
  }
}