Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-10T23:30:02.580Z
Answers.Text: 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!
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-11T15:26:12.677Z
Answers.Text: We have used that same plugin, it is definitely worth it for a client that uses Vimeo/YouTube heavily.
Answers.UserDisplayName: a-am
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-03-10T18:28:47.487Z
Answers.LastActivityDate: 2015-03-10T18:28:47.487Z
Answers.UserDisplayName: a-am
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-08T07:26:03.057Z
Answers.LastActivityDate: 2018-03-08T07:26:03.057Z
Answers.UserDisplayName: Bradley Wong
Body: <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>
  
Tags: <templating>
Title: Featured thumb with image or video
ThreadText: # 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](http://mashable.com/2014/06/20/twitter-gifs-mp4/) 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() %}
      <article>
          <a href="{{ entry.url }}">
              <img src="{{ entry.featuredThumb.getUrl("someTransform") }}" alt="{{ entry.featuredThumb.title }}">
          </a>
  
          <h3>
              <a href="{{ entry.url }}">
                  {{ entry.title }}
              </a>
          </h3>
      </article>
  {% 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() %}
      <article>
          <a href="{{ entry.url }}">
              {% for block in entry.featuredThumb %}
                  {% switch block.type %}
  
                      {% case "image" %}
  
                          <img src="{{ block.image.first().url }}" alt="{{ block.image.first().title }}">
  
                      {% case "video" %}
  
                          <video width="320" height="180" autoplay loop>
                              {% for video in block.videos %}
                                  <source src="{{ video.url }}" type="{{ video.getMimeType() }}">
                              {% endfor %}
                              <!-- Fallback image for browser without <video> support -->
                              <img src="{{ block.videos.fallbackImage.first().url }}" alt="{{ block.videos.fallbackImage.first().title }}">
                          </video>
  
                  {% endswitch %}
              {% endfor %}
          </a>
  
          <h3>
              <a href="{{ entry.url }}">
                  {{ entry.title }}
              </a>
          </h3>
      </article>
  {% 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,
  
  Tom
  
  **Tags:** templating
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2015-03-10. Score: 1 | Accepted answer
  
  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.
  
  > **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 %}
        <div class="swiper-slide">
          <div style="position:absolute; top:40px; left:40px; color:#ffffff; ">
            <div style="font-size:30px; line-height:.9em; text-align: left; margin:0; padding:0; "> {{ block.category }} </div>
            <div style="font-size:70px; line-height:.9em; text-align: left; margin:0; padding:0; "> {{ block.title }} </div>
          </div>
  
          {% switch hero.kind %}
  
            {% case "image" %}
  
              <a href="{{ block.url }}">
                <img src="{{  imgURL }}" />
              </a>
  
            {% case "video" %}
              <video width="100%" height="100%" preload= "true" loop = "loop" muted>
                <source src="{{  imgURL }}" type="video/mp4">
                Your browser does not support the video tag.
              </video>
  
          {% endswitch %}
  
        </div>
  
      {% endfor %}
  
    {% endfor %}
  
  ```
  
  
  ---
  
  