Shopify - Conditionally using variant image as thumbnail if available - shopify

Question

Is there a way to use variant image as thumbnail if available? For example, I have a product that comes in Black, Blue and Red, and successfully associate them with specific image. How do i get those images as list item and using just standard featured image if color variant isn't available? Here's the scenario for help:
{% if variant color is available %}
<ul class="variantimage-on">
<li>Black Image</li>
<li>Blue Image</li>
<li>Red Image</li>
</ul>
{% else %}
<ul class="variantimage-off">
<li><img src="{{ product.images.first | product_img_url: 'grande' }}" alt="{{ product.title }}" /></li>
</ul>
{% endif %}

Answer 1

Would something like this work for you?
{% if product.options contains 'Color' %}
<ul class="variantimage-on">
{% for image in product.images %}
{% for variant in image.variants %}
<li><img src="{{variant.image.src | img_url: 'large'}}"
alt="{{variant.title}}"/></li>
{% endfor %}
{% endfor %}
</ul>
{% else %}
...
{% endif %}
If all your variant titles start with the color name, you could do a sort by title (group by color) then iteration with a "if new color". Replace the innermost for loop by this:
{% assign variants = image.variants | sort: 'title' %}
{% assign color = "" %}
{% for variant in variants %}
{% assign words = variant.title | split: ' ' %}
{% if color != words[0] | downcase %}
{% assign color = words[0] | downcase %}
<li><img src="{{variant.image.src | img_url: 'large'}}"
alt="{{variant.title}}"/></li>
{% endif %}
{% endfor %}