Featured thumb with image or video 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() %}
    &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 %}


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() %}
    &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 %}


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
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.