<{if $aspect == '2-3'}>
<{assign var="width" value=$width|default:'400'}>
<{assign var="height" value=$height|default:'600'}>
<{elseif $aspect == '4-5'}>
<{assign var="width" value=$width|default:'400'}>
<{assign var="height" value=$height|default:'500'}>
<{elseif $aspect == 'auto'}>
<{assign var="width" value=$width|default:'800'}>
<{assign var="height" value=$height|default:'450'}>
<{else}>
<{assign var="width" value=$width|default:'300'}>
<{assign var="height" value=$height|default:'300'}>
<{/if}>
<{math assign="width2x" x=$width equation="x * 2"}>
<{math assign="height2x" x=$height equation="x * 2"}>
<{math assign="width3x" x=$width equation="x * 3"}>
<{math assign="height3x" x=$height equation="x * 3"}>
<{math assign="width4x" x=$width equation="x * 4"}>
<{math assign="height4x" x=$height equation="x * 4"}>
<{math assign="width5x" x=$width equation="x * 5"}>
<{math assign="height5x" x=$height equation="x * 5"}>
<{assign var="fit" value=$fit|default:'fit'}>
<{assign var="type" value=$type|default:'webp'}>
<{assign var="loading" value=$loading|default:'lazy'}>
<{assign var="priority" value=$priority|default:'auto'}>
<{assign var="decoding" value=$decoding|default:'async'}>
<{assign var="object_fit" value=$object_fit|default:$settings.images.object_fit}>
<{assign var="padding" value=$padding|default:$settings.images.padding}>
<{assign var="aspect_ratio" value=$aspect_ratio|default:$settings.images.aspect_ratio}>
<{if $href}>
style="background-color: <{$settings.images.background}><{/if}>">
<{elseif $alpine}>
<{assign var="key" value=$key|default:'product'}>
<{assign var="img_key" value=$img_key|default:'thumbnail'}>
<{assign var="alt_key" value=$img_key|default:'name'}>
style="background-color: <{$settings.images.background}><{/if}>">
![]()
<{else}>
<{if $product || $image}>
<{if $sizes}>
<{assign var="sizes_array" value=","|explode:$sizes}>
<{assign var="size_1" value=$sizes_array[0]|default:'640'}>
<{assign var="size_2" value=$sizes_array[1]|default:'768'}>
<{assign var="size_3" value=$sizes_array[2]|default:'1024'}>
<{assign var="size_4" value=$sizes_array[3]|default:'1280'}>
<{assign var="size_5" value=$sizes_array[4]|default:'1536'}>
<{/if}>
<{if $image}>
<{assign var="src" value=$image->getSrc($width, $height, $fit, $type)}>
<{assign var="src2x" value=$image->getSrc($width2x, $height2x, $fit, $type)}>
<{assign var="src3x" value=$image->getSrc($width3x, $height3x, $fit, $type)}>
<{assign var="src4x" value=$image->getSrc($width4x, $height4x, $fit, $type)}>
<{assign var="src5x" value=$image->getSrc($width5x, $height5x, $fit, $type)}>
<{if $sizes}>
<{assign var="img_src_breakpoint1" value=$image->getSrc($size_1, $size_1, $fit, $type)}>
<{assign var="img_src_breakpoint2" value=$image->getSrc($size_2, $size_2, $fit, $type)}>
<{assign var="img_src_breakpoint3" value=$image->getSrc($size_3, $size_3, $fit, $type)}>
<{assign var="img_src_breakpoint4" value=$image->getSrc($size_4, $size_4, $fit, $type)}>
<{assign var="img_src_breakpoint5" value=$image->getSrc($size_5, $size_5, $fit, $type)}>
<{/if}>
<{assign var="alt" value=$image->getDescription()}>
<{if !$alt && $product}>
<{assign var="alt" value=$product->getName()}>
<{/if}>
<{else}>
<{assign var="images" value=$product->getImages()}>
<{section name="j" loop=$images start=0 max=1}>
<{assign var="src" value=$images[j]->getSrc($width, $height, $fit, $type)}>
<{assign var="src2x" value=$images[j]->getSrc($width2x, $height2x, $fit, $type)}>
<{assign var="src3x" value=$images[j]->getSrc($width3x, $height3x, $fit, $type)}>
<{assign var="alt" value=$images[j]->getDescription()}>
<{if $sizes}>
<{assign var="img_src_breakpoint1" value=$images[j]->getSrc($size_1, $size_1, $fit, $type)}>
<{assign var="img_src_breakpoint2" value=$images[j]->getSrc($size_2, $size_2, $fit, $type)}>
<{assign var="img_src_breakpoint3" value=$images[j]->getSrc($size_3, $size_3, $fit, $type)}>
<{assign var="img_src_breakpoint4" value=$images[j]->getSrc($size_4, $size_4, $fit, $type)}>
<{assign var="img_src_breakpoint5" value=$images[j]->getSrc($size_5, $size_5, $fit, $type)}>
<{/if}>
<{if !$alt && $product}>
<{assign var="alt" value=$product->getName()}>
<{/if}>
<{/section}>
<{/if}>
<{* assign var="alt" value="FEDTMULE" *}>
style="background-color: <{$settings.images.background}>"<{/if}>>
<{if $images || $image}>
<{if $sizes}>
<{assign var="img_width_breakpoint1" value=$size_1}>
<{assign var="img_width_breakpoint2" value=$size_2}>
<{assign var="img_width_breakpoint3" value=$size_3}>
<{assign var="img_width_breakpoint4" value=$size_4}>
<{assign var="img_width_breakpoint5" value=$size_5}>
<{strip}>
<{/strip}>
<{else}>
<{/if}>
<{/if}>
<{else}>
style="background-color: <{$settings.images.background}>""<{/if}>>
<{/if}>
<{/if}>