oc-social-plugin/components/facebookpagefeed/default.htm

45 lines
2.4 KiB
HTML
Raw Normal View History

2021-10-28 22:35:15 +02:00
<div class="relative -mx-6">
<div class="flex pb-16 pt-8 slides-1 sm_slides-2 lg_slides-3" data-glider-prev="#glider-prev" data-glider-next="#glider-next" data-glider-dots="#glider-dots" data-glider-autostart data-glider-interval="7000" data-glider-lazyload data-glider>
{% for post in __SELF__.posts %}
<div class="px-3">
<a href="{{post.href}}" class="flex flex-col h-full box shadow-lg hover:shadow-2xl rounded-lg overflow-hidden" target="_BLANK">
2021-10-31 01:33:22 +02:00
{% if post.featuredImage %}
<script type="text/html" data-lazy data-src="img">
<img {{ post.featuredImage | resize('box', 'calc(100vw - 1.5rem)|640:calc(50vw - 1.5rem)|1024:calc(33vw - 1.5rem)|1152:360px') }} class="object-cover w-full h-48">
</script>
<div data-dest="img"></div>
{% endif %}
2021-10-28 22:35:15 +02:00
<div class="flex items-end justify-between px-6 py-3 bg-gray-100">
{% if __SELF__.logo %} <img data-src="{{__SELF__.logo|media}}" class="w-8"> {% endif %}
<div class="text-xs text-gray-500">{{post.created_at | human}}</div>
</div>
<div class="flex-grow p-6 pt-0 text-sm text-gray-600 bg-gray-100">
{{post.intro}} …
</div>
<div class="flex px-6 py-3 bg-gray-100 items-center border border-t">
{{'facebook-square'|sprite('w-6 h-6 mr-3 fill-current text-primary-500')}}
<span class="text-sm text-gray-600">Beitrag anschauen</span>
</div>
</a>
</div>
{% endfor %}
</div>
<div class="absolute top-0 left-0 flex items-center h-full ml-3">
<span id="glider-prev" class="flex items-center justify-center w-10 h-10 bg-black-t400">
{{'chevron' | sprite('w-6 h-6 text-white cursor-pointer fill-current')}}
</span>
</div>
<div class="absolute top-0 right-0 flex items-center h-full mr-3">
<span id="glider-next" class="flex items-center justify-center w-10 h-10 bg-black-t400">
{{'chevron' | sprite('w-6 h-6 text-white cursor-pointer fill-current rotate-180 transform')}}
</span>
</div>
</div>
<div class="-mt-10 relative" id="glider-dots"></div>