600 West

Image: Responsive Small 

<div class="responsiveimage-wrapper _small">
    <img id="" class="responsiveimage  " alt="" style="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 460'%3E%3Cpath fill='%23DEE1E1' d='M0 0h720v460H0z'/%3E%3Cg fill='%23B1B6B7'%3E%3Cpath d='M185.1 92.4v275.1h349.7V92.4H185.1zm321.6 245.3H215V122.3h291.7v215.4z'/%3E%3Cpath d='M230.1 314.9l60.4-63.5 22.6 9.8 71.4-76 28.1 33.6 12.7-7.6 68.6 103.7'/%3E%3Ccircle cx='299.9' cy='176.8' r='26.4'/%3E%3C/g%3E%3C/svg%3E"
    />
</div>
 
{{#if srcmobile}}
    {{#if responsive}}<div class="responsiveimage-wrapper {{wrappermodifier}}">{{/if}}
        <picture>
            <source media="(max-width: 599px)" src{{#if src2x}}set{{/if}}="{{srcmobile}}">
            <img
                class="{{#if responsive}}responsive{{/if}}image {{#if lazyload}}b-lazy{{/if}} {{modifier}}"
                style="{{style}}"
                {{#if src2x}}
                    {{#if lazyload}}
                        data-src="{{src}}|{{src2x}}"
                    {{else}}
                        srcset="{{src}}, {{src2x}} 2x"
                    {{/if}}
                {{else}}
                    {{#if svgurl2x}}
                        {{#if lazyload}}
                            data-src="{{svgurl}}|{{svgurl2x}}"
                        {{else}}
                            srcset="{{svgurl}}, {{svgurl2x}} 2x"
                        {{/if}}
                    {{else}}
                        {{#if lazyload}}data-{{/if}}src="{{#if src}}{{src}}{{else}}{{{svgurl}}}{{/if}}"
                    {{/if}}
                {{/if}}
                {{#if lazyload}}src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NjAgNTYwIj48cGF0aCBmaWxsPSIjRjNGNEY0IiBkPSJNMCAwaDk2MHY1NjBIMHoiLz48L3N2Zz4="{{/if}}
                alt="{{alt}}"
            >
        </picture>
    {{#if responsive}}</div>{{/if}}
{{else}}
    {{#if responsive}}<div class="responsiveimage-wrapper {{wrappermodifier}}">{{/if}}
    <img id="{{id}}"
        class="{{#if responsive}}responsive{{/if}}image {{#if lazyload}}b-lazy{{/if}} {{modifier}}"
        alt="{{alt}}"
        style="{{style}}"
        {{#if height}}height="{{height}}"{{/if}}
        {{#if width}}width="{{width}}"{{/if}}
        {{#if src2x}}
            {{#if lazyload}}
                data-src="{{src}}|{{src2x}}"
            {{else}}
                srcset="{{src}}, {{src2x}} 2x"
            {{/if}}
        {{else}}
            {{#if svgurl2x}}
                {{#if lazyload}}
                    data-src="{{svgurl}}|{{svgurl2x}}"
                {{else}}
                    srcset="{{svgurl}}, {{svgurl2x}} 2x"
                {{/if}}
            {{else}}
                {{#if lazyload}}data-{{/if}}src="{{#if src}}{{src}}{{else}}{{{svgurl}}}{{/if}}"
            {{/if}}
        {{/if}}
        {{#if lazyload}}src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NjAgNTYwIj48cGF0aCBmaWxsPSIjRjNGNEY0IiBkPSJNMCAwaDk2MHY1NjBIMHoiLz48L3N2Zz4="{{/if}}
    />
    {{#if responsive}}</div>{{/if}}
{{/if}}
 
{
  "id": null,
  "alt": null,
  "wrappermodifier": "_small",
  "modifier": null,
  "responsive": true,
  "lazyload": null,
  "src": null,
  "src2x": null,
  "srcmobile": null,
  "svgurl": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 460'%3E%3Cpath fill='%23DEE1E1' d='M0 0h720v460H0z'/%3E%3Cg fill='%23B1B6B7'%3E%3Cpath d='M185.1 92.4v275.1h349.7V92.4H185.1zm321.6 245.3H215V122.3h291.7v215.4z'/%3E%3Cpath d='M230.1 314.9l60.4-63.5 22.6 9.8 71.4-76 28.1 33.6 12.7-7.6 68.6 103.7'/%3E%3Ccircle cx='299.9' cy='176.8' r='26.4'/%3E%3C/g%3E%3C/svg%3E",
  "svgurl2x": null,
  "style": null
}
  • Content: 
    const PropTypes = require('prop-types');
const React = require('react');
const cx = require('classnames');

const Image = ({id, responsive, clearMobileMargin, lazyload, modifier, alt, src, src2x, style}) => {
    const source = lazyload ? {
        'data-src': !src2x ? src : null,
        'data-srcset': src2x && `${src}, ${src2x} 2x`,
    } : {
        src: !src2x ? src : null,
        srcSet: src2x && `${src}, ${src2x} 2x`,
    };

    const image = (
        <img id={id || null}
             className={cx([
                 responsive ? 'responsiveimage' : 'image',
                 lazyload ? 'b-lazy' : '',
                 modifier
             ])}
             alt={alt}
             {...source}
        />
    );

    return responsive ? (
        <div className={cx([
            'responsiveimage-wrapper',
            clearMobileMargin ? '_clear-mobile-margin' : ''
        ])}>
            {image}
        </div>
    ) : image;
};
Image.propTypes = {
    id: PropTypes.string,
    responsive: PropTypes.bool,
    clearMobileMargin: PropTypes.bool,
    lazyload: PropTypes.bool,
    modifier: PropTypes.string,
    alt: PropTypes.string,
    src: PropTypes.string,
    src2x:PropTypes.string,
    style:PropTypes.string
};

module.exports = Image;
  • URL: /components/raw/image/Image.jsx
  • Filesystem Path: components/atoms/Image/Image.jsx
  • Size: 1.3 KB
  • Content: 
    .Image--shadow {
    @include BoxShadow($level: "Image", $filter: true);
}
.Image--rounded {
    border-radius: $Border-radius--500;
}

/**
*  Product Images
*
*  Classes for positioning product images that flow outside of the grid.
*/
@media #{$desktop-media} {
    .responsiveimage {
        position: absolute;
        top: 0;
        width: auto;
        height: 520px;
        max-width: none;
        &-wrapper {
            position: relative;
            height: 520px;
        }
        &._left {
            right: 10px;
        }
        &._right {
            left: 10px;
        }
        &-wrapper._large,
        &-wrapper._large .responsiveimage {
            height: 640px;
        }
        &-wrapper._small,
        &-wrapper._small .responsiveimage {
            height: 400px;
        }
        &-wrapper._smaller,
        &-wrapper._smaller .responsiveimage {
            height: 350px;
        }
    }
}
  • URL: /components/raw/image/Image.scss
  • Filesystem Path: components/atoms/Image/Image.scss
  • Size: 927 Bytes

There are no notes for this item.