Home/ Questions/Q 8464871
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T14:52:50+00:00

I’m using Drupal 7. I’m trying to create a Media slider with images and

  • 0

I’m using Drupal 7. I’m trying to create a Media slider with images and Vimeo videos. For that I have created a content type with one field for images and one field for Vimeo-links. I have set the fields to unlimited.

I’m displaying my content in a View page. The problem is that Drupal create two different wrappers for the different fild-types. All images are wrapped with one div and the videos are wrapped with another div.

But I would like to have one wrapper for evererything and one wrapper for each item.
For example:

<div class="slider">
    <div class="item">
        <img typeof="foaf:Image" src="image.jpg" width="658" height="420" alt="">
    </div>
    <div class="item">
        <img typeof="foaf:Image" src="image2.jpg" width="658" height="420" alt="">
    </div>
    <div class="item">
        <iframe title="Video title" src="http://myVideoLink?color=cccccc" frameborder="0" width="658" height="420" id="vimeo-player"></iframe>
    </div>
    <div class="item">
        <iframe title="Video title" src="http://myVideoLink2?color=cccccc" frameborder="0" width="658" height="420" id="vimeo-player"></iframe>
    </div>
</div>

Instead of this:

<div class="views-field views-field-field-image">
    <div class="field-content">
        <span thmr="thmr_3">
            <span thmr="thmr_4">
                <span thmr="thmr_5">
                    <img typeof="foaf:Image" src="image.jpg" width="658" height="420" alt="">
                </span>
            </span>
        </span>
        ,
        <span thmr="thmr_6">
            <span thmr="thmr_7">
                <img typeof="foaf:Image" src="image2.jpg" width="658" height="420" alt="">
            </span>
        </span>
    </div>
</div>
<div class="views-field views-field-field-vimeo">
    <div class="field-content">
        <span thmr="thmr_10">
            <iframe title="Video title" src="http://myVideoLink?color=cccccc" frameborder="0" width="658" height="420" id="vimeo-player"></iframe>
            , 
            <iframe title="Video title" src="http://myVideoLink2?color=cccccc" frameborder="0" width="658" height="420" id="vimeo-player"></iframe>
    </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    1. While editing your View, go to field settings (click on image field in Fields section) then expand “Style Settings” fieldset and uncheck “Add default classes” checkbox
    2. While editing your View, expand “Other” section and click Theme(Information) link then create needed template files in your active theme folder. You need Style output template and Field ([[your image field name here]]) template.

    Please note that you will also need to choose the correct template file name based on what scope would you like your template to be applied (i.e. only page or only block etc) and flush caches (click “rescan” after created files).

    • 0