Homepage images

[sebastiandedeyne]

Dynamically render the images on the homepage. The following markup is required:

@component('components.gallery')
    <ul class="md:flex">
        <li class="flex-1 mb-4 md:mb-0 px-2">
            <img class="border-white border-8 rounded-sm shadow-md cursor-zoom-in" src="{{ url('images/meetups/meetup-dummy-1.jpg') }}"
                data-gallery-item data-src="/images/meetups/meetup-dummy-1.jpg" data-w="1024" data-h="768">
        </li>
        <li class="flex-1 mb-4 md:mb-0 px-2">
            <img class="border-white border-8 rounded-sm shadow-md cursor-zoom-in" src="{{ url('images/meetups/meetup-dummy-2.jpg') }}"
                data-gallery-item data-src="/images/meetups/meetup-dummy-2.jpg" data-w="1024" data-h="768">
        </li>
        <li class="flex-1 px-2">
            <img class="border-white border-8 rounded-sm shadow-md cursor-zoom-in" src="{{ url('images/meetups/meetup-dummy-3.jpg') }}"
                data-gallery-item data-src="/images/meetups/meetup-dummy-3.jpg" data-w="2048 " data-h="1536">
        </li>
    </ul>
@endcomponent

• The img src should be contain 644px wide thumbnails
• Every image must have a data-gallery-item attribute
• data-src must contain a link to a large conversion of the image (1200px sounds good)
• data-w and data-h must contain the exact width and height of the large conversion

Feel free to ping back to me once the medialibrary is set up, maybe I can extract all this to a Blade component to simplify things.