<link media="all" rel="stylesheet" href="/assets/themes/default/css/property-list-card.css?cb=">
<a href="#" class="property-list-card" data-module="propertyListCard" aria-label="View Title">
<div class="property-list-card__container">
<div class="property-list-card__gallery">
<div class="property-list-card__gallery-image-tag js-image-tag">Tag</div>
<div class="property-list-card__gallery-container">
<div class="property-list-card__main-image" data-module="imageLazyLoad">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/gallery.css?cb=">
<div class="gallery ">
<div class="gallery__slides-container">
<div class="gallery__slides js-slides">
<div class="gallery__slide js-slide" data-type="image" data-slide-index="0">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85" />
<img src="/assets/themes/default/images/ajax-loader.gif" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="1">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<img src="/assets/themes/default/images/ajax-loader.gif" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="gallery__slide js-slide" data-type="image" data-slide-index="2">
<div class="image " data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" class="js-small-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<source media="(min-width: 841px)" class="js-medium-image" type="image/jpeg" srcset="/assets/themes/default/images/ajax-loader.gif" data-srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<img src="/assets/themes/default/images/ajax-loader.gif" data-src="" alt="Image Alt Text">
</picture>
</div>
</div>
</div>
<span class="gallery__arrow gallery__arrow--left js-arrow-left"><span>Previous</span> </span>
<div class="gallery__selection-label">
<span class="gallery__current-slide js-current-slide">1</span>
<span class="gallery__total-slides js-total-slides">3</span>
</div>
<span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
</div>
<div class="gallery__dots js-dots">
<span class="gallery__dot js-dot active" data-dot-index="0"></span>
<span class="gallery__dot js-dot " data-dot-index="1"></span>
<span class="gallery__dot js-dot " data-dot-index="2"></span>
</div>
</div>
</div>
<div class="property-list-card__stacked-image js-image-1">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="property-list-card__stacked-image js-image-2">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
</div>
</div>
<div class="property-list-card__content-container">
<div class="property-list-card__headings-container">
<h2 class="property-list-card__title js-title">Title</h2>
</div>
<div class="property-list-card__keys-cta-container">
<div class="property-list-card__keys-container">
<div class="property-list-card__property-key-type js-type">Type</div>
<div class="property-list-card__property-key-size js-size">Size</div>
</div>
<div class="property-list-card__cta js-cta">
Find out more
</div>
</div>
</div>
</div>
</a>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/property-list-card.css?cb={{cacheBuster}}">
{{/if}}
<a href="{{cta.url}}" class="property-list-card" data-module="propertyListCard" aria-label="View {{title}}">
<div class="property-list-card__container">
<div class="property-list-card__gallery">
{{#if imageTag}}
<div class="property-list-card__gallery-image-tag js-image-tag">{{imageTag}}</div>
{{/if}}
<div class="property-list-card__gallery-container">
<div class="property-list-card__main-image" data-module="imageLazyLoad">
{{> @gallery slides=gallery.slides hideThumbnails=true theme=theme firstInstance=gallery.firstInstance disableJsInit=true}}
</div>
<div class="property-list-card__stacked-image js-image-1">
{{> @image gallery.slides.1.image }}
</div>
<div class="property-list-card__stacked-image js-image-2">
{{> @image gallery.slides.2.image }}
</div>
</div>
</div>
<div class="property-list-card__content-container">
<div class="property-list-card__headings-container">
{{#if mls}}
<span class="property-list-card__mls js-mls">{{mls}}</span>
{{/if}}
{{#if displayLocation}}
<span class="property-list-card__location js-location">{{displayLocation}}</span>
{{/if}}
<h2 class="property-list-card__title js-title">{{title}}</h2>
</div>
<div class="property-list-card__keys-cta-container">
<div class="property-list-card__keys-container">
{{#if propertyType}}
<div class="property-list-card__property-key-type js-type">{{propertyType}}</div>
{{/if}}
{{#if squareFootage}}
<div class="property-list-card__property-key-size js-size">{{squareFootage}}</div>
{{/if}}
</div>
<div class="property-list-card__cta js-cta">
{{ cta.text }}
</div>
</div>
</div>
</div>
</a>
{
"theme": "default",
"firstInstance": true,
"imageTag": "Tag",
"gallery": {
"firstInstance": true,
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"firstInstance": true,
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
}
]
},
"location": "Location",
"title": "Title",
"propertyType": "Type",
"squareFootage": "Size",
"cta": {
"text": "Find out more",
"url": "#"
}
}
import { Gallery } from '../../media/gallery/gallery';
export class PropertyListCard {
constructor(component, propertyData) {
this.component = component;
this.image1 = this.component.querySelector('.js-image-1');
this.image2 = this.component.querySelector('.js-image-2');
const galleryElement = this.component.querySelector('.gallery');
if (galleryElement) {
this.gallery = new Gallery(galleryElement);
this.gallery.addChangeListener(() => this.updateImages());
}
if (propertyData) {
this.setPropertyData(propertyData);
}
}
updateImages() {
let nextImage1;
let nextImage2;
if (this.gallery.activeAssetIndex === this.gallery.numOfSlides - 1) {
nextImage1 = this.gallery.slides[0].querySelector('.image');
if (this.gallery.slides[1]) {
nextImage2 = this.gallery.slides[1].querySelector('.image');
}
} else if (this.gallery.activeAssetIndex === this.gallery.numOfSlides - 2) {
if (this.gallery.slides[this.gallery.activeAssetIndex + 1]) {
nextImage1 = this.gallery.slides[this.gallery.activeAssetIndex + 1].querySelector('.image');
}
nextImage2 = this.gallery.slides[0].querySelector('.image');
} else {
if (this.gallery.slides[this.gallery.activeAssetIndex + 1]) {
nextImage1 = this.gallery.slides[this.gallery.activeAssetIndex + 1].querySelector('.image');
}
if (this.gallery.slides[this.gallery.activeAssetIndex + 2]) {
nextImage2 = this.gallery.slides[this.gallery.activeAssetIndex + 2].querySelector('.image');
}
}
if (nextImage1) {
Gallery.setImageSources(nextImage1, () => {
this.image1.innerHTML = nextImage1.outerHTML;
this.image1.style.display = '';
});
} else {
this.image2.style.display = 'none';
}
if (nextImage2) {
Gallery.setImageSources(nextImage2, () => {
this.image2.innerHTML = nextImage2.outerHTML;
this.image2.style.display = '';
});
} else {
this.image2.style.display = 'none';
}
}
setPropertyData(propertyData) {
if (this.gallery) {
const slides = [];
propertyData.images.forEach((image, index) => {
slides.push({
type: 'image',
image: {
altText: `${propertyData.title} ${index}`,
placeholderImageUrl: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA',
fallbackImageUrl: image,
sources: [
{
type: 'image/webp',
desktopImageUrl: `${image}?quality=85&format=webp&width=400`,
mobileImageUrl: `${image}?width=840&quality=85&format=webp`,
},
{
type: 'image/jpg',
desktopImageUrl: `${image}?quality=85&width=400`,
mobileImageUrl: `${image}?width=840&quality=85`,
},
],
},
});
});
this.gallery.setSlides(slides);
this.updateImages();
}
const titleElement = this.component.querySelector('.js-title');
titleElement.innerText = propertyData.title;
const imageTagElement = this.component.querySelector('.js-image-tag');
if (imageTagElement) {
if (propertyData.imageTag) {
imageTagElement.innerText = propertyData.imageTag;
imageTagElement.style.display = '';
} else {
imageTagElement.style.display = 'none';
}
}
const locationElement = this.component.querySelector('.js-location');
if (locationElement && propertyData.displayLocation) {
locationElement.innerText = propertyData.displayLocation;
} else if (locationElement && !propertyData.displayLocation) {
locationElement.style.display = 'none';
}
if (this.component.querySelector('.js-type') && propertyData.propertyType) {
this.component.querySelector('.js-type').innerText = propertyData.propertyType;
}
const sizeElement = this.component.querySelector('.js-size');
if (sizeElement && propertyData.squareFootage) {
sizeElement.innerText = propertyData.squareFootage;
}
this.component.href = propertyData.propertyUrl;
const ctaElement = this.component.querySelector('.js-cta');
if (ctaElement) {
ctaElement.innerText = 'View Listing';
}
const bedElement = this.component.querySelector('.js-bedrooms');
if (bedElement && propertyData.bedroomsText) {
bedElement.innerText = propertyData.bedroomsText;
} else if (bedElement && !propertyData.bedroomsText) {
bedElement.style.display = 'none';
}
const bathElement = this.component.querySelector('.js-bath');
if (bathElement && propertyData.bathroomsText) {
bathElement.innerText = propertyData.bathroomsText;
} else if (bathElement && !propertyData.bathroomsText) {
bathElement.style.display = 'none';
}
if (this.component.querySelector('.js-price') && propertyData.price) {
this.component.querySelector('.js-price').innerText = propertyData.price;
}
if (this.component.querySelector('.js-cta-url') && propertyData.propertyUrl) {
this.component.querySelector('.js-cta-url').setAttribute('href', propertyData.propertyUrl);
}
if (this.component.querySelector('.js-mls') && propertyData.mls) {
this.component.querySelector('.js-mls').innerText = propertyData.mls;
}
}
}
export default (component) => new PropertyListCard(component);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.property-list-card {
&__container {
width: 100%;
@include breakpoint(medium) {
display: grid;
grid-template-columns: 4fr 4fr;
}
}
.gallery__slides {
aspect-ratio: 1.63 / 1;
}
@include breakpoint(large) {
img {
height: 100%;
}
.image {
height: 100%;
width: 100%;
}
.gallery,
.gallery__slides-container,
.gallery__slides {
aspect-ratio: unset;
height: 100%;
width: 100%;
}
}
&__main-image {
aspect-ratio: 1.63 / 1;
position: relative;
@include breakpoint(medium) {
aspect-ratio: unset;
grid-area: 1/1/3/2;
}
img {
aspect-ratio: 1.63 / 1;
}
}
&__gallery-container {
@include breakpoint(medium) {
aspect-ratio: 1.63 / 1;
display: grid;
gap: rem(8);
height: 100%;
width: 100%;
}
.gallery__slide {
padding-bottom: unset;
}
@include breakpoint(large) {
aspect-ratio: unset;
grid-template-columns: 1fr 0.4fr;
grid-template-rows: repeat(2, 1fr);
}
}
&__gallery-image-tag {
color: $color-white;
padding: rem(20);
position: absolute;
z-index: 10;
}
&__stacked-image {
display: none;
@include breakpoint(large) {
display: block;
}
&:nth-child(2) {
grid-area: 1/2/2/3;
}
&:nth-child(3) {
grid-area: 2/2/3/3;
}
img {
aspect-ratio: 1.62 / 1;
display: none; // Hide this by default. The image may not be set yet
&[src^='http'],
&[src^='/media'] {
// The image url has been set
display: block;
}
}
}
.gallery__dots, .gallery__selection-label {
display: none;
}
&__content-container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 0;
margin-top: rem(20);
@include breakpoint(medium) {
margin-left: 10%;
margin-top: 0;
}
}
&__keys-cta-container {
@include breakpoint(medium) {
align-items: flex-end;
display: flex;
justify-content: space-between;
}
}
&__property-key-type,
&__property-key-size {
@extend %heading02;
display: inline-block;
margin-right: rem(20);
padding-bottom: 0;
}
&__location {
@extend %heading02;
}
&__title {
@extend %heading01;
padding-bottom: 0;
}
&__cta-holder {
padding: rem(16);
position: relative;
text-align: left;
@include breakpoint(medium) {
padding: 0;
}
}
&__cta {
@extend %secondary-cta;
margin-top: rem(30);
@include breakpoint(medium) {
margin-top: 0;
}
}
}
No notes defined.