sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a second photo gallery with a reversed image order

Browse Source 
Modify the PhotoGalleryWidget to accept a `reverseOrder` prop, and add a second instance of the widget to the home page with this prop enabled.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: b84dab4e-11bc-44f5-a773-3e57620ac431
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 22:11:20 +00:00
parent 65205f55cd
commit b49b7512e4
3 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772316674862.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 233 KiB

5
client/src/components/photo-gallery.tsx
View File

@ -166,10 +166,11 @@ function SingleImageCarousel({
);
}
export function PhotoGalleryWidget() {
const { data: images, isLoading } = useQuery<GalleryImage[]>({
export function PhotoGalleryWidget({ reverseOrder = false }: { reverseOrder?: boolean } = {}) {
const { data: rawImages, isLoading } = useQuery<GalleryImage[]>({
queryKey: ["/api/gallery"],
});
const images = reverseOrder && rawImages ? [...rawImages].reverse() : rawImages;
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

1
client/src/pages/home.tsx
View File

@ -430,6 +430,7 @@ export default function Home() {
{ id: "gallery", el: <PhotoGalleryWidget key="gallery" /> },
{ id: "news", el: <div key="news" className="flex flex-col gap-4"><NewsWidget /></div> },
{ id: "breaking", el: <div key="breaking" className="flex flex-col gap-4"><BreakingNewsWidget /></div> },
{ id: "gallery2", el: <PhotoGalleryWidget key="gallery2" reverseOrder={true} /> },
];
for (let i = w.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));