<p>Tom, we applied the same technique to several clients. We also tried having one asset input and only allowing images and videos.  Then as we loop through the asset field we check for media type. However I think breaking it up like you have, is a better user experience so they know to add either video or image. We have also added a plain text field and allowed them to add Vimeo/YouTube embed code for the video. </p>

CC BY-SA 3.0
2015-03-10T23:30:02.580Z
Thanks @aran. It's always nice to know you're not the only one... I like this way too as I can limit images to 1 asset and videos to say 3. It's interesting you mention Vimeo/YouTube embed code. We purchased [Dukt's Videos plugin](https://dukt.net/craft/videos). Well worth the €49 if you ask me!
Tom
CC BY-SA 3.0
2015-03-11T15:26:12.677Z
We have used that same plugin, it is definitely worth it for a client that uses Vimeo/YouTube heavily.
a-am
CC BY-SA 3.0
2015-03-10T18:28:47.487Z
2015-03-10T18:28:47.487Z
a-am
<p>what I did is instead of using a Matrix I simply use a Asset field type and Restrict allowed file types of only Image and Video in the field settings. </p>

<p>When you loop through the asset field in the entry do a switch on the element 'kind' to determine if it's a video or an image and output the tag accordingly.</p>

<p>Here's the sample code I wrote for my project where I populate a homepage slider called 'Swipey' with images or video.</p>

<pre><code>  {% for block in entry.homepageslider %}

    {% for hero in block.heroimage %}

      {% set imgURL = hero.url %}
      &lt;div class="swiper-slide"&gt;
        &lt;div style="position:absolute; top:40px; left:40px; color:#ffffff; "&gt;
          &lt;div style="font-size:30px; line-height:.9em; text-align: left; margin:0; padding:0; "&gt; {{ block.category }} &lt;/div&gt;
          &lt;div style="font-size:70px; line-height:.9em; text-align: left; margin:0; padding:0; "&gt; {{ block.title }} &lt;/div&gt;
        &lt;/div&gt;

        {% switch hero.kind %}

          {% case "image" %}

            &lt;a href="{{ block.url }}"&gt;
              &lt;img src="{{  imgURL }}" /&gt;
            &lt;/a&gt;

          {% case "video" %}
            &lt;video width="100%" height="100%" preload= "true" loop = "loop" muted&gt;
              &lt;source src="{{  imgURL }}" type="video/mp4"&gt;
              Your browser does not support the video tag.
            &lt;/video&gt;

        {% endswitch %}

      &lt;/div&gt;

    {% endfor %}

  {% endfor %}
</code></pre>

CC BY-SA 3.0
2018-03-08T07:26:03.057Z
2018-03-08T07:26:03.057Z
Bradley Wong
<p>I've got a use case where I'd like to be able to not only upload an image for a blog entry's "featuredThumb" but also have the ability to upload a video. I was originally using animated GIFs but they are huge. So much <a href="http://mashable.com/2014/06/20/twitter-gifs-mp4/" rel="nofollow">like twitter</a> I'm going to switch them for videos.</p>

<p>Currently, I have something that I'm sure you'll be very familiar with. I've got an asset field within my blog section that accepts an image and my template code looks like this:</p>

<pre><code>{% for entry in craft.entries.section('blog').find() %}
    &lt;article&gt;
        &lt;a href="{{ entry.url }}"&gt;
            &lt;img src="{{ entry.featuredThumb.getUrl("someTransform") }}" alt="{{ entry.featuredThumb.title }}"&gt;
        &lt;/a&gt;

        &lt;h3&gt;
            &lt;a href="{{ entry.url }}"&gt;
                {{ entry.title }}
            &lt;/a&gt;
        &lt;/h3&gt;
    &lt;/article&gt;
{% endfor %}
</code></pre>

<p>I'd like to be able to switch the image for a small HTML5 video. This poses a few problems, as numerous video formats are required for cross browser compatibility, along with an image as a poster / fallback.</p>

<p>My current solution is to switch the "featuredThumb" asset field, for a new matrix field that contains two block types:</p>

<ul>
<li><p>Image</p>

<ul>
<li>Asset field - Name: Image</li>
</ul></li>
<li><p>Video</p>

<ul>
<li>Asset field - Name: Videos (allows multiple files so the user uploads MP4, OGV, WebM)</li>
<li>Asset field - Name: Fallback Image</li>
</ul></li>
</ul>

<p>Then in my template update to:</p>

<pre><code>{% for entry in craft.entries.section('blog').find() %}
    &lt;article&gt;
        &lt;a href="{{ entry.url }}"&gt;
            {% for block in entry.featuredThumb %}
                {% switch block.type %}

                    {% case "image" %}

                        &lt;img src="{{ block.image.first().url }}" alt="{{ block.image.first().title }}"&gt;

                    {% case "video" %}

                        &lt;video width="320" height="180" autoplay loop&gt;
                            {% for video in block.videos %}
                                &lt;source src="{{ video.url }}" type="{{ video.getMimeType() }}"&gt;
                            {% endfor %}
                            &lt;!-- Fallback image for browser without &lt;video&gt; support --&gt;
                            &lt;img src="{{ block.videos.fallbackImage.first().url }}" alt="{{ block.videos.fallbackImage.first().title }}"&gt;
                        &lt;/video&gt;

                {% endswitch %}
            {% endfor %}
        &lt;/a&gt;

        &lt;h3&gt;
            &lt;a href="{{ entry.url }}"&gt;
                {{ entry.title }}
            &lt;/a&gt;
        &lt;/h3&gt;
    &lt;/article&gt;
{% endfor %}
</code></pre>

<p>This is the best solution I'm able to come up with, but it seems a little over-engineered. I'd love to see other people's take on this.</p>

<p>Cheers,</p>

<p>Tom</p>

<templating>
Featured thumb with image or video
# Featured thumb with image or video

(Asked by: username_0 on 2015-03-10)

I've got a use case where I'd like to be able to not only upload an image for a blog entry's "featuredThumb" but also have the ability to upload a video. I was originally using animated GIFs but they are huge. So much like twitter I'm going to switch them for videos.
Currently, I have something that I'm sure you'll be very familiar with. I've got an asset field within my blog section that accepts an image and my template code looks like this:
{% for entry in craft.entries.section('blog').find() %}
    
        
            
        

        
            
                {{ entry.title }}
            
        
    
{% endfor %}

I'd like to be able to switch the image for a small HTML5 video. This poses a few problems, as numerous video formats are required for cross browser compatibility, along with an image as a poster / fallback.
My current solution is to switch the "featuredThumb" asset field, for a new matrix field that contains two block types:

Image

Asset field - Name: Image

Video

Asset field - Name: Videos (allows multiple files so the user uploads MP4, OGV, WebM)
Asset field - Name: Fallback Image


Then in my template update to:
{% for entry in craft.entries.section('blog').find() %}
    
        
            {% for block in entry.featuredThumb %}
                {% switch block.type %}

                    {% case "image" %}

                        

                    {% case "video" %}

                        
                            {% for video in block.videos %}
                                
                            {% endfor %}
                            
                            
                        

                {% endswitch %}
            {% endfor %}
        

        
            
                {{ entry.title }}
            
        
    
{% endfor %}

This is the best solution I'm able to come up with, but it seems a little over-engineered. I'd love to see other people's take on this.
Cheers,
username_0

**Tags:** templating


---

## 2 answers

### Answer by username_1 on 2015-03-10. Score: 1 | Accepted answer

username_0, we applied the same technique to several clients. We also tried having one asset input and only allowing images and videos. Then as we loop through the asset field we check for media type. However I think breaking it up like you have, is a better user experience so they know to add either video or image. We have also added a plain text field and allowed them to add Vimeo/YouTube embed code for the video.

> **Comments:**
> **username_0**: Thanks @aran. It's always nice to know you're not the only one... I like this way too as I can limit images to 1 asset and videos to say 3. It's interesting you mention Vimeo/YouTube embed code. We purchased [Dukt's Videos plugin](https://dukt.net/craft/videos). Well worth the €49 if you ask me!  
> **username_1**: We have used that same plugin, it is definitely worth it for a client that uses Vimeo/YouTube heavily.  

---

### Answer by username_2 on 2018-03-08. Score: 1

what I did is instead of using a Matrix I simply use a Asset field type and Restrict allowed file types of only Image and Video in the field settings. 
When you loop through the asset field in the entry do a switch on the element 'kind' to determine if it's a video or an image and output the tag accordingly.
Here's the sample code I wrote for my project where I populate a homepage slider called 'Swipey' with images or video.
  {% for block in entry.homepageslider %}

    {% for hero in block.heroimage %}

      {% set imgURL = hero.url %}
      
        
           {{ block.category }} 
           {{ block.title }} 
        

        {% switch hero.kind %}

          {% case "image" %}

            
              
            

          {% case "video" %}
            
              
              Your browser does not support the video tag.
            

        {% endswitch %}

      

    {% endfor %}

  {% endfor %}


---

