90 lines
4 KiB
PHP
90 lines
4 KiB
PHP
@extends('fo.layout-frame')
|
|
@section('title', $newsModel->seo_title)
|
|
@section('description', $newsModel->seo_description)
|
|
|
|
@section('content')
|
|
|
|
@include('fo.pages.news.header')
|
|
|
|
<article>
|
|
<!-- Breadcrumb -->
|
|
<div class="container mx-auto max-w-7xl">
|
|
<ul class="px-4 sm:px-8 py-4 md:py-8 text-braun text-small md:text-size-17">
|
|
<li class="inline-block pr-1 after:content-['/'] after:pl-1"><a href="{{ route('home') }}" class="hover:underline">{{ __('models.classes.homes') }}</a></li>
|
|
<li class="inline-block pr-1 after:content-['/'] after:pl-1"><a href="{{ route('news.index') }}" class="hover:underline">{{ __('models.classes.news') }}</a></li>
|
|
<li class="inline-block font-bold font-robotobold">{{ $newsModel->title }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="container mx-auto max-w-7xl px-4 sm:px-8 mt-16 mb-8">
|
|
<h1 class="text-h1-md lg:text-h1-lg xl:text-h1 font-scarletwood text-braun mb-6">
|
|
{{ $newsModel->title }}
|
|
<span class="block text-h2-md lg:text-h2-lg xl:text-h2">{{
|
|
$newsModel->subtitle
|
|
}}</span>
|
|
</h1>
|
|
</div>
|
|
|
|
@php $pictureList = $newsModel->picture_list; @endphp
|
|
@php $hasOnePicture = $pictureList->count() === 1; @endphp
|
|
@php $hasTwoPictures = $pictureList->count() === 2; @endphp
|
|
@php $hasMorePictures = $pictureList->count() > 2; @endphp
|
|
|
|
<div class="w-full bg-hellgruen text-weiss py-16 mb-24">
|
|
<div class="container max-w-7xl mx-auto px-4 sm:px-8">
|
|
<div class="w-full mb-12 ck-content scarlet-titles">
|
|
@if($hasOnePicture)
|
|
@php $picture = collect($pictureList)->first(); @endphp
|
|
<img class="m-3 float-right" src="{{ asset(resize($picture->value, 'foNewsShowPicture')) }}" alt="{{ $picture->alt }}" title="{{ $picture->title }}">
|
|
@endif
|
|
{!! clean($newsModel->content) !!}
|
|
</div>
|
|
@if($hasTwoPictures)
|
|
<div class="w-full flex flex-col sm:flex-row gap-2 mt-12">
|
|
<div class="flex flex-wrap basis-full sm:basis-1/2">
|
|
<img class="" src="{{ asset(resize($pictureList->get(0)->value, 'foNewsShowPicture')) }}" alt="{{ $pictureList->get(0)->alt }}" title="{{ $pictureList->get(0)->title }}">
|
|
</div>
|
|
<div class="flex flex-wrap basis-full sm:basis-1/2">
|
|
<img class="" src="{{ asset(resize($pictureList->get(1)->value, 'foNewsShowPicture')) }}" alt="{{ $pictureList->get(1)->alt }}" title="{{ $pictureList->get(1)->title }}">
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@if($hasMorePictures)
|
|
<section class="splide">
|
|
<div class="splide__track">
|
|
<ul class="splide__list">
|
|
@foreach ($pictureList as $picture)
|
|
<li class="splide__slide">
|
|
<img class="object-contain p-10" src="{{ asset(resize($picture->value, 'foNewsShowPicture')) }}" alt="{{ $picture->alt }}" title="{{ $picture->title }}">
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
@push('scripts')
|
|
<script nonce="{{ $nonce }}">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
new Splide('.splide', {
|
|
type: 'loop',
|
|
perPage: 2,
|
|
autoplay: 'play',
|
|
pagination: false,
|
|
pauseOnHover: true,
|
|
autoWidth: false,
|
|
breakpoints: {
|
|
640: {
|
|
perPage: 1
|
|
}
|
|
}
|
|
}).mount();
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
@include('fo.pages.news.aside-news', ['relatedNewsList' => $relatedNewsList])
|
|
|
|
@endsection
|