generated from cms/tibi-docs
56 lines
1.5 KiB
Svelte
56 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { apiBaseURL } from "../../../config"
|
|
import { mediaLibrary } from "../../store"
|
|
export let image: string
|
|
export let pageId: string
|
|
export let col: { contentType: "image"; image: string; icons: { icon: string; link: string }[] }
|
|
</script>
|
|
|
|
<div class="image-container">
|
|
<img
|
|
src="{`${apiBaseURL}medialib/${image}/${$mediaLibrary[image]?.file?.src}`}"
|
|
alt="{$mediaLibrary[image]?.alt || ''}"
|
|
title="{$mediaLibrary[image]?.title || ''}"
|
|
/>
|
|
</div>
|
|
{#if col && col.icons}
|
|
<div class="icons">
|
|
{#each col.icons as icon}
|
|
<div class="icon">
|
|
<a href="{icon.link}" style="text-decoration: none;" target="_blank">
|
|
<img
|
|
src="{`${apiBaseURL}medialib/${icon.icon}/${$mediaLibrary[icon.icon]?.file?.src}`}"
|
|
alt="{$mediaLibrary[icon.icon]?.alt || ''}"
|
|
title="{$mediaLibrary[icon.icon]?.title || ''}"
|
|
/>
|
|
</a>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="less">
|
|
.image-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
object-fit: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.icons {
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
gap: 20px;
|
|
img {
|
|
width: 48px;
|
|
}
|
|
}
|
|
</style>
|