);
$this->add_control(
- 'title',
+ 'content_image',
[
- 'label' => __( 'Title', 'elementor' ),
- 'type' => Controls_Manager::TEXTAREA,
- 'placeholder' => __( 'Enter your title', 'elementor' ),
- 'default' => '',
+ 'label' => __( 'Content Image', 'cube' ),
+ 'type' => Controls_Manager::MEDIA,
+ 'label_block' => true,
+ 'default' => [
+ 'url' => Utils::get_placeholder_image_src(),
+ ],
]
);
$this->add_control(
- 'subtitle',
+ 'images_desktop',
[
- 'label' => __( 'Subtitle', 'cube' ),
- 'type' => Controls_Manager::TEXTAREA,
- 'placeholder' => __( 'Enter your subtitle', 'cube' ),
- 'default' => '',
+ 'label' => __( 'Desktop Images (1920px × 912px)', 'cube' ),
+ 'type' => Controls_Manager::GALLERY,
+ 'default' => [],
+ 'show_label' => true,
]
);
$this->add_control(
- 'images',
+ 'images_mobile',
[
- 'label' => __( 'Slideshow Images', 'cube' ),
- 'type' => Controls_Manager::REPEATER,
- 'fields' => [
- [
- 'name' => 'desktop',
- 'label' => __('Desktop image (1920px × 912px)', 'cube'),
- 'label_block' => true,
- 'type' => Controls_Manager::MEDIA,
- 'default' => [
- 'url' => Utils::get_placeholder_image_src(),
- ],
- ],
- [
- 'name' => 'mobile',
- 'label' => __('Mobile image (portrait orientation)', 'cube'),
- 'label_block' => true,
- 'type' => Controls_Manager::MEDIA,
- 'default' => [
- 'url' => Utils::get_placeholder_image_src(),
- ],
- ],
- ],
- 'title_field' => '<img src="{{{ desktop.url }}}">',
+ 'label' => __( 'Mobile Images (portrait orientation)', 'cube' ),
+ 'type' => Controls_Manager::GALLERY,
+ 'default' => [],
+ 'show_label' => true,
]
);
-
$this->end_controls_section();
}
protected function render() {
$id = 'header_slideshow_' . $this->get_id();
- $title = $this->get_settings('title');
- $subtitle = $this->get_settings('subtitle');
- $images = $this->get_settings('images');
+ $content_image = $this->get_settings('content_image');
+ $images_desktop = $this->get_settings('images_desktop');
+ $images_mobile = $this->get_settings('images_mobile');
- if (!$images || count($images) < 1) return false; // Must have images to display
+ if (!$images_desktop || count($images_desktop) < 1) return false; // Must have images to display
// Use first image in gallery to set size of slideshow
- $image_meta = wp_get_attachment_metadata($images[0]['id']);
+ $image_meta = wp_get_attachment_metadata($images_desktop[0]['id']);
$image_ratio = round($image_meta['height'] / $image_meta['width'] * 100, 2) . '%';
// When this element is present, add a class to the body so the header can be styled differently (transparent background)
<div class="header-slideshow elementor" id="<?= $id ?>">
- <?php foreach($images as $index => $image): ?>
+ <?php foreach($images_desktop as $index => $desktop_image): ?>
<div class="header-slideshow-image<?= $index === 0 ? ' showing' : '' ?>">
- <?php if ($image['mobile']['id'] > 0): ?>
- <div class="header-slideshow-image-mobile" style="background-image:url(<?= wp_get_attachment_image_url($image['mobile']['id'], 'full') ?>);"></div>
- <?php endif; ?>
+ <?php if (isset($images_mobile[$index]['id'])): ?>
+ <div class="header-slideshow-image-mobile"
+ style="background-image:url(<?= wp_get_attachment_image_url($images_mobile[$index]['id'], 'full') ?>);">
+ </div>
+ <?php endif; ?>
- <?php if ($image['desktop']['id'] > 0): ?>
- <div class="header-slideshow-image-desktop" style="background-image:url(<?= wp_get_attachment_image_url($image['desktop']['id'], 'full') ?>);"></div>
- <?php endif; ?>
+ <div class="header-slideshow-image-desktop"
+ style="background-image:url(<?= wp_get_attachment_image_url($desktop_image['id'], 'full') ?>);">
+ </div>
</div>
<?php endforeach; ?>
*/
?>
- <div class="header-slideshow-content mx-2v elementor-element elementor-invisible" data-settings='{"animation":"fadeInRight","animation_delay":0}' data-element_type="section">
- <h1 class="header-slideshow-title">
- <span class="header-slideshow-title-text"><?= nl2br($title) ?></span>
- <span class="header-slideshow-subtitle"><?= $subtitle ?></span>
- </h1>
- </div>
+ <?php if (isset($content_image['id']) && $content_image['id'] > 0): ?>
+
+ <img src="<?= wp_get_attachment_image_url($content_image['id']) ?>"
+ class="header-slideshow-content elementor-element elementor-invisible"
+ data-settings='{"animation":"fadeInRight","animation_delay":0}'
+ data-element_type="section"
+ alt="<?= __('Bienvenue au CCV Montpellier - centre de chirurgie vertébrale de Montpellier') ?>">
+ <?php endif; ?>
</div>
</div>
if ($post && isset($post[0]['post_title'])) {
- echo '<div class="bg-purple-dark text-white px-2v py-4 flex items-center justify-between sm:flex-col sm:items-start">';
+ echo '<div class="bg-purple-dark text-white px-2v py-4 flex items-center justify-between sm:flex-col sm:items-start sm:py-6">';
echo '<a href="'. get_permalink($post[0]['ID']) .'" class="pr-4 sm:pr-0 sm:mb-4">'. $post[0]['post_title'] .'</a>';
echo '<a href="'. get_permalink(get_option('page_for_posts')) .'" class="btn whitespace-no-wrap flex-shrink-0">'. __("Voir toute l'actualité", 'cube') .'</a>';
echo '</div>';
* Add "… Continued" to the excerpt
*/
add_filter('excerpt_more', function () {
- return ' … <a href="' . get_permalink() . '">' . __('Continued', 'sage') . '</a>';
+ return '…';
});
initSlideshow();
- // Todo: handle resizing here for small screens - scale content (origin: bottom left) so it always fits...
- // Todo: when scaling, set content div to 100% and title element to display inline-block to keep correct appearance.
-
-
function initSlideshow() {
let slideshowDots = document.createElement('ul');
slideshowDots.className = 'header-slideshow-dots';
clearInterval(slideInterval); // Stop autoplay
showSlide($(this).data('slide'));
});
-
- // Handle resizing when window resizes
- $(window).on('resize', debounce(resizeSlideshow, 100));
- resizeSlideshow();
- }
-
- function resizeSlideshow() {
- const content = $scope.find('.header-slideshow-content');
- const title = $scope.find('.header-slideshow-title');
- const resizeBreakpoint = 1000; // When to start resizing
- const targetWidth = 650; // The max width of the title block + spacing
- let windowWidth = $(window).width();
-
-
- if (windowWidth > resizeBreakpoint) {
- content.attr('style', '');
- title.attr('style', '');
- } else {
- let scale = Math.min(1, windowWidth / targetWidth);
-
- content.css({
- transform: `scale(${scale})`,
- transformOrigin: 'bottom left',
- width: '100%',
- margin: '0'
- });
- title.css({
- display: 'inline-block'
- })
- }
-
}
-
function showSlide(index) {
$(slides[currentSlide]).removeClass('showing');
$scope.find(`[data-slide="${currentSlide}"]`).removeClass('active');
@tailwind base
@tailwind components
+/*! purgecss start ignore */
+
// Stylus Setup
@import 'common/setup'
@import 'common/mixins'
@import 'widgets/*'
//@import 'pages/*'
+/*! purgecss end ignore */
+
// Utilities go last in source order so they can
// override other classes with the same specificity
@tailwind utilities
@apply border-b-2 border-transparent // Reserve space for active border
@apply py-1 leading-tight // Adjust active border spacing
- &.current-menu-item
+ &.current-menu-item, &.current-menu-parent
@apply border-pink
&:last-child
@apply bg-gray-300 bg-cover bg-center
@apply w-full
constrain(margin-right, 5vw)
+ constrain(margin-bottom, 5vw)
max-width: 336px
&-sizer
+below($breakpoint-columns)
.elementor-column
width: 100% !important
- &:not(:last-of-type)
- margin-bottom: 7.5vw
+ //&:not(:last-of-type)
+ // margin-bottom: 7.5vw
// There's a toggle in the editor so we can disable
// this margin between columns when stacking vertically
// Change to portrait oriented images for small screens
+below($breakpoint-slideshow-images)
- padding-bottom: 148% !important // Based off mockup: 555px / 375px
+ padding-bottom: 140% !important // Based off mockup: 525px / 375px
&-image
position: absolute
z-index: 15
+below($breakpoint-slideshow)
- bottom: 1em
+ bottom: 1.5em
li
@apply bg-purple-dark
&-content
+ width: 50% // Size ratio for intermediate screens
+ max-width: 620px !important
z-index: 10
position: absolute
- constrain(left, 5vw)
- constrain(bottom, 10vw)
+ constrain(bottom, 9.2vw)
+ left: 6.4vw // Not using constrain because this shouldn't be capped on lower limits
- .elementor-editor-active &, .elementor-editor-preview &
- visibility: visible // Animation doesn't trigger in the editor for some reason so just show it
+ +above($content-max-width)
+ left: 126px // From mockup
+below($breakpoint-slideshow)
bottom: 4em
- // ToDo: see how this will work for translations - maybe it's more practical to use an SVG here instead of all this?
- // Note: for the title to have a semi-transparent background,
- // we're limited by the font properties because the inline
- // backgrounds can't overlap so we need to get the line-height
- // and padding just right. Maybe it would be better if it was
- // solid white... More details:
- // https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
- &-title
- .header-slideshow & // Extra specificity needed to override generic headings
- position: relative
- line-height: 1.27
- padding-right: 1.5rem // To match inline text below
- margin-left: 0
+ +below($breakpoint-slideshow-images)
+ width: 75%
- &:before
- top: 40px
- left: -36px
- width: 48px
- height: 5px
-
- // For multi-line padded text effect
- // Ref: https://css-tricks.com/multi-line-padded-text/
- &-text
- font-size: 68px fixed // Don't use REMs because we will scale this later with JS
- box-decoration-break: clone
- white-space: nowrap
- display: inline
- padding: 0 1.5rem
- background-color: $title_bg
-
-
- // Need to position this absolutely so it sits properly
- // right at the bottom but without overlapping...
- // (due to also having a semi-transparent background)
- &-subtitle
- background-color: $title_bg
- position: absolute
- top: 100%
- left: 0
- width: 100%
- font-size: 23px fixed
- letter-spacing: 0.15px
- white-space: nowrap
- padding: 0 1.5rem 0.5em
+ .elementor-editor-active &, .elementor-editor-preview &
+ visibility: visible // Animation doesn't trigger in the editor for some reason so just show it
&:hover
@apply text-pink
+ +below(900px)
+ svg
+ width: 20px
+
&-prev
left: 0.5rem
&-next
-<article @php(post_class('container px-2v pb-2v flex items-start'))>
- <header class="post-featured-image" style="background-image: url({{ get_the_post_thumbnail_url() }})">
+<article @php(post_class('container px-2v pb-2v flex items-start sm:flex-wrap'))>
+ <header class="post-featured-image flex-shrink-0" style="background-image: url({{ get_the_post_thumbnail_url() }})">
<div class="post-featured-image-sizer">{{-- Just here as a proportional sizer thanks to the padding --}}</div>
</header>
</h1>
@php(the_content())
+
+ <p class="mt-6">
+ <a class="uppercase text-pink inline-flex items-center" href="<?= get_post_type_archive_link('post') ?>">
+ @svg('arrow', 'h-3 mr-2 fill-current')
+ <?= __('Retour aux actualités') ?>
+ </a>
+ </p>
</div>
{{--
@php(the_excerpt())
</div>
- <p class="mt-6">
- <a class="uppercase text-pink inline-flex items-center" href="{{ get_permalink() }}">@svg('arrow', 'h-3 mr-2 fill-current') Lire la suite</a>
+ <p class="mt-6 mb-1v">
+ <a class="uppercase text-pink inline-flex items-center" href="{{ get_permalink() }}">
+ @svg('arrow', 'h-3 mr-2 fill-current')
+ <?= __('Lire la suite') ?>
+ </a>
</p>
</header>
// the sm: prefix in Tailwind. Maybe there's a better name for this breakpoint but for now it's 'sm'.
// Sizes should be listed largest to smallest so they are generated in this order, allowing smaller
// breakpoints to take precedence over larger ones (eg. xs:p-1 should override sm:p-2)
- //'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
+ 'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
'sm': {'max': '767px'}, // => @media (max-width: 767px) { ... }
'xs': {'max': '499px'}, // => @media (max-width: 499px) { ... }
},
],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
+ globs: [
+ path.join(__dirname, '../../mu-plugins/cube/**/*.php'), // Some classes (eg. for widgets) might be present only here
+ ],
+
/*
| Add classes, IDs, or selectors that which do not exist in your views or
| scripts. By default, We have whitelisted classes generated by WordPress.
],
whitelistPatterns: [
...whitelistPatterns,
+ /mm.*/, // MMenu
],
});
projects / ccv-wordpress.git / commitdiff