Imagen de categoría

En este tutorial vamos a agregar imágenes por categoría, tanto una imagen general que va a aparecer en todas las categorías como imágenes particulares de cada una.

Para el theme Base creamos un componente que muestra la imagen general a menos que la categoría tenga asignada una particular. En el caso que la tienda no tenga cargada un imagen de categoría general, no va a mostrar nada en las categorías que no tengan una particular.

HTML

1. Lo primero que vamos a hacer es crear dentro de la carpeta snipplets, el snipplet category-banner.tpl con el siguiente código:

{% set image_sizes = ['small', 'large', 'huge', 'original', '1080p'] %}
{% set category_images = [] %}
{% set has_category_images = category.images is not empty %}

{% for size in image_sizes %}
    {% if has_category_images %}
        {# Define images for admin categories #}
        {% set category_images = category_images|merge({(size):(category.images | first | category_image_url(size))}) %}
    {% else %}
        {# Define images for general banner #}
        {% set category_images = category_images|merge({(size):('banner-products.jpg' | static_url | settings_image_url(size))}) %}
    {% endif %}
{% endfor %}

{% set category_image_url = 'banner-products.jpg' | static_url %}

<section class="category-banner mb-2">
    {% if has_category_images or store.thumbnails_enabled %}
        <img class="lazyautosizes lazyload blur-up position-relative w-100" src="{{ category_images['small'] }}" data-srcset="{{ category_images['large'] }} 480w, {{ category_images['huge'] }} 640w, {{ category_images['original'] }} 1024w, {{ category_images['1080p'] }} 1920w" data-sizes="auto" alt="{{ 'Banner de la categoría' | translate }} {{ category.name }}" />
    {% else %}
        <img class="lazyload blur-up position-relative w-100" src="{{ category_images['small'] }}" data-src="{{ category_image_url }}" alt="{{ 'Banner de la categoría' | translate }} {{ category.name }}" />
    {% endif %}
</section>

2. Y luego necesitamos llamar al snipplet de la imagen de categoría en el template templates/category.tpl en la ubicación que prefieras dentro de tu diseño. En el caso del theme Base lo ubicamos luego del título para que tenga una jerarquía y visibilidad alta.

{% if (category.images is not empty) or ("banner-products.jpg" | has_custom_image) %}
    {% include 'snipplets/category-banner.tpl' %}
{% endif %}

Agregamos el condicional para que llame el snipplet únicamente cuando existe una imagen general o particular para cada categoría.

Configuraciones

En el archivo config/settings.txt vamos a agregar el campo para que se pueda subir la imagen general junto a un acceso a las categorías desde donde se puedan subir las imágenes para cada categoría en particular.

title
    title = Imagen para las categorías
image
    title = Cargar imagen (JPG, GIF, PNG)
    original = banner-products.jpg
    width = 1580    
    height = 220
subtitle
    subtitle = Podés subir una imagen diferente para cada categoría <a target='_blank' href='/admin/categories/'>desde acá</a>

Traducciones

En este paso agregamos los textos para las traducciones en el archivo config/translations.txt

es "Imagen para las categorías"
pt "Imagem para as categorias"
en "Categories image"
es_mx "Imagen para las categorías"

es "Podés subir una imagen diferente para cada categoría <a target='_blank' href='/admin/categories/'>desde acá</a>"
pt "Pode subir uma imagem diferente para cada categoria <a target='_blank' href='/admin/categories/'>por aqui</a>"
en "You can upload a different image for each category <a target='_blank' href='/admin/categories/'>here</a>"
es_mx "Puedes subir una imagen diferente para cada categoría <a target='_blank' href='/admin/categories/'>aquí</a>"

Activación

Por último podés activar la imagen de categoría general desde el Administrador nube, en la sección de Personalizar tu diseño actual dentro de Listado de productos:

 


O para subir una imagen particular en cada categoría, podés hacerlo desde el Administrador nube, en la sección Productos > Categorías, ingresando a Opciones avanzadas de cada categoría creada.