Eindproject: Mijn WordPress website - 4stagiairs

                                    
                                        acf_register_block([
                                            'name' => 'featured-posts-slider',
                                            'title' => __('Uitgelichte post slider'),
                                            'description' => __('Carrousel van uitgelichte post voor stagiairs'),
                                            'render_callback' => __NAMESPACE__ . '\\gutenberg_featured_posts_slider',
                                            'category' => 'g2p',
                                            'icon' => 'slides',
                                            'keywords' => ['artikelen', 'posts', 'uitgelichte', 'slider', 'carrousel'],
                                            'enqueue_assets' => function(){
                                        
                                        if( !is_admin() ) {
                                                wp_enqueue_script('swiper', get_template_directory_uri() . '/static/addons/swiper/swiper-bundle.min.js', '',HEME_VERSION, true);
                                                wp_enqueue_style('swiper', get_template_directory_uri() . '/static/addons/swiper/swiper-bundle.min. css', '', THEME_VERSION, 'all');
                                                wp_enqueue_script('g2p-featured-posts-slider', get_template_directory_uri() .
                                                '/static/js/gutenberg/featured-posts-slider.js', '', THEME_VERSION, true);
                                                wp_enqueue_style('g2p-featured-posts-slider', get_template_directory_uri() .
                                                '/static/css/gutenberg/featured-posts-slider.css', '', THEME_VERSION, 'all');
                                                }
                                            },
                                        ]);
                                    
                                

                                    
                                        function gutenberg_featured_posts_slider( $block, $content = '', $is_preview = false ){
                                        
                                        // underscores (_) are automatically replaced by minus (-)
                                            $template = explode('/', $block['name'])[1];
                                            
                                            $context = Timber::context();
                                            // Store block values.
                                            $context['block'] = $block;
                                            // Store field values.
                                            $context['fields'] = get_fields();
                                            // Store $is_preview value;
                                            $context['is_preview'] = $is_preview;
                                            // get selected posts
                                            $context['posts'] = Timber::get_posts([
                                            'post_type' => 'post',
                                            'orderby' => 'post__in',
                                            'post__in' => $context['fields']['selected_posts'],
                                            'posts_per_page' => -1
                                            ]);
                                            
                                            Timber::render(['gutenberg/' . $template . '.twig'], $context );
                                        }

                                    
                                

                                    
                                    const swiper = new Swiper(".swiper", {
                                        // Optional parameters
                                        direction: "horizontal",
                                        loop: true,
                                        centeredSlides: true,
                                        grabCursor: true,
                                        effect: "coverflow",
                                        coverflowEffect: {
                                        rotate: 0,
                                        stretch: 0,
                                        depth: 100,
                                        modifier: 3,
                                        slideShadows: true
                                        },
                                    
                                        breakpoints: {
                                        576: {
                                        slidesPerView: 1
                                        },
                                        992: {
                                        slidesPerView: 2
                                        },
                                        1440: {
                                        slidesPerView: 2
                                        }
                                    },
                                    
                                        //Use arrow keys to navigate slider
                                        keyboard: {
                                        enabled: true
                                    },
                                    
                                        // If we need pagination
                                        pagination: {
                                        el: ".swiper-pagination",
                                        clickable: true
                                    },
                                    
                                        // Navigation arrows
                                        navigation: {
                                        nextEl: ".swiper-button-next",
                                        prevEl: ".swiper-button-prev"
                                        }
                                    });

                                    
                                

                                    
                                        function gutenberg_team_members( $block, $content = '', $is_preview = false ){
                                        
                                        // underscores (_) are automatically replaced by minus (-)
                                        $template = explode('/', $block['name'])[1];
                                        
                                        $context = Timber::context();
                                        // Store block values.
                                        $context['block'] = $block;
                                        // Store field values.
                                        $context['fields'] = get_fields();
                                        // Store $is_preview value;
                                        $context['is_preview'] = $is_preview;
                                        
                                        // Additional code for displaying all members or team members per expertise
                                        $tax_query = [];
                                        
                                        if ($context['fields']['type'] == 'expertise') {
                                            $tax_query = [
                                            'relation' => 'OR',
                                            [
                                                'taxonomy' => 'expertise',
                                                'field' => 'slug',
                                                'terms' => (!empty($context['fields']['expertise_tax'])) ? $context['fields']['expertise_tax'] : null,
                                            ],
                                            [
                                                'taxonomy' => 'responsibility',
                                                'field' => 'slug',
                                                'terms' => (!empty($context['fields']['responsibility_tax'])) ? $context['fields']['responsibility_tax'] : null,
                                            ],
                                            ];
                                        }
                                        
                                        $member_args = [
                                            'post_type' => 'team',
                                            'posts_per_page' => -1,
                                            'post_status' => 'publish',
                                            'tax_query' => $tax_query,
                                        ];
                                        
                                        $context['team_members'] = new PostQuery($member_args);
                                        
                                        // Render the block.
                                        Timber::render(['gutenberg/' . $template . '.twig'], $context);
                                        
                                        
                                        }
                                    
                                

                                    
                                        @import '../helpers/variables';
                                        @import '../helpers/mixins';
                                        @import '../helpers/functions';
                                        
                                        .block-team-members {
                                            gap: 1.5rem;
                                            color: color(text);
                                            padding: 2.5rem;
                                            
                                            ul {
                                            padding: 0;
                                            row-gap: 3rem;
                                            }
                                        
                                            .member {
                                                height: 100%;
                                                @include border-radius($border-radius-medium);
                                                @include box-shadow($box-shadow);
                                                padding: 0;
                                                position: relative;
                                            
                                                    .member-content {
                                                    padding: 3rem;
                                                    position: relative;
                                                    
                                                    h2 {
                                                    margin: 0;
                                                    font-size: 3rem;
                                                }
                                        
                                                .responsibility-list {
                                                    margin:1.5rem 0 1.5rem 1rem;
                                            
                                                    li {
                                                        list-style: none;
                                                        font-size: 1.7rem;
                                                        position: relative;
                                                        padding-left: 2rem;
                                                
                                                            &::before {
                                                                content: "\2022";
                                                                position: absolute;
                                                                left: 0;
                                                                top: 0;
                                                                font-weight: bold;
                                                                display: inline-block;
                                                                width: 1rem;
                                                                color: color(primary);
                                                                margin: 0 .5rem 0 0;
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                        
                                        
                                        .contact-icon {
                                            position: absolute;
                                            width: 100%;
                                            display: flex;
                                            gap: 1.5rem;
                                            @include transform(translateY(-6rem));
                                            left: 1rem;
                                        
                                        a {
                                            position: relative;
                                            display: block;
                                        
                                            .label-on-hover {
                                                opacity: 0;
                                                background: color(primary);
                                                color: color(background-light);
                                                padding: 2rem 1.5rem;
                                                @include border-radius(0.5rem);
                                                @include box-shadow($box-shadow);
                                                font-size: 1.6rem;
                                                position: absolute;
                                                text-align: center;
                                                top: -8rem;
                                                transition: 0.3s ease-in-out all;
                                            
                                            &::after {
                                                content: "";
                                                background: color(primary);
                                                @include border-radius(50%);
                                                @include transform(translateY(.2rem));
                                                position: absolute;
                                                left: 1.9rem;
                                                width: 1rem;
                                                height: 1rem;
                                            }
                                        }
                                        
                                                &:hover {
                                                    .label-on-hover {
                                                    opacity: 1;
                                                }
                                                    i {
                                                    @include transform(scale(1));
                                                    @include animation(shake 0.2s both alternate infinite ease-in-out);
                                                    transform-origin: center center;
                                                }
                                            }
                                        }
                                    }
                                        
                                        @keyframes shake {
                                        0% {
                                            transform: rotate(-15deg);
                                        }
                                        100% {
                                            transform: scale(1.1) rotate(15deg);
                                        }
                                    }
                                        
                                        //responsive
                                        @include respond-to(from-sm) {
                                        
                                        .label-on-hover {
                                            &::after {
                                            @include transform(translateX(-8rem));
                                            margin-left: -1rem;
                                            position: absolute;
                                            top: 100%;
                                            left: 50%;
                                            }
                                        }
                                    }
    
                                    
                                

                                    
                                        $context = Timber::context();
                                        $context['post'] = Timber::query_post();
                                        $context['fields'] = get_fields($context['post']->ID);
                                        $context['programming_languages_tax'] = get_the_terms($context['post']->ID, 'learnings');
                                        $context['methods_tax'] = get_the_terms($context['post']->ID, 'method');
                                        $context['team_members'] = get_field('selected_team_members');

                                    
                                

                                    

                                        $context = Timber::context();
                                        $context['post'] = Timber::query_post();
                                        $context['fields'] = get_fields();
                                        $context['external_links'] = $context['fields']['external_links'];

                                        $args = [
                                                'post_type' => 'opdracht',
                                                'orderby' => 'name',
                                                'order' => 'ASC',
                                                'posts_per_page' => -1,
                                                'tax_query' => [
                                                [
                                                    'taxonomy' => 'service-line',
                                                    'field' => 'term_id',
                                                    'terms' => (int)$context['fields']['type_serviceline'],
                                                ]
                                            ]
                                        ];


                                        //$context['assignments'] = Timber::get_posts($args);
                                            $context['assignments'] = new PostQuery($args);


                                        foreach ($context['assignments'] as $assignment) {
                                            $learnings_terms = [
                                            'learnings' => [],
                                        ];

                                        foreach ($assignment->terms as $term) {
                                            if ($term->taxonomy === 'learnings') {
                                            $learnings_terms['learnings'][] = $term->name;
                                            }
                                        }

                                        $assignment->terms = $learnings_terms;

                                        }
                                    
                                

                                    
                                        .card {
                                            display: inline-block;
                                            overflow: hidden;
                                            width: 100%;
                                            background: color(background-light);
                                            @include border-radius($border-radius-medium);
                                            @include box-shadow($box-shadow);
                                            position: relative;
                                        
                                            .card-content {
                                                position: absolute;
                                                background: color(background-light);
                                                @include transition($transition);
                                                bottom: 0;
                                                width: 100%;
                                                padding: 1.6rem;
                                            
                                            h2 {
                                                width: 100%;
                                                height: 5.5rem;
                                            }
                                        }
                                        
                                        .thumbnail {
                                            width: 100%;
                                            height: 100%;
                                                
                                            img {
                                                width: 100%;
                                                height: 100%;
                                                object-fit: cover;
                                                @include transition(all 0.5s ease-in-out);
                                            }
                                        }
                                    }