bikelogic/front-page.php at main · codeccoop/bikelogic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<?php

/**
 * Fornt-page Bikelogic
 *
 * This is the template for the front-page for the Bikelogic project
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package bikelogic
 */
if (!wp_script_is('slick-js')) {
    wp_enqueue_script('slick-js');
}

if (!wp_script_is('slick-css')) {
    wp_enqueue_style('slick-css');
}
get_header();
$page_ID = get_option('page_on_front');
?>

<main class="front-page">
    <section id="cover" class="front-page__section">
        <a class="top-anchor"></a>
        <?php
        $lng = pll_current_language();
        $carrousel_1_id = get_theme_mod('carrousel_1_' . $lng);
        $carrousel_2_id = get_theme_mod('carrousel_2_' . $lng);
        $carrousel_3_id = get_theme_mod('carrousel_3_' . $lng);
        if ($lng !== 'ca' && $carrousel_1_id == null) $carrousel_1_id = get_theme_mod('carrousel_1_ca');
        if ($lng !== 'ca' && $carrousel_2_id == null) $carrousel_2_id = get_theme_mod('carrousel_2_ca');
        if ($lng !== 'ca' && $carrousel_3_id == null) $carrousel_3_id = get_theme_mod('carrousel_3_ca');
        if ($carrousel_1_id != null && ($carrousel_2_id != null || $carrousel_3_id != null)) : ?>
            <div class="carrousel-container">
                <div class="carrousel-content">
                    <?php $carrousel_1_url = wp_get_attachment_image_src($carrousel_1_id, 'full', false); ?>
                    <div><img class="carrousel-image" src="<?php echo $carrousel_1_url[0]; ?>" alt="Imatge del carrousel"></div>
                    <?php if ($carrousel_2_id) : $carrousel_2_url = wp_get_attachment_image_src($carrousel_2_id, 'full', false); ?>
                        <div><img class="carrousel-image" src="<?php echo $carrousel_2_url[0]; ?>" alt="Imatge del carrousel"></div>
                    <?php endif;
                    if ($carrousel_3_id) : $carrousel_3_url = wp_get_attachment_image_src($carrousel_3_id, 'full', false); ?>
                        <div><img class="carrousel-image" src="<?php echo $carrousel_3_url[0]; ?>" alt="Imatge del carrousel"></div>
                    <?php endif; ?>
                </div>
            </div>
        <?php else : ?>
            <img class="front-page__cover-image" src="<?= get_bloginfo('template_url'); ?>/assets/images/home-image.jpg" alt="Portada de la pàgina de bikelogic">
        <?php endif;
        $site_description = get_bloginfo('description', 'display');
        $site_name = get_bloginfo('name');
        if (display_header_text() && (is_home() || is_front_page())) : ?>
            <h1 class="front-page__site-title">
                <?php
                $brand_image_id = get_theme_mod('front_page_logo');
                if ($brand_image_id) {
                    $brand_image_url = wp_get_attachment_image_src($brand_image_id, 'full', false)[0];
                ?>
                    <img src="<?= $brand_image_url; ?>" />
                <?php } else {
                    //   $brand_image_url = get_bloginfo('template_url') . '/assets/images/bikelogic-brand--white.png'; -->
                    //   <img src="" />
                }
                ?>

                <?= $site_description; ?>
            </h1>
        <?php endif; ?>
    </section>
    <a name="services-anchor" class="top-anchored"></a>
    <section id="services" class="front-page__section">
        <a class="top-anchor"></a>
        <?php
        $args = array(
            'post_type' => 'servei',
            'posts_per_page' => -1,
            'orderby' => 'menu_order',
            'order' => 'asc'
        );
        $query = new WP_Query($args);
        if ($query->have_posts()) : ?>
            <div class="front-page__services-container">
                <?php
                while ($query->have_posts()) :
                    $query->the_post();
                    $post_id = get_the_ID();
                    $post_url = get_post_permalink($post_id); ?>
                    <div class="front-page__service">
                        <a href="<?php echo $post_url ?>">
                            <div class="front-page__service-content">
                                <div class="service-info left">
                                    <?php if (has_post_thumbnail($post_id)) :
                                        the_post_thumbnail('post-thumbnails', array('class' => 'thumbnail'));
                                    else : ?>
                                        <img class="thumbnail" src="<?php bloginfo('template_url'); ?>/assets/images/<?php echo get_the_title(); ?>.png" alt="Icona del servei <?php echo get_the_title() ?>">
                                    <?php endif ?>
                                </div>
                                <div class="service-info right">
                                    <h3><?php echo get_the_title(); ?></h3>
                                    <p><?php echo get_the_excerpt(); ?></p>
                                    <button class="service-button">Més informació></button>
                                </div>

                            </div>
                        </a>
                    </div>
                <?php endwhile; ?>
            </div>

        <?php endif; ?>

    </section>
    <a class="top-anchored" name="intersection-anchor"></a>
    <section id="intersection" class="front-page__section">
        <?php $intersection_group = get_field('seccio_intermitja', $page_ID);
        $intersection_text = $intersection_group['text'];
        $intersection_logo = $intersection_group['logo']; ?>
        <div class="intersection__container">
            <div class="intersection__text">
                <?= $intersection_text; ?>
            </div>
            <img class="intersection__image" src="<?= wp_get_attachment_image_src($intersection_logo, 'medium', false)[0]; ?>">
        </div>

    </section>
    <a class="top-anchored" name="project-anchor"></a>
    <section id="project" class="front-page__section parallax-window">
        <div class="front-page__parallax-background">
            <?php
            $image_id = get_field('parallax', $page_ID);
            if ($image_id) :
                $image_data = wp_get_attachment_image_src($image_id, 'full', false); ?>
                <img class="front-page__project-image" src="<?= $image_data[0]; ?>" alt="Imatge del projecte">
            <?php else : ?>
                <img class="front-page__project-image" src="<?php bloginfo('template_url'); ?>/assets/images/parallax-image.jpg" alt="Imatge del projecte per defecte">
            <?php endif ?>
        </div>
        <div class="front-page__parallax-overlay">
            <?php if (get_field('projecte', $page_ID)) : ?>
                <div class="parallax-overlay__text"><?php the_field('projecte', $page_ID); ?></div>
            <?php endif;
            $missioivalors = get_field('missio_i_valors', $page_ID);
            $objectiu_1 = $missioivalors['objectiu_1'];
            $objectiu_2 = $missioivalors['objectiu_2'];
            $objectiu_3 = $missioivalors['objectiu_3'];
            ?>
            <div class="parallax-overlay__items">
                <figure class="parallax-overlay__item">
                    <img src="<?= wp_get_attachment_image_src($objectiu_1['image'], 'medium', false)[0]; ?>">
                    <figcaption><?= $objectiu_1['description'] ?></figcaption>
                </figure>
                <figure class="parallax-overlay__item valor2">
                    <img src="<?= wp_get_attachment_image_src($objectiu_2['image'], 'medium', false)[0]; ?>">
                    <figcaption><?php echo $objectiu_2['description'] ?></figcaption>
                </figure>
                <figure class="parallax-overlay__item valor3">
                    <img src="<?= wp_get_attachment_image_src($objectiu_3['image'], 'medium', false)[0]; ?>">
                    <figcaption><?php echo $objectiu_3['description'] ?></figcaption>
                </figure>
            </div>
            <button><a href="<?= get_page_link(get_page_by_title('Som Bikelogic')->ID); ?>"><?php pll_e('Coneix-nos'); ?></a></button>
        </div>
    </section>
</main>
<?php get_footer(); ?>