Please watch the videos under Resources before class.
Please have a look at the Featured Image example of the Flowbite Library and copy its code into a new LiveView that we route under /gallery:
We are interested in making this static gallery work.
Image Resizing (1 point)
Start by adding at least 3 images in both a small format (such as 150 px in width) and a large format (1280 px in width) to your /priv/static/images folder. I recommend the following stucture:
/priv/static/images/gallery/1.jpg
/priv/static/images/gallery/1_thumbnail.jpg
...
If you don't have access to Adobe Photoshop use a lab computer or an alternative program. There are tons of free software including websites that allow you to resize images.
Image Gallery Functionality (2 points)
Next your objective is to switch the image in the large preview window when we click a thumbnail. I do recommend wrapping the thumbnails in buttons and handle via phx-click event:
<button type="button" phx-click="select-image" phx-value-id={1}>
<img ... />
</button>
Your points are earned when the featured image correctly switches to a large image version of the one featured in the thumbnail.
Image Gallery Animation (1 point)
We have learned about animations. Create any stylish, but not distracting effect when hovering a thumbnail. Dealer's choice but if you struggle with creativity you could simply enlarge the thumbnail and perhaps "grow" a border.
Image Gallery Animation 2 (1 point)
We also like to have an animation when the featured image is replaced in it's frame. We could blend out the old one to blend in the new one or we could let an image fly out to the left while the new image flies in to the right. Pick an option and make it work!
SVG Logo (2 points)
To practice creating SVG Images your final objective is to create a "logo" that is to be displayed in the navbar. You might want some short text, ellipses, squares, lines. Its okay it ends up looking crappy, we can replace it later again for the final project.
Take inspiration from the large Flowbite Icon library to see how other icons were drawn. You might want to let AI explain you how paths work.
Drop your svg image in either core_components.ex or into icons.ex (in case you created your own icon library as suggested sometime in the past).
May creativity be with you, young padawans!