return $init_array;
});
+
+
+/**
+ * Set paging limits depending on post type (overrides Dashboard > Settings > Reading settings)
+ */
+add_action('pre_get_posts', function ($query) {
+ /** @var \WP_Query $query */
+ // Only target the main query on the frontend
+ if (!is_admin() && $query->is_main_query()) {
+
+ // Normal posts (news) must be limited to 6 per page because that's how many
+ // different decoration styles we have available (see View/Composers/NewsIndex.php)
+ if ($query->get('post_type') === '') {
+ $query->set('posts_per_page', 6);
+ return;
+ }
+
+ // No limit for Réalisation posts
+ if ($query->get('post_type') === 'realisation') {
+ $query->set('posts_per_page', -1);
+ return;
+ }
+ }
+}, 1);
--- /dev/null
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 32.8 32.8" xml:space="preserve" width="36" height="36">
+ <path d="M16.4 32.8C7.4 32.8 0 25.4 0 16.4 0 7.4 7.4 0 16.4 0c9 0 16.4 7.4 16.4 16.4 0 9-7.4 16.4-16.4 16.4zm0-30.8C8.5 2 2 8.5 2 16.4s6.5 14.4 14.4 14.4 14.4-6.5 14.4-14.4S24.3 2 16.4 2z"/>
+ <path d="M18.8 23.4l-7-7 7-7 1.4 1.4-5.5 5.6 5.5 5.5z"/>
+</svg>
+$breakpoint-news-compress = 1200px
+$breakpoint-news-stack = 768px
+
+.news-index
+
+ &-bg // Main beige inset background
+ width: 55%
+ z-index: -1
+
+ +below($breakpoint-news-compress)
+ width: 80%
+ +below($breakpoint-news-stack)
+ width: 100%
+
+ &-decorations
+ +below($breakpoint-news-stack)
+ display: none
+
+ &-post
+ @apply flex items-center
+
+ &:nth-of-type(even)
+ @apply flex-row-reverse
+
+ +below($breakpoint-news-stack)
+ flex-direction: column !important
+
+ &-featured-image
+ width: 25%
+
+ +below($breakpoint-news-stack)
+ width: 90%
+ margin-bottom: 5vw
+
+ &-post-text
+ width: 35%
+
+ +below($breakpoint-news-compress)
+ width: 50%
+ +below($breakpoint-news-stack)
+ width: 90%
+
+
.posts-navigation
+ center(55%)
+
+ +below($breakpoint-news-compress)
+ center(80%)
+ +below($breakpoint-news-stack)
+ max-width: none
+ margin: 0 5vw
+
.nav-links
display: flex
flex-wrap: wrap
transition: background-color 0.25s
white-space: nowrap
+ .nav-previous
+ @apply mr-4
+
&:hover
@apply bg-blue text-white
&:not(:last-child) // Spacing between items
margin-right: 2.5rem
- &.current-cat a:after // Rotate arrow down when current category
- transform: rotate(45deg)
- transform-origin: 75% 75%
+ &.current-cat svg // Rotate arrow down when current category
+ transform: rotate(-90deg)
+ transform-origin: center
a
position: relative
+ white-space: nowrap
// Circle arrow icon (>)
- &:before // Circle ( )
- content: ''
- display: inline-block
- width: 2em
- height: @width
- vertical-align: middle
- margin-right: 0.5em
- border-radius: 50%
- border: 2px solid
-
- &:after // Arrow >
- content: ''
- width: 0.5625em
- height: @width
- border-style: solid
- border-width: 0 2px 2px 0
- transform: rotate(-45deg)
- position: absolute
- left: 0.6em
- top: 0.4em
+ //&:before // Circle ( )
+ // content: ''
+ // display: inline-block
+ // width: 2em
+ // height: @width
+ // vertical-align: middle
+ // margin-right: 0.5em
+ // border-radius: 50%
+ // border: 2px solid
+ //
+ //&:after // Arrow >
+ // content: ''
+ // width: 0.5625em
+ // height: @width
+ // border-style: solid
+ // border-width: 0 2px 2px 0
+ // transform: rotate(-45deg)
+ // position: absolute
+ // left: 0.6em
+ // top: 0.4em
<div class="bg-light absolute inset-0 mx-1v sm:-mx-1v" style="z-index: -1"></div>
{{-- Intro text that is stored in theme's custom options (see Réalisations menu in dashboard) --}}
- <div class="text-center px-2v sm:px-1v mx-auto mb-1v" style="max-width: 1226px">{{ $intro }}</div>
+ <div class="text-center px-2v sm:px-1v mx-auto" style="max-width: 1226px">{{ $intro }}</div>
{{-- Réalisation Categories --}}
- <ul class="realisations-categories font-medium text-center mx-2v sm:mx-1v sm:flex sm:flex-col sm:text-left">
- {!!
- wp_list_categories([
+ <ul id="filters" class="realisations-categories font-medium text-center pt-1v mx-2v sm:mx-1v sm:flex sm:flex-col sm:text-left">
+ @php
+ $categories = wp_list_categories([
'echo' => 0,
'show_option_all' => __('Tout voir'), // See app/filters.php for extra treatment to add current class
'style' => 'list',
'taxonomy' => 'realisation_category',
'title_li' => '',
- ]) !!}
+ ]);
+
+ // Since WordPress makes it so painful to modify the categories list,
+ // we will inject our SVGs into the links using the DOM...
+ // Ref: http://htmlparsing.com/php.html + https://stackoverflow.com/a/20675396
+ $DOM = new DOMDocument;
+ $DOM->loadHTML($categories);
+
+ $links = $DOM->getElementsByTagName('a');
+
+ // Get the SVG code that will be inserted
+ $SVG = get_svg('images/icons/arrow-circle.svg', 'fill-current inline-block transform rotate-180 align-middle mr-2 w-8');
+
+ /** @var DOMElement $link */
+ foreach ($links as $link) {
+
+ // Add an anchor reference to the end of all links so changing pages jumps back down to the filters
+ $link->setAttribute('href', $link->getAttribute('href') . '#filters');
+
+ $SVG_element = $DOM->createDocumentFragment();
+ $SVG_element->appendXML($SVG);
+
+ $link->insertBefore($SVG_element, $link->firstChild);
+ }
+
+ echo utf8_decode($DOM->saveHTML($DOM->documentElement));
+ @endphp
</ul>
<div class="-mt-1v" data-masonry-columns="{{ $masonry }}">
{{-- Applying 1px vertical padding here so margins take effect at top and bottom (can't use overflow:hidden due to background decorations) --}}
<div class="container relative my-2v" style="padding: 1px 0">
- <div class="absolute h-full bg-light left-1/2 transform -translate-x-1/2" style="width: 55%; z-index: -1;">{{-- BG layer --}}</div>
+ <div class="news-index-bg absolute h-full bg-light left-1/2 transform -translate-x-1/2">{{-- BG layer --}}</div>
@if (! have_posts())
<x-alert type="warning">
{!! get_search_form(false) !!}
@endif
- @php
- // Keep a counter of posts so we can style them differently
- $counter = 0;
- @endphp
+ {{-- Keep a counter of posts so we can style them differently --}}
+ @php($counter = 0)
+
@while(have_posts()) @php(the_post())
@php($counter++)
@includeFirst(['partials.content-' . get_post_type(), 'partials.content'], [compact('counter')])
</div>
- <div class="mt-1v mx-2v">
+ <div class="container mt-1v">
{!! get_the_posts_navigation() !!}
</div>
$thumbnail_caption = get_post_meta($postID, '_thumbnail_caption', true);
@endphp
-<article <?php post_class('mt-2v sm:mt-12', $postID) ?>>
- <a href="{{ get_permalink($postID) }}">{!! $thumbnail_image !!}</a>
- <div class="mx-1v px-2 text-center mt-6">{{ $thumbnail_caption }}</div>
+<article <?php post_class('mt-2v sm:mt-12 transition-transform transform hover:scale-105', $postID) ?>>
+ <a class="block" href="{{ get_permalink($postID) }}">
+ {!! $thumbnail_image !!}
+ <div class="mx-1v px-2 text-center mt-6">{{ $thumbnail_caption }}</div>
+ </a>
</article>
</div>
<div class="mt-1v text-center font-medium">
- <a href="../">Retour</a>
+ <a href="../">@svg('images/icons/arrow-circle', 'fill-current inline-block align-middle mr-2') Retour</a>
</div>
{{--
{{-- News Post Item --}}
{{-- This layout gets mirrored using flexbox direction row-reverse for even items --}}
-@php
- $classes = 'flex items-center mt-2v mb-3v';
- if ($counter % 2 == 0) $classes .= ' flex-row-reverse';
-@endphp
-<article @php(post_class($classes))>
+<article @php(post_class('news-index-post mt-2v mb-3v'))>
{{-- Featured Image --}}
- <div class="post-featured-image relative bg-cover mx-2v w-1/4" style="background-image: url({{ get_the_post_thumbnail_url() }})">
- <a class="block pb-100%" href="{{ get_permalink() }}">
+ <div class="news-index-featured-image relative mx-2v">
+ <a class="block bg-cover pb-100% transition-transform transform hover:scale-105"
+ href="{{ get_permalink() }}" style="background-image: url({{ get_the_post_thumbnail_url() }})">
{{-- Link acts as a proportional sizer thanks to the padding --}}
</a>
{{-- Decorations in the background --}}
@isset($decorations[$counter])
- {!! $decorations[$counter] !!}
+ <div class="news-index-decorations">
+ {!! $decorations[$counter] !!}
+ </div>
@endisset
</div>
{{-- Post Title and Excerpt --}}
- <div style="width: 35%">
+ <div class="news-index-post-text">
<h2 class="text-xl"><a href="{{ get_permalink() }}">{!! $title !!}</a></h2>
<div class="mt-6">@php(the_excerpt())</div>
</div>
<div class="latest-news">
@foreach ($news_posts as $post)
- <article @php(post_class(null, $post['ID']))>
+ <article @php(post_class('transition-transform transform hover:scale-105', $post['ID']))>
+ <a class="block" href="{{ get_permalink($post['ID']) }}">
- {{-- Featured Image --}}
- <div class="post-featured-image bg-cover" style="background-image: url({{ get_the_post_thumbnail_url($post['ID']) }})">
- <a class="block pb-100%" href="{{ get_permalink($post['ID']) }}">
- {{-- Link acts as a proportional sizer thanks to the padding --}}
- </a>
- </div>
+ {{-- Featured Image --}}
+ <div class="post-featured-image bg-cover" style="background-image: url({{ get_the_post_thumbnail_url($post['ID']) }})">
+ <div class="pb-100%">{{-- Proportional sizer thanks to the padding --}}</div>
+ </div>
+
+ {{-- Post Title --}}
+ <div class="mt-1v mx-1v px-2 text-center">
+ {!! $post['post_title'] !!}
+ </div>
+ </a>
- {{-- Post Category and Title --}}
- <div class="mt-1v mx-1v px-2 text-center">
- <a href="{{ get_permalink() }}">{!! $post['post_title'] !!}</a>
- </div>
</article>
@endforeach
projects / usines-reunies.git / commitdiff
