This is an old revision of the document!
Custom Web Components (PROM/RealPEP)
So far, we had to manually rewrite code for each case every single time so it was very inconsistent across pages, some were created much before I had joined, some were created on older versions of dokuwiki, so there is significant inconsistency.
With this new approach, there will be one source for the layout/design that will be reused wherever required with different data. So whenever we change something, it will change automatically throughout the site at once.
However, I have to migrate the most major components (things that are reused and should be the same in all pages) to this new approach, so it will take a little bit of time. However, the component for figures+caption is completed, and if you are happy with one of the options below (left/center/right alignment), I can change all figures to use this.
New components so far:
FigureGrid
For use in PRISTINE 2024
FigureGrid — framed, with hover zoom
Same dataset, wrapped as one framed unit with a per-thumbnail zoom on hover.
Figure — with caption
For use throughout the projects
Caption alignment
Left aligned:
Center aligned:
Right aligned:
Some other examples
Different figure-caption styles
(a) Card
Modern white background, thin border, soft shadow.
(b) Frame
Thin box covering both figure and caption, to provide more separation from other text.