<div class="horizontal-timeline">
<div class="horizontal-timeline__bg" style="background-image: url(/img/placeimg_1000_650_people.jpg)"></div>
<h2>What to expect when you apply...</h2>
<div class="timeline-slider">
<div class="timeline-slider__carousel">
<div class="slide">
<div class="timeline-pod ">
<div class="timeline-pod__title">
<div class="title">2015</div>
</div>
<div class="progress-bar"></div>
<div class="active-dot"><span></span></div>
<div class="timeline-pod__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="slide">
<div class="timeline-pod ">
<div class="timeline-pod__title">
<div class="title">2016</div>
</div>
<div class="progress-bar"></div>
<div class="active-dot"><span></span></div>
<div class="timeline-pod__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
<div class="slide">
<div class="timeline-pod ">
<div class="timeline-pod__title">
<div class="title">2017</div>
</div>
<div class="progress-bar"></div>
<div class="active-dot"><span></span></div>
<div class="timeline-pod__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<br>
<a href="#modal-timeline-3" data-modal-open class="timeline-pod__read-more cta cta--link">
<span class="cta__label">Read more
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
</svg>
</span>
</a>
<div id="modal-timeline-3" class="modal-hider timeline-pod__popup">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ed do eiusmod tempor incididunt.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="timeline-pod ">
<div class="timeline-pod__title">
<div class="title">2018</div>
</div>
<div class="progress-bar"></div>
<div class="active-dot"><span></span></div>
<div class="timeline-pod__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, do eiusmod tempor magna aliqua.</p>
</div>
</div>
</div>
<div class="slide">
<div class="timeline-pod ">
<div class="timeline-pod__title">
<div class="title">2019</div>
</div>
<div class="progress-bar"></div>
<div class="active-dot"><span></span></div>
<div class="timeline-pod__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
</div>
/* @timeline */
.timeline {}
<?php
$timelineContent = array (
'key' => 'timelinefield',
'label' => 'Timeline',
'name' => 'timeline',
'type' => 'group',
'sub_fields' => array (
array (
'key' => 'timeline_block__title',
'label' => 'Title',
'name' => 'title', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'text',
),
array (
'key' => 'timeline_block_label',
'label' => 'Section Label',
'name' => 'blocklabel',
'type' => 'text',
'instructions' => __('This label appears in in-page navigation and within the content of some blocks, overriding the title.', 'ipsen-master'),
),
array(
'key' => 'timeline_block__image',
'label' => 'Background Image',
'name' => 'backgroundImage',
'type' => 'image',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'return_format' => 'url',
'preview_size' => 'large',
'library' => 'all',
'min_width' => 1000,
'min_height' => '',
'min_size' => '',
'max_width' => 4000,
'max_height' => '',
'max_size' => '',
'mime_types' => '',
),
array(
'key' => 'timeline_block__slides',
'label' => 'Slides',
'name' => 'slides',
'type' => 'repeater',
'instructions' => '',
'required' => 1,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'collapsed' => 'timeline_block__slidedate',
'min' => 3,
'max' => 0,
'layout' => 'row',
'button_label' => 'Add Slide',
'sub_fields' => array(
array(
'key' => 'timeline_block__slidedate',
'label' => 'Title',
'name' => 'title',
'type' => 'text',
'instructions' => '',
'required' => 1,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'maxlength' => '',
),
array(
'key' => 'timeline_block__slidecontent',
'label' => 'Content',
'name' => 'content',
'type' => 'textarea',
'instructions' => 'This has a maximum character count of 150.',
'required' => 1,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'maxlength' => '150',
'rows' => '',
'new_lines' => '',
),
array(
'key' => 'timeline_block__slideorientation',
'label' => 'Orientation',
'name' => 'orientation',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => 'Title on the bottom',
'ui_off_text' => 'Title on top',
),
),
),
),
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
);
array_push($_SESSION["blocks"], $timelineContent);
$expandableTimelineContent = array (
'key' => 'expandable_timelinefield',
'label' => 'Timeline (with modal popups)',
'name' => 'horizontal-timeline',
'type' => 'group',
'sub_fields' => array (
array (
'key' => 'expandable_timeline_block__title',
'label' => 'Title',
'name' => 'title', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'text',
),
array(
'key' => 'expandable_timeline_block__image',
'label' => 'Background Image',
'name' => 'backgroundImage',
'type' => 'image',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'return_format' => 'url',
'preview_size' => 'large',
'library' => 'all',
'min_width' => 1000,
'min_height' => '',
'min_size' => '',
'max_width' => 4000,
'max_height' => '',
'max_size' => '',
'mime_types' => '',
),
array(
'key' => 'expandable_timeline_block__slides',
'label' => 'Slides',
'name' => 'slides',
'type' => 'repeater',
'instructions' => '',
'required' => 1,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'collapsed' => 'timeline_block__slidedate',
'min' => 3,
'max' => 0,
'layout' => 'row',
'button_label' => 'Add Slide',
'sub_fields' => array(
array(
'key' => 'expandable_timeline_block__slidedate',
'label' => 'Title',
'name' => 'title',
'type' => 'text',
'instructions' => '',
'required' => 1,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'prepend' => '',
'append' => '',
'maxlength' => '',
),
array(
'key' => 'expandable_timeline_block__slidecontent',
'label' => 'Content',
'name' => 'content',
'type' => 'textarea',
'instructions' => 'Maximum character count of 90.',
'required' => 1,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'placeholder' => '',
'maxlength' => '90',
'rows' => '',
'new_lines' => '',
),
array(
'key' => 'expandable_timeline_block__slidereadmore',
'label' => 'Read More',
'instructions' => __('Content entered here will be available to the user in a modal window.', 'ipsen-master'),
'name' => 'read_more',
'type' => 'wysiwyg',
'tabs' => 'visual',
'required' => 0,
),
array(
'key' => 'expandable_timeline_block__slideorientation',
'label' => 'Orientation',
'name' => 'orientation',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => 'Title on the bottom',
'ui_off_text' => 'Title on top',
),
),
),
),
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
);
array_push($_SESSION["blocks"], $expandableTimelineContent);