website/layouts/partials/photos.html

<div id="photoslist{{ if .limit }}-{{ .limit }}{{ end }}" class="transition-parent photos-list">
    <span id="number" name="{{if .limit }}{{ .limit }}{{ end }}"></span>
    <div
	    class="transition-child section-error-container"
	    style="height: 100%;">
	<div class="section-error-content">
	    <i class="fa fas fa-times-circle"></i>
	    {{ .Site.Params.photos.empty }}
	</div>
    </div>
</div>
<script defer>
    function loadimages(limit=-1){
	    var http = new XMLHttpRequest();
	    let issetlimit = (limit!=-1);
	    var url = '/getallphotos'+(issetlimit?('?limit='+limit):'');
	    http.open('GET', url, false);
	    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	    http.onreadystatechange = function() {//Call a function when the state changes.
		    if(http.readyState == 4 && http.status == 200) {
			    let responsehtml = http.responseText;
			    document.querySelectorAll("#photoslist"+(issetlimit?`-${limit}`:'')).forEach(
			    e=>{e.innerHTML = responsehtml});
			}

		}
	    http.send();
	}
	loadimages({{ if .limit }}{{ .limit }}{{ end }});
</script>