studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

DTL page : fix dynamic background

Browse source
This commit is contained in:
isUnknown 2025-01-27 15:39:13 +01:00
parent 7dbfedb08c
commit 8e12988961
3 changed files with 45 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/site/blueprints/pages/design-to-light.yml
View file

@ -11,7 +11,7 @@ tabs:
width: 2/3
required: true
background:
label: Background image
label: Image d'arrière-plan
type: files
multiple: false
width: 1/3

3
public/site/templates/design-to-light.json.php
View file

@ -29,7 +29,8 @@ foreach ($page->presentation()->toLayouts() as $layout) {
}
$specificData = [
"presentation" => $presentation
"presentation" => $presentation,
"background" => $page->background()->isNotEmpty() ? getFileData($page->background()->toFile()) : null
];
$pageData = array_merge($genericData, $specificData);

54
src/views/DesignToLight.vue
View file

@ -1,25 +1,48 @@
<template>
<!-- TODO: remplacer style par :style="'--background: url(\'"+page.content.background.url+'\')'" -->
<article id="dtl-page" class="bg-black rounded-xl p-64" style="--background: url('https://plus.unsplash.com/premium_photo-1675355675464-2deabb1f893b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
<header class="flex flex-col justify-center | text-center text-white | flow" style="--flow-space: 2rem">
<article
id="dtl-page"
class="bg-black rounded-xl p-64"
:style="'--background: url(' + background + ')'"
>
<header
class="flex flex-col justify-center | text-center text-white | flow"
style="--flow-space: 2rem"
>
<hgroup class="flow" data-icon="leaf-thin">
<h1 class="text-xl font-serif">{{ page.content.sectiontitle }}</h1>
<p class="intro" v-html="page.content.introduction"></p>
</hgroup>
<div class="ctas | flex" style="--column-gap: 1rem">
<button class="btn btn--white-10" @click="isDialogOpen = true">Optimiser un projet existant</button>
<button class="btn btn--white-10" @click="isDialogOpen = true">
Optimiser un projet existant
</button>
<button class="btn btn--white">Créer un nouveau projet avec DTL</button>
</div>
</header>
<div class="presentation | mt-64 flow">
<div v-for="row in page.presentation" :key="row.id" class="flex">
<div v-for="column in row.columns" :key="column.id" class="flex-1 | flex flex-col" style="min-width: 16.5rem">
<div v-for="block in column.blocks" :key="block.id" class="card w-full | bg-white-10 text-grey-200">
<img :src="block.content.cover.url" alt="" width="" height="" class="rounded-md" />
<h2 class="font-serif text-lg text-white">
{{ block.content.title }}
</h2>
<div v-html="block.content.text"></div>
<div
v-for="column in row.columns"
:key="column.id"
class="flex-1 | flex flex-col"
style="min-width: 16.5rem"
>
<div
v-for="block in column.blocks"
:key="block.id"
class="card w-full | bg-white-10 text-grey-200"
>
<img
:src="block.content.cover.url"
alt=""
width=""
height=""
class="rounded-md"
/>
<h2 class="font-serif text-lg text-white">
{{ block.content.title }}
</h2>
<div v-html="block.content.text"></div>
</div>
</div>
</div>
@ -35,9 +58,16 @@
import { storeToRefs } from "pinia";
import { usePageStore } from "../stores/page";
import OptimizationRequestDialog from "../components/design-to-light/OptimizationRequestDialog.vue";
import { ref } from "vue";
import { computed, ref } from "vue";
const { page } = storeToRefs(usePageStore());
const isOptimizationDialogOpen = ref(false);
const background = computed(() => {
return (
page.value.background ??
"https://plus.unsplash.com/premium_photo-1675355675464-2deabb1f893b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
);
});
</script>