33 lines
911 B
Plaintext
33 lines
911 B
Plaintext
---
|
|
import { getGhostImgPath } from "../utils";
|
|
import type { Settings } from "@matthiesenxyz/astro-ghostcms/api";
|
|
export type Props = {
|
|
image: string;
|
|
alt?: string;
|
|
caption?: string;
|
|
settings: Settings;
|
|
transitionName?: string;
|
|
};
|
|
const { image, alt, caption = "", settings, transitionName } = Astro.props as Props;
|
|
---
|
|
|
|
<figure class="article-image">
|
|
<img
|
|
srcset={`
|
|
${getGhostImgPath(settings.url, image, 300)} 300w,
|
|
${getGhostImgPath(settings.url, image, 600)} 600w,
|
|
${getGhostImgPath(settings.url, image, 1000)} 1000w,
|
|
${getGhostImgPath(settings.url, image, 2000)} 2000w
|
|
`}
|
|
sizes="(min-width: 1400px) 1400px, 92vw"
|
|
src={getGhostImgPath(settings.url, image, 2000)}
|
|
alt={alt}
|
|
transition:name={transitionName}
|
|
/>
|
|
{caption && <figcaption><Fragment set:html={caption}></figcaption>}
|
|
</figure>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|