112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
|
import RitzenbergenLib from "../../ritzenbergenlib.ts";
|
|
import {ref} from "vue";
|
|
|
|
async function loadImage(path: string) {
|
|
try{
|
|
const response = await fetch(RitzenbergenLib.RitzenbergenLib.api(path), {
|
|
headers: {
|
|
"Accept":"image/png"
|
|
}
|
|
});
|
|
if(!response.ok) return false;
|
|
const blob = await response.blob();
|
|
return URL.createObjectURL(blob);
|
|
|
|
}
|
|
catch(e){
|
|
console.warn(e);
|
|
}
|
|
}
|
|
|
|
loadImage("randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3").then((url)=>{
|
|
images.value[0]=url;
|
|
});
|
|
loadImage("randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3").then((url)=>{
|
|
images.value[1]=url;
|
|
});
|
|
loadImage("randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3").then((url)=>{
|
|
images.value[2]=url;
|
|
});
|
|
loadImage("randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3").then((url)=>{
|
|
images.value[3]=url;
|
|
});
|
|
|
|
const images=ref([]);
|
|
</script>
|
|
<template>
|
|
<section
|
|
class="gallery09 cid-u6k7q0xbqP"
|
|
id="gallery-9-u6k7q0xbqP"
|
|
v-if="images[0]"
|
|
>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-12 col-lg-4 main-text">
|
|
<div class="">
|
|
<h5
|
|
class="mbr-section-title mbr-fonts-style mt-0 mb-4 display-2"
|
|
>
|
|
<strong>Bilderbuch Ritzenbergen</strong>
|
|
</h5>
|
|
<h6
|
|
class="mbr-section-subtitle mbr-fonts-style mt-0 mb-4 display-7"
|
|
>
|
|
Klicke auf ein Bild um in unsere Galerie zu
|
|
gelangen. Die Bilder sind nach Jahreszahl und
|
|
Kategorie geordnet.
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 side-features row">
|
|
<div
|
|
class="item features-image col-12 col-md-6 col-lg-6 active"
|
|
>
|
|
<div class="item-wrapper">
|
|
<div class="item-img">
|
|
<RouterLink to="/galerie/doppelkopf"
|
|
><img :src="images[0]"
|
|
/></RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item features-image col-12 col-md-6 col-lg-6 active"
|
|
>
|
|
<div class="item-wrapper">
|
|
<div class="item-img">
|
|
<RouterLink to="/galerie/erntefest"
|
|
><img :src="images[1]"
|
|
/></RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item features-image col-12 col-md-6 col-lg-6 active"
|
|
>
|
|
<div class="item-wrapper">
|
|
<div class="item-img">
|
|
<RouterLink to="/galerie/fussball"
|
|
><img :src="images[2]"
|
|
/></RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item features-image col-12 col-md-6 col-lg-6 active"
|
|
>
|
|
<div class="item-wrapper">
|
|
<div class="item-img">
|
|
<RouterLink to="/galerie/osterfeuer"
|
|
><img :src="images[3]"
|
|
/></RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<style></style>
|