Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?php
/**
* Template part for displaying the 50/50 Module
*
* @link https://www.advancedcustomfields.com/resources/flexible-content/
*
* @package Prana
*/
// settings
$index = $template_args['index'];
$fifty_fifty_size = get_sub_field('5050_size');
$fifty_fifty_size = str_replace(' ','-', $fifty_fifty_size);
$fifty_fifty_size = strtoLower($fifty_fifty_size);
$image_side = get_sub_field('usm_module_setting_image_side');
$bg_color = get_sub_field('usm_module_setting_background_color');
// image
$image = get_sub_field('usm_module_part_image');
$horizontal = get_sub_field('usm_module_setting_horizontal_focus_point');
$vertical = get_sub_field('usm_module_setting_vertical_focus_point');
$image_position = usm_format_image_position($horizontal, $vertical);
$video_url = get_sub_field('5050_video_embed');
// content
$pretitle = get_sub_field('usm_module_part_pretitle');
$title = get_sub_field('usm_module_part_title');
$content = get_sub_field('usm_module_part_content');
$button = get_sub_field('usm_module_part_button');
?>
<div id="<?php echo 'module-' . $index; ?>" class="module module-50-50 <?php echo $fifty_fifty_size; ?> module-setting-image-side-<?php echo $image_side; ?> module-setting-bg-<?php echo $bg_color; ?> <?php echo 'module-' . $index; ?>">
<?php if ($fifty_fifty_size == 'content-width'): ?>
<div class="container">
<?php endif; ?>
<?php if ( $content ) : ?>
<div class="module-part-content">
<div class="module-part-content-wrap">
<?php if ($title) : ?>
<div class="module-part-heading">
<h2 class="module-part-title">
<?php if ($pretitle) : ?>
<small><?php echo $pretitle; ?></small>
<?php endif; ?>
<span data-widowfix><?php echo $title; ?></span>
</h2>
</div>
<?php endif; ?>
<div class="flush">
<?php echo $content; ?>
<?php if ( $button ) : ?>
<a href="<?php echo $button['url']; ?>" target="<?php echo $button['target']; ?>" class="btn-primary"><?php echo $button['title']; ?></a>
<?php endif; ?>
</div>
</div>
</div>
<?php endif ?>
<?php if ( $image ) : ?>
<div class="module-part-image">
<?php // If video URL has a value add the button to play video
if ( $video_url ): ?>
<button class="btn-reset" type="button" data-a11y-dialog-show="modal-5050"><span class="sr-only">Play video</span><svg xmlns="http://www.w3.org/2000/svg" width="94" height="94"><path fill="#FAF9F7" d="M47 0C21.084 0 0 21.084 0 47s21.084 47 47 47 47-21.084 47-47S72.916 0 47 0zm24.326 48.816L37.41 72.723a1.51 1.51 0 0 1-.868.277c-.247 0-.495-.06-.72-.185A1.6 1.6 0 0 1 35 71.406V23.594a1.6 1.6 0 0 1 .822-1.41 1.5 1.5 0 0 1 1.59.093l33.916 23.906c.42.297.672.79.672 1.317 0 .527-.253 1.02-.674 1.316z"/></svg></button>
<?php endif; ?>
<?php echo prana_acf_responsive_image($image, 'full', ['992px' => '50vw'], [
'class' => 'image ' . $image_position
]); ?>
</div>
<?php endif ?>
<?php if ($fifty_fifty_size == 'content-width'): ?>
</div><!-- /.container -->
<?php endif; ?>
</div><!-- /.module-50-50 -->
<?php // if the video URL has a value include the modal to play video
if ( $video_url ): ?>
<!-- Modal -->
<div class="modal modal-move" id="modal-5050" aria-hidden="true">
<div class="modal-backdrop" tabindex="-1" data-a11y-dialog-hide></div>
<div class="modal-dialog" role="dialog" aria-labelledby="modal-5050-title">
<div class="modal-header">
<button type="button" class="btn-reset" data-a11y-dialog-hide aria-label="Close this dialog window">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><path fill="#FFF" fill-rule="evenodd" d="M24.704.565L14.077 11.193 4.541.565a1.934 1.934 0 0 0-2.734 2.733l9.536 10.629L.566 24.7A1.934 1.934 0 0 0 3.3 27.435L13.93 16.81l9.537 10.624a1.93 1.93 0 1 0 2.73-2.734l-9.54-10.624L27.434 3.3a1.93 1.93 0 1 0-2.73-2.733z"/></svg>
</button>
</div>
<div class="modal-content" role="document">
<h1 id="modal-5050-title" class="sr-only">Watch a video</h1>
<div class="embed-container" data-video-embed="<?php echo htmlentities(add_iframe_attrs($video_url)); ?>">
</div>
</div>
</div>
</div>
<?php endif;?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment