Manage displayed photos via the API

Define limits (for homepage carousel and photos per page on a place) in the site settings via a slider

src/routes/_layout.svelte

@@ -11,6 +11,8 @@
                         description
                         explore_globe
                         explore_list
+                        homepage_photos_limit
+                        photos_per_page
                         instagram
                         seo_name
                         seo_title_default

src/routes/index.svelte

@@ -1,15 +1,21 @@
 <script context="module">
-	import { apiEndpoints } from '../utils/store'
+	import { site, apiEndpoints } from '../utils/store'
 
-	// Preload data
+    // Variables
+    let limit
+
+	// Preload data (photos to display)
 	export async function preload (page, session) {
-        // Load random photos
+        // Fields
         const fields = [
             'id', 'name', 'image.private_hash',
             'location.id', 'location.name', 'location.slug', 'location.country.name'
         ]
+        // Random sort
         const sort = '?'
-        const limit = 5
+        // Get the limit from API
+        site.subscribe(store => limit = store.homepage_photos_limit)
+
         const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=${fields.join()}&sort=${sort}&limit=${limit}`)
         const photos = await req.json()
 		if (req.ok) {
@@ -22,7 +28,6 @@
 <script>
     import { onMount } from 'svelte'
     import {
-        site,
         currentLocation,
         currentPhotos,
         pageReady,

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

@@ -72,7 +72,7 @@
     /*
     ** Pagination
     */
-    let photosPerPage = 2 // 12
+    let photosPerPage = $site.photos_per_page
     let currentIndex = photosPerPage
 
     // Hide photos by default