Post form: limit photos to 4, add GPS fields with geolocation button

pages/02.post/post-form.md

@@ -36,14 +36,26 @@ form:
 
         -
             name: photos
-            label: Photos
+            label: Photos (max 4)
             type: file
             multiple: true
             destination: 'user://pages/01.tracker'
-            limit: 10
+            limit: 4
             accept:
                 - 'image/*'
 
+        -
+            name: lat
+            label: Latitude
+            type: text
+            placeholder: 'tap "Get Location" below'
+
+        -
+            name: lng
+            label: Longitude
+            type: text
+            placeholder: ''
+
     buttons:
         -
             type: submit
@@ -59,6 +71,8 @@ form:
                 frontmatter:
                     title: '{{ form.value.title }}'
                     date: '{{ form.value.date }}'
+                    lat: '{{ form.value.lat }}'
+                    lng: '{{ form.value.lng }}'
         -
             message: 'Entry posted successfully!'
         -

themes/intotheeast/css/style.css

@@ -103,3 +103,10 @@ body {
 
 /* Post form */
 .post-form-wrap h1 { font-size: 1.4rem; margin-bottom: 1.5rem; }
+.post-form-wrap .btn-location {
+    display: block; width: 100%; margin-top: 1rem;
+    padding: 0.85rem 1rem; min-height: 44px;
+    background: #f0f0f0; border: 1px solid #ccc;
+    border-radius: 6px; font-size: 1rem; cursor: pointer;
+}
+.post-form-wrap .location-status { font-size: 0.85rem; color: #666; margin-top: 0.5rem; text-align: center; }

themes/intotheeast/templates/post-form.html.twig

@@ -4,5 +4,29 @@
 <div class="post-form-wrap">
     <h1>{{ page.title }}</h1>
     {% include 'partials/form.html.twig' ignore missing %}
+    <button type="button" id="get-location" class="btn-location">Get Current Location</button>
+    <p id="location-status" class="location-status"></p>
 </div>
+
+<script>
+document.getElementById('get-location').addEventListener('click', function() {
+    var status = document.getElementById('location-status');
+    status.textContent = 'Getting location…';
+    if (!navigator.geolocation) {
+        status.textContent = 'Geolocation not supported by your browser.';
+        return;
+    }
+    navigator.geolocation.getCurrentPosition(function(pos) {
+        var lat = pos.coords.latitude.toFixed(6);
+        var lng = pos.coords.longitude.toFixed(6);
+        var latField = document.querySelector('input[name="data[lat]"]');
+        var lngField = document.querySelector('input[name="data[lng]"]');
+        if (latField) latField.value = lat;
+        if (lngField) lngField.value = lng;
+        status.textContent = 'Location set: ' + lat + ', ' + lng;
+    }, function(err) {
+        status.textContent = 'Could not get location: ' + err.message;
+    });
+});
+</script>
 {% endblock %}