wc-bootstrap/templates/single-product/product-image.html.twig

{#
 # Product Image Gallery (Bootstrap 5 Override)
 #
 # Renders the product image gallery with main image and thumbnail strip.
 #
 # Expected context:
 #   product             - WC_Product object
 #   post_thumbnail_id   - Main image attachment ID
 #   columns             - Number of thumbnail columns
 #   gallery_image_ids   - Array of gallery attachment IDs
 #   main_image_html     - Pre-rendered main image HTML
 #
 # WooCommerce PHP equivalent: single-product/product-image.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% set cols = columns|default(4) %}
{% set has_images = post_thumbnail_id is defined and post_thumbnail_id %}
{% set gallery_classes = 'woocommerce-product-gallery woocommerce-product-gallery--columns-' ~ cols %}
{% if has_images %}
    {% set gallery_classes = gallery_classes ~ ' woocommerce-product-gallery--with-images' %}
{% else %}
    {% set gallery_classes = gallery_classes ~ ' woocommerce-product-gallery--without-images' %}
{% endif %}

<div class="{{ gallery_classes }}" data-columns="{{ cols }}" style="opacity: 0; transition: opacity .25s ease-in-out;">
    <div class="woocommerce-product-gallery__wrapper">
        {# Main product image #}
        {% if main_image_html is defined and main_image_html %}
            <div class="woocommerce-product-gallery__image mb-3">
                {{ main_image_html|raw }}
            </div>
        {% elseif post_thumbnail_id is defined and post_thumbnail_id %}
            <div class="woocommerce-product-gallery__image mb-3">
                <img src="{{ wp_get_attachment_url(post_thumbnail_id)|esc_url }}"
                     class="img-fluid rounded"
                     alt="{{ product.get_name()|esc_attr }}" />
            </div>
        {% else %}
            <div class="woocommerce-product-gallery__image mb-3">
                <img src="{{ wc_placeholder_img_src()|esc_url }}"
                     class="img-fluid rounded"
                     alt="{{ __('Placeholder')|esc_attr }}" />
            </div>
        {% endif %}

        {# Thumbnail gallery strip #}
        {% if gallery_image_ids is defined and gallery_image_ids|length > 0 %}
            <div class="row row-cols-{{ columns|default(4) }} g-2">
                {% for image_id in gallery_image_ids %}
                    <div class="col">
                        <img src="{{ wp_get_attachment_url(image_id)|esc_url }}"
                             class="img-fluid rounded border cursor-pointer wc-gallery-thumb"
                             alt="{{ product.get_name()|esc_attr }}"
                             data-full-src="{{ wp_get_attachment_url(image_id)|esc_url }}" />
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>

    {{ do_action('woocommerce_product_thumbnails') }}
</div>