how to do conditional formatting for picture in custom liquid

[kashbunny]

I want to make a specific picture appear based on what menu item is selected or which collection is being viewed but i cannot figure out what is wrong with the code.

{% if collection.handle == 'Tops' %}
<!-- img src="https://cdn.shopify.com/s/files/1/0714/1870/8207/files/tops_4.png?v=1729518997" alt=""width="30%" -->
{% endif %}

[PaulNewton]

Hi @kashbunny 👋 handles are lower cased https://shopify.dev/docs/api/liquid/basics#handles 

and the img element is not properly bracketed and it's inside html comments.

If you are using chatgpt etc use such tools for summarizing knowledge & experience you can validate otherwise you cannot see the misinformation such tools create and just create more work for everyone.

{%- assign collection_title_lowercased = 'Tops' | downcase -%}
{%- assign image_filename = 'tops_4.png'
{% if collection.handle == collection_title_lowercased  %}
 <img src="{{ image_filename  | file_image_url }}" alt="" width="30%">
{% endif %}
{% comment %}
 https://shopify.dev/docs/api/liquid/filters/downcase
 https://shopify.dev/docs/api/liquid/filters/file_img_url
{% endcomment %}

👨‍💻 the width attribute as percentage will work though technically invalid. https://stackoverflow.com/questions/26100484/what-are-the-consequences-of-using-percentage-for-width...