Kistenkoning components for Magento 2

Gallery: Horizontal 

<div class="
         gallery
         
             gallery--horizontal
     ">
    <div class="
             gallery__stage
             
                 gallery__stage--horizontal
         ">
        <div class="gallery__frame">
            <div class="lazyload-wrapper ">
                <img class="image lazyload " src="" data-src="/images/product/product_432x648.jpg" alt="">
            </div>

        </div>
    </div>

    <div class="
            gallery__nav
                gallery__nav--horizontal
            
         ">

        <button class="button button--icon gallery__thumb-arr" type="button" aria-label="check more images">
            <svg class="icon gallery__icon-arrow gallery__icon-arrow--horizontal" role="presentation" focusable="false">
                <use xlink:href="/images/icons-sprite.svg#angle-up"></use>
            </svg>

        </button>

        <div class="
                        gallery__thumb
                            gallery__thumb--horizontal
                            gallery__thumb--active
                    ">
            <div class="lazyload-wrapper ">
                <img class="image lazyload " src="" data-src="/images/product/product_64x96.jpg" alt="">
            </div>

        </div>
        <div class="
                        gallery__thumb
                            gallery__thumb--horizontal
                    ">
            <div class="lazyload-wrapper ">
                <img class="image lazyload " src="" data-src="/images/product/product_64x96.jpg" alt="">
            </div>

        </div>
        <div class="
                        gallery__thumb
                            gallery__thumb--horizontal
                    ">
            <div class="lazyload-wrapper ">
                <img class="image lazyload " src="" data-src="/images/product/product_64x96.jpg" alt="">
            </div>

        </div>
        <div class="
                        gallery__thumb
                            gallery__thumb--horizontal
                    ">
            <div class="lazyload-wrapper ">
                <img class="image lazyload " src="" data-src="/images/product/product_64x96.jpg" alt="">
            </div>

        </div>
        <button class="button button--icon gallery__thumb-arr" type="button" aria-label="check more images">
            <svg class="icon gallery__icon-arrow gallery__icon-arrow--horizontal" role="presentation" focusable="false">
                <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
            </svg>

        </button>

    </div>
</div>
 
<div
    class="
         gallery
         {{ class }}
         {{#if typeHorizontal }}
             gallery--horizontal
         {{else}}
             gallery--vertical
         {{/if}}
     "
     {{{ attributes }}}
>
    <div
        class="
             gallery__stage
             {{ stage.class }}
             {{#if typeHorizontal }}
                 gallery__stage--horizontal
             {{else}}
                 gallery__stage--vertical
             {{/if}}
         "
    >
        <div class="gallery__frame">
            {{ render '@image' imageMain }}
        </div>
    </div>

    <div
        class="
            gallery__nav
            {{#if typeHorizontal }}
                gallery__nav--horizontal
            {{else}}
                gallery__nav--vertical
            {{/if}}
            {{ nav.class }}
         "
   >

        {{#unless dots}}
            {{#if typeHorizontal }}
                {{ render '@button--icon' thumbArrowLeft }}
            {{else}}
                {{ render '@button--icon' thumbArrowUp }}
            {{/if}}
            {{#each thumbs }}
                <div class="
                        gallery__thumb
                        {{#if ../typeHorizontal }}
                            gallery__thumb--horizontal
                        {{else}}
                            gallery__thumb--vertical
                        {{/if}}
                        {{#if imageThumb.active}}
                            gallery__thumb--active
                        {{/if}}
                    "
                >
                    {{ render '@image' imageThumb }}
                </div>
            {{/each}}
            {{#if typeHorizontal }}
                {{ render '@button--icon' thumbArrowRight }}
            {{ else }}
                {{ render '@button--icon' thumbArrowDown }}
            {{/if}}
        {{/unless}}
        {{#if dots}}
            {{#each thumbs}}
                <div
                    class="
                        gallery__thumb-dot
                        {{#if dotThumb.active}}
                            gallery__thumb-dot--active
                        {{/if}}
                    "
                >
                    <div class="gallery__dot"></div>
                </div>
            {{/each}}
        {{/if}}


    </div>
</div>
 
{
  "typeVertical": true,
  "dots": false,
  "imageMain": {
    "dataSrc": "/images/product/product_432x648.jpg"
  },
  "thumbArrowLeft": {
    "tag": "button",
    "class": "gallery__thumb-arr",
    "attributes": "type=\"button\" aria-label=\"check more images\"",
    "icon": {
      "id": "angle-up",
      "class": "gallery__icon-arrow gallery__icon-arrow--horizontal",
      "hidden": true
    }
  },
  "thumbArrowUp": {
    "tag": "button",
    "class": "gallery__thumb-arr",
    "attributes": "type=\"button\" aria-label=\"check more images\"",
    "icon": {
      "id": "angle-up",
      "class": "gallery__icon-arrow gallery__icon-arrow--vertical",
      "hidden": true
    }
  },
  "thumbArrowRight": {
    "tag": "button",
    "class": "gallery__thumb-arr",
    "attributes": "type=\"button\" aria-label=\"check more images\"",
    "icon": {
      "id": "angle-down",
      "class": "gallery__icon-arrow gallery__icon-arrow--horizontal",
      "hidden": true
    }
  },
  "thumbArrowDown": {
    "tag": "button",
    "class": "gallery__thumb-arr",
    "attributes": "type=\"button\" aria-label=\"check more images\"",
    "icon": {
      "id": "angle-down",
      "class": "gallery__icon-arrow gallery__icon-arrow--vertical",
      "hidden": true
    }
  },
  "thumbs": [
    {
      "imageThumb": {
        "dataSrc": "/images/product/product_64x96.jpg",
        "active": true
      }
    },
    {
      "imageThumb": {
        "dataSrc": "/images/product/product_64x96.jpg"
      }
    },
    {
      "imageThumb": {
        "dataSrc": "/images/product/product_64x96.jpg"
      }
    },
    {
      "imageThumb": {
        "dataSrc": "/images/product/product_64x96.jpg"
      }
    }
  ],
  "typeHorizontal": true
}
  • Content: 
    $fotorama__background_image                 : url('https://www.dekistenkoning.nl/static/frontend/FalconMedia/Kistenkoning/nl_NL/images/fotorama/gallery/gallery.png') !default;
$fotorama__thumbs-margin-top                : 20px !default;
$fotorama__thumbs-border-color              : 1px !default;
$fotorama__thumbs-border-width              : #e5e5e5 !default;
  • URL: /components/raw/gallery/_gallery-variables.scss
  • Filesystem Path: build/components/Organisms/gallery/_gallery-variables.scss
  • Size: 361 Bytes
  • Content: 
    @import 'gallery-variables';
.gallery {
    display: flex;
    flex-flow: nowrap;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    flex-direction: column;

    &--vertical {
        @include mq($screen-m) {
            flex-direction: row;
        }
    }
    &__frame {
        position: relative;
        background-color: #ecf5f4;
        padding: $spacer--1;
        margin-bottom: $spacer--15;

        & .lazyload-wrapper {
            background-color: transparent;
        }
    }
    &__stage {
        order: 1;
        margin-bottom: $spacer--medium;

        &--vertical {
            margin-bottom: 0;
            @include mq($screen-m) {
                order: 2;
                width: calc(100% - (#{$spacer--medium} + #{48px}));
            }
            @include mq($screen-l) {
                width: calc(100% - (#{20px} + #{80px}));
            }
        }
        &--horizontal {
            order: 1;
        }
    }
    &__nav {
        order: 2;
        display: flex;
        align-items: center;
        &--vertical {
            @include mq($screen-m) {
                margin-right: $spacer--medium;
                flex-direction: column;
                order: 1;
            }
            @include mq($screen-l) {
                margin-right: $spacer--2;
            }
        }
    }
    &__thumb {
        background-color: #ecf5f4;
        padding: $spacer--05;
        overflow: hidden;
        margin-right: $spacer--medium;
        border: none;
        width: 48px;
        height: 48px;
        @include mq($screen-m) {
            margin-bottom: $spacer--medium;
            margin-right: 0;
        }
        @include mq($screen-l) {
            width: 80px;
            height: 80px;
        }
        &:hover,
        &:focus {
            cursor: pointer;
        }
        &--active {
            border: 1px solid $green;
        }
        & .lazyload-wrapper {
            background-color: transparent;
        }
    }
    &__thumb-arr {
        display: flex !important; // sass-lint:disable-line no-important
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        margin: 0 auto;
        &:hover,
        &:focus {
            cursor: pointer;
        }
    }
    &__icon-arrow {
        width: 12px;
        height: 12px;
        transform: rotate(-90deg);
        fill: $gray;
        &--small {
            width: 12px;
        }
        &--vertical {
            @include mq($screen-m) {
                transform: none;
            }
        }
    }
    &__product-label {
        position: absolute;
        left: $spacer;
        top: $spacer--medium;
    }

    &-placeholder {
        position: relative;

        .loader {
            position: absolute;
            background: transparent;
        }
    }
}
.fotorama {
    .fotorama {
        &__thumb-border {
            border: 1px solid $red;
            border-radius: 5px;
        }

        &__wrap {
            background: #fff;
        }

        &__thumb {
            cursor: pointer;

            &--icon {
                background-image: $fotorama__background_image;
            }

            &__arr {
                background: rgba(255, 255, 255, 0.9);
            }
        }

        &__stage__frame.fotorama__active.fotorama_vertical_ratio.fotorama__loaded.fotorama__loaded--img {
            border: $fotorama__thumbs-border-width solid $fotorama__thumbs-border-color;
        }

        &__dot {
            height: 12px;
            width: 12px;
            background-color: $color-seondary-light;
        }

        &__active {
            & .fotorama__dot {
                background-color: $dkk-second;
                border-color: $dkk-second;
            }
        }

        &__stage {
            padding: 0 0 $fotorama__thumbs-margin-top 0;
            margin-left: 0;
            &__shaft .fotorama__grab {
                // sass-lint:disable no-important
                max-width: 593px !important;
                // sass-lint:enable no-important
            }
        }

        &__arr {
            background: rgba(255, 255, 255, 0.8);
            margin: auto;
            height: 80px;

            .fotorama__arr__arr {
                background-image: $fotorama__background_image;
            }

            &--next {
                @include mq($screen-m) {
                    // sass-lint:disable no-important
                    right: 94px !important;
                    // sass-lint:enable no-important
                }
            }

            &--prev {
                // sass-lint:disable no-important
                left: 2px !important;
                // sass-lint:enable no-important
            }
        }

        &__nav {
            &__frame {
                &--thumb {
                    margin-top: $fotorama__thumbs-margin-top;
                    border: $fotorama__thumbs-border-width solid $fotorama__thumbs-border-color;
                }
            }
        }

        &__fullscreen {
            .fotorama__fullscreen-icon {
                background-image: $fotorama__background_image;
                background-position: -80px 0;
                background-color: transparent;
                background-repeat: no-repeat;
                z-index: 1001;
            }

            .fotorama {
                &__grab {
                    border: 0;
                }

                &__zoom-in,
                &__zoom-out {
                    background-image: $fotorama__background_image;
                    left: 50px;
                }

                &__stage {
                    .fotorama__fullscreen-icon {
                        background: $fotorama__background_image -80px 0 no-repeat;
                    }

                    .fotorama__arr {
                        background: transparent;
                        margin: auto;
                        height: 80px;

                        .fotorama__arr__arr {
                            background-image: $fotorama__background_image;
                        }

                        &--next {
                            @include mq($screen-m) {
                                // sass-lint:disable no-important
                                right: 80px !important;
                                // sass-lint:enable no-important
                            }
                        }

                        &--prev {
                            @include mq($screen-m) {
                                // sass-lint:disable no-important
                                left: 200px !important;
                                // sass-lint:enable no-important
                            }
                        }
                    }

                    &__shaft {
                        .loader.loader--visible {
                            background: transparent;
                        }

                        .fotorama__stage__frame {
                            border: none;
                        }
                    }
                }

                &__stage__frame.fotorama__active.fotorama_vertical_ratio.fotorama__loaded.fotorama__loaded--img {
                    border: none;
                }

                &__nav-wrap .fotorama__nav--thumbs {
                    margin: 0;
                }
            }
        }
    }
    &--fullscreen {
        .fotorama {
            &__grab {
                border: 0;
            }

            &__zoom-in,
            &__zoom-out {
                background-image: $fotorama__background_image;
                left: 50px;
            }

            &__stage {
                .fotorama__fullscreen-icon {
                    top: 80px;
                    @include mq($screen-m) {
                        top: 0;
                    }
                    background: $fotorama__background_image -80px 0 no-repeat;
                }

                .fotorama__arr {
                    background: transparent;
                    margin: auto;
                    height: 80px;

                    .fotorama__arr__arr {
                        background-image: $fotorama__background_image;
                    }

                    &--next {
                        @include mq($screen-m) {
                            // sass-lint:disable no-important
                            right: 80px !important;
                            // sass-lint:enable no-important
                        }
                    }

                    &--prev {
                        @include mq($screen-m) {
                            // sass-lint:disable no-important
                            left: 200px !important;
                            // sass-lint:enable no-important
                        }
                    }
                }

                &__shaft {
                    .loader.loader--visible {
                        background: transparent;
                    }

                    .fotorama__stage__frame {
                        border: none;
                    }
                }
            }

            &__stage__frame.fotorama__active.fotorama_vertical_ratio.fotorama__loaded.fotorama__loaded--img {
                border: none;
            }

            &__nav-wrap .fotorama__nav--thumbs {
                margin: 0;
            }
        }
    }
    .loader.loader--visible {
        background: transparent;
    }
}
  • URL: /components/raw/gallery/_gallery.scss
  • Filesystem Path: build/components/Organisms/gallery/_gallery.scss
  • Size: 9.5 KB

Gallery Component

Gallery in Magento 2 is built based on Fotorama. More information about Gallery widget you can find in Magento 2 documentation.

Alpaca’s Gallery use following styles:

  • styles for Magento 2 Gallery based on default Magento 2 .less styles, can be found in: theme-frontend-alpaca/styles/gallery-styles.scss - this file is generated as a separate css file and loaded only on product page, where gallery is used.
  • styles for gallery theme customisation: theme-frontend-alpaca/Magento_Catalog/styles/modules/_fotorama.scss
  • styles from fractal component (used in Magento 2 theme implementation): theme-frontend-alpaca/Snowdog_Components/components/Organisms/gallery/_gallery.scss
  • styles for fractal view (used only in fractal view): theme-frontend-alpaca/Snowdog_Components/docs/styles/docs-only-styles/_gallery.scss

Some classes of fractal component are extended in theme-frontend-alpaca/Magento_Catalog/styles/modules/_fotorama.scss:

  • .gallery__thumb with variants
  • .gallery__thumb-dot with variants
  • .gallery__thumb-arr with variants
  • .gallery__icon-arrow with variants
  • .gallery__dot with variants

It is still a bit complicated. The complication level is caused by the Magento implementation, hope it will be refactor and simplified in future released

All styles can be overwritten in the child theme.

Gallery variants are set in vendor/snowdog/theme-frontend-alpaca/etc/view.xml. Variants can differ depending on breakpoints and variant’s class (&--horizontal, &--vertical) is added dynamically to different elements inside the gallery. Variants’ presentation in fractal is mainly demonstrative. Please take it under consideration customising your Alpaca’s child theme.