Carousel: Add city in photo's caption instead of region
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2020-08-24 11:18:09 +02:00
parent d058cab507
commit 1c8cb20b67
2 changed files with 6 additions and 6 deletions

View File

@@ -141,7 +141,7 @@
<div class="wrap">
<div class="gallery">
<div class="gallery__images">
{#each photos as { id, name, location, image }, index}
{#each photos as { id, name, location, city, image }, index}
<div class="gallery__photo"
class:is-prev={id === prevPhoto.id}
class:is-active={id === currentPhoto.id}
@@ -158,7 +158,7 @@
<source media="(min-width: 500px)" data-srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" data-srcset={getThumbnail(image.private_hash, 400)}>
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
alt="{name}, {location.name}, {location.country.name}"
alt="{name}, {city ? city : location.name}, {location.country.name}"
width={defaultWidth} height={defaultHeight}
class:lazyload={
// Load the current index and the two previous/next ones
@@ -203,7 +203,7 @@
<div class="carousel__infos">
<div class="carousel__locations">
{#each photos as { id, name, location }, index}
{#each photos as { id, name, location, city }, index}
<div class="carousel__location style-location"
class:is-prev={id === prevPhoto.id}
class:is-active={id === currentPhoto.id}
@@ -213,10 +213,10 @@
<p class="state style-caps style-caps--transparent">
{#if locationUrl}
<a href="/location/{location.country.slug}/{location.slug}" sapper-noscroll>
{location.name}, {location.country.name}
{city ? city : location.name}, {location.country.name}
</a>
{:else}
{location.name}, {location.country.name}
{city ? city : location.name}, {location.country.name}
{/if}
</p>
</div>

View File

@@ -63,7 +63,6 @@
let windowWidth
let gotoLink
let pageTitle
let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
@@ -125,6 +124,7 @@
</a>
{/if}
</div>
<a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden" sapper-noscroll>&nbsp;</a>
</div>