Open sebastiandedeyne opened 5 years ago
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
img
src
data-gallery-item
data-src
data-w
data-h
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.
Dynamically render the images on the homepage. The following markup is required:
img
src
should be contain 644px wide thumbnailsdata-gallery-item
attributedata-src
must contain a link to a large conversion of the image (1200px sounds good)data-w
anddata-h
must contain the exact width and height of the large conversionFeel 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.