Add City field to photos

Used for regions/wider locations

src/molecules/Photo.svelte

@@ -15,9 +15,9 @@
     const defaultHeight = Math.ceil(defaultWidth / 1.5)
 
     // Location related
-    const { name, date, location } = photo
+    const { name, date, location, city } = photo
     const { private_hash } = photo.image
-    const imgAlt = `${name}, ${location.region}, ${location.country.name}`
+    const imgAlt = `${name}, ${city ? city : location.region}, ${location.country.name}`
     const nameSplit = name.split(', ')
 
     // Photo index
@@ -44,7 +44,7 @@
                 </span>
                 {/each}
             </h2>
-            <p class="style-caps">{location.region}, {location.country.name}</p>
+            <p class="style-caps">{city ? city : location.region}, {location.country.name}</p>
         </div>
     </div>
 

src/routes/_layout.svelte

@@ -1,4 +1,6 @@
 <script context="module">
+    import mainQuery from 'utils/mainQuery'
+
     export async function preload (page, session) {
         await this.fetch(apiEndpoints.gql, {
             method: 'post',
@@ -6,63 +8,7 @@
                 'Content-Type': 'application/json',
                 'Authorization': 'bearer ' + process.env.CONFIG.API_TOKEN
             },
-            body: JSON.stringify({ query: `{
+            body: JSON.stringify({ query: mainQuery })
-                site {
-                    data {
-                        description
-                        explore_globe
-                        explore_list
-                        photos_per_page
-                        instagram
-                        seo_name
-                        seo_title_default
-                        seo_description_default
-                        seo_share_image { full_url }
-                        credits_text
-                        credits_list
-                        newsletter_text
-                        newsletter_subtitle
-                        newsletter_url
-                    }
-                }
-                continents {
-                    data {
-                        id
-                        name
-                        rotation_position
-                    }
-                }
-                countries {
-                    data {
-                        id
-                        name
-                        slug
-                        flag { full_url title }
-                        continent { id name }
-                    }
-                }
-                locations (filter: { status_eq: "published" }) {
-                    data {
-                        id
-                        name
-                        slug
-                        region
-                        country { id name slug }
-                        description
-                        close
-                        coordinates
-                        illu_desktop { full_url }
-                        illu_desktop_2x { full_url }
-                        illu_mobile { full_url }
-                    }
-                }
-                photos (filter: { status_eq: "published" }) {
-                    data {
-                        created_on
-                        location { id }
-                    }
-                }
-            }`})
         })
             .then(res => res.json())
             .then(res => {

src/routes/location/[country]/[place].svelte

@@ -7,7 +7,7 @@
         const fields = [
             'id', 'name', 'slug', 'date', 'image.private_hash',
             'location.id', 'location.name', 'location.slug', 'location.region',
-            'location.country.name', 'location.country.slug',
+            'location.country.name', 'location.country.slug', 'city',
             'created_on', 'modified_on'
         ].join(',')
         const sort = ['-created_on', 'name'].join(',')
@@ -73,7 +73,6 @@
     ** Pagination
     */
     let photosPerPage = $site.photos_per_page
-    let currentIndex = photosPerPage
 
     // Hide photos by default
     photos.forEach((photo, index) => photo.hidden = (index + 1 > photosPerPage) ? true : false)
@@ -190,7 +189,7 @@
 
         {#if photos}
         <div class="photos__view wrap">
-            {#each paginatedPhotos as photo, index}
+            {#each paginatedPhotos as photo}
             <Photo {photo} index={photos.length - photos.indexOf(photo)} />
             {/each}
         </div>

src/utils/mainQuery.js

@@ -0,0 +1,58 @@
+export default `{
+    site {
+        data {
+            description
+            explore_globe
+            explore_list
+            photos_per_page
+            instagram
+            seo_name
+            seo_title_default
+            seo_description_default
+            seo_share_image { full_url }
+            credits_text
+            credits_list
+            newsletter_text
+            newsletter_subtitle
+            newsletter_url
+        }
+    }
+    continents {
+        data {
+            id
+            name
+            rotation_position
+        }
+    }
+    countries {
+        data {
+            id
+            name
+            slug
+            flag { full_url title }
+            continent { id name }
+        }
+    }
+    locations (filter: { status_eq: "published" }) {
+        data {
+            id
+            name
+            slug
+            region
+            country { id name slug }
+            description
+            close
+            coordinates
+            illu_desktop { full_url }
+            illu_desktop_2x { full_url }
+            illu_mobile { full_url }
+        }
+    }
+    photos (filter: { status_eq: "published" }) {
+        data {
+            created_on
+            location { id }
+            city
+        }
+    }
+}`