studio-variable/index-main
4
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

Transform beforeafter block into generic image+text block

Browse source 
- Add toggle (isBeforeAfter) to switch between modes
- Mode simple: single image + text (2 columns layout)
- Mode comparison: before/after slider + text (2 columns layout)
- Remove "1/2, 1/2" layout from report blueprint (keep only "1/1")
- Update Vue component with 2-column grid preview
- Update PHP snippet to handle both modes
- Rename block to "Image avec texte"

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-09 18:20:29 +01:00
parent a765b5d235
commit 6251d8f09f
6 changed files with 244 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

2
site/plugins/beforeafter/index.css
View file

@ -1 +1 @@
.beforeafter-preview[data-v-92ee366b]{cursor:pointer;border-radius:var(--rounded);overflow:hidden;background:var(--color-background)}.beforeafter-preview__images[data-v-92ee366b]{position:relative;width:100%;height:200px;background:var(--color-gray-200)}.beforeafter-preview__image[data-v-92ee366b]{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.beforeafter-preview__image--before[data-v-92ee366b]{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}.beforeafter-preview__divider[data-v-92ee366b]{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #0000004d;transform:translate(-1px)}.beforeafter-preview__caption[data-v-92ee366b]{padding:.75rem;font-size:var(--text-sm);color:var(--color-gray-600);font-style:italic;background:var(--color-background);margin:0}.beforeafter-preview__empty[data-v-92ee366b]{padding:3rem 1rem;text-align:center;color:var(--color-gray-500);font-size:var(--text-sm)}.beforeafter-preview:hover .beforeafter-preview__images[data-v-92ee366b]{opacity:.9}
.imagetext-preview[data-v-caec09ec]{cursor:pointer;border-radius:var(--rounded);overflow:hidden;background:var(--color-background);border:1px solid var(--color-gray-300)}.imagetext-preview__container[data-v-caec09ec]{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem}.imagetext-preview__media[data-v-caec09ec]{display:flex;flex-direction:column;gap:.5rem}.imagetext-preview__slider[data-v-caec09ec]{position:relative;width:100%;height:200px;background:var(--color-gray-200);border-radius:var(--rounded-sm);overflow:hidden}.imagetext-preview__image[data-v-caec09ec]{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.imagetext-preview__image--before[data-v-caec09ec]{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}.imagetext-preview__divider[data-v-caec09ec]{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #0000004d;transform:translate(-1px)}.imagetext-preview__single-image[data-v-caec09ec]{width:100%;height:200px;object-fit:cover;border-radius:var(--rounded-sm);background:var(--color-gray-200)}.imagetext-preview__empty-media[data-v-caec09ec]{width:100%;height:200px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-200);border-radius:var(--rounded-sm);color:var(--color-gray-500);font-size:var(--text-sm)}.imagetext-preview__caption[data-v-caec09ec]{font-size:var(--text-sm);color:var(--color-gray-600);font-style:italic;margin:0;padding:0 .25rem}.imagetext-preview__text[data-v-caec09ec]{font-size:var(--text-sm);color:var(--color-gray-700);line-height:1.5}.imagetext-preview__empty-text[data-v-caec09ec]{color:var(--color-gray-500);font-style:italic}.imagetext-preview[data-v-caec09ec]:hover{border-color:var(--color-gray-400)}