Add support for multiple images from Twitter links

- Fetch all images from Twitter syndication API (photos array)
- Store images with unified 'image' media type (first = thumbnail by ID order)
- Display multi-image tweets in grid layout on detail page
- Add hover cycling through images on home grid (2s interval)
- Show image count indicator on multi-image items
- Extract shared downloadAndStoreImages() helper for create/refresh
- Add migration to convert existing thumbnail/gallery types to image
- Make images clickable to open in new tab on detail page
This commit is contained in:
soup 2026-01-17 13:28:20 -05:00
parent e917e67930
commit 007e167707
Signed by: soup
SSH key fingerprint: SHA256:GYxje8eQkJ6HZKzVWDdyOUF1TyDiprruGhE0Ym8qYDY
9 changed files with 625 additions and 403 deletions

View file

@ -599,6 +599,66 @@ input[type="file"] {
color: var(--gray-3);
}
/* Image Gallery (detail page) */
.image-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
}
.image-gallery img {
width: 100%;
height: auto;
display: block;
cursor: pointer;
transition: opacity 0.15s ease;
}
.image-gallery img:hover {
opacity: 0.9;
}
/* Single image when odd count - make last one full width */
.image-gallery img:last-child:nth-child(odd) {
grid-column: span 2;
}
/* Gallery Cycling (home grid) */
.grid-item-images {
position: relative;
width: 100%;
}
.grid-item-images img {
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.4s ease;
}
.grid-item-images img:first-child {
position: relative;
}
.grid-item-images img.active {
opacity: 1;
}
/* Gallery Indicator */
.gallery-indicator {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
pointer-events: none;
}
/* Responsive */
@media (max-width: 1200px) {
.grid {