your personal website on atproto - mirror blento.app
26
fork

Configure Feed

Select the types of activity you want to include in your feed.

Merge pull request #282 from flo-bit/feat/show-images-in-bigger

show images in bigger

authored by

Florian and committed by
GitHub
9b4c79be ef928d8b

+50 -15
+28 -9
src/lib/cards/core/ImageCard/ImageCard.svelte
··· 3 3 import type { ContentComponentProps } from '../../types'; 4 4 import { qrOverlay } from '$lib/components/qr/qrOverlay.svelte'; 5 5 import { getImage } from '$lib/helper'; 6 + import { openImageViewer } from '$lib/components/image-viewer/imageViewer.svelte'; 6 7 7 8 let { item = $bindable(), isEditing }: ContentComponentProps = $props(); 8 9 9 10 const did = getDidContext(); 11 + 12 + let src = $derived(getImage(item.cardData, did, 'image')); 13 + let clickable = $derived(!item.cardData.href && !isEditing && !!src); 10 14 </script> 11 15 12 - {#key getImage(item.cardData, did, 'image')} 13 - <img 14 - class={[ 15 - 'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out', 16 - item.cardData.href ? 'group-hover/card:scale-101' : '' 17 - ]} 18 - src={getImage(item.cardData, did, 'image')} 19 - alt="" 20 - /> 16 + {#key src} 17 + {#if clickable} 18 + <button 19 + type="button" 20 + class="absolute inset-0 h-full w-full cursor-zoom-in" 21 + onclick={() => src && openImageViewer(src)} 22 + aria-label="View image fullscreen" 23 + > 24 + <img 25 + class="absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out group-hover/card:scale-101" 26 + {src} 27 + alt="" 28 + /> 29 + </button> 30 + {:else} 31 + <img 32 + class={[ 33 + 'absolute inset-0 h-full w-full object-cover opacity-100 transition-transform duration-300 ease-in-out', 34 + item.cardData.href ? 'group-hover/card:scale-101' : '' 35 + ]} 36 + {src} 37 + alt="" 38 + /> 39 + {/if} 21 40 {/key} 22 41 {#if item.cardData.href && !isEditing} 23 42 <a
+22 -6
src/lib/cards/media/SecretImageCard/SecretImageCard.svelte
··· 6 6 import type { ContentComponentProps } from '../../types'; 7 7 import Modal from '$lib/components/modal/Modal.svelte'; 8 8 import { Button, Input, Subheading } from '@foxui/core'; 9 + import { openImageViewer } from '$lib/components/image-viewer/imageViewer.svelte'; 9 10 10 - let { item = $bindable() }: ContentComponentProps = $props(); 11 + let { item = $bindable(), isEditing }: ContentComponentProps = $props(); 11 12 12 13 const did = getDidContext(); 13 14 ··· 81 82 {/if} 82 83 83 84 {#if decryptedUrl} 84 - <img 85 - class="animate-in fade-in absolute inset-0 h-full w-full object-cover duration-500" 86 - src={decryptedUrl} 87 - alt="" 88 - /> 85 + {#if isEditing} 86 + <img 87 + class="animate-in fade-in absolute inset-0 h-full w-full object-cover duration-500" 88 + src={decryptedUrl} 89 + alt="" 90 + /> 91 + {:else} 92 + <button 93 + type="button" 94 + class="absolute inset-0 h-full w-full cursor-zoom-in" 95 + onclick={() => decryptedUrl && openImageViewer(decryptedUrl)} 96 + aria-label="View image fullscreen" 97 + > 98 + <img 99 + class="animate-in fade-in absolute inset-0 h-full w-full object-cover duration-500" 100 + src={decryptedUrl} 101 + alt="" 102 + /> 103 + </button> 104 + {/if} 89 105 {/if} 90 106 91 107 {#if !decryptedUrl}