Boxes with modal WND
A0020
Code With ACF Integration
HTML
<!-- A0020 Start ----------------------------------->
<?php if (have_rows('a0020')) : ?>
<?php while (have_rows('a0020')) : the_row(); ?>
<section id="wa_bc10">
<div class="container bc10">
<div class="row">
<div class="col-12">
<h1><?php echo get_sub_field('header_1'); ?></h1>
</div>
<?php if (have_rows('images')) : ?>
<?php while (have_rows('images')) : the_row(); ?>
<div class="col-12 col-md-4 col-lg-3 mt-4">
<a class="" data-toggle="modal" data-target="#wamod<?php echo get_row_index(); ?>">
<div class="wa_bc10box">
<div class="wa_bc10_tb" onmouseover="hoverElement(this)"
onmouseleave="leaveElement(this)">
<img src="<?php echo get_sub_field('image'); ?>" class="wa_bc10_imgs">
<div class="wa_bc10_text">
Model: <?php echo get_sub_field('text_top'); ?></div>
<div><img src="<?php echo get_template_directory_uri() . "/img/svg/Vector.svg"; ?>" class="resizer-img"></div>
<button class="wa_bc10_btn">VIEW MODEL</button>
</div>
</div>
</a>
</div>
<div class="modal fade" id="wamod<?php echo get_row_index(); ?>" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div id="wa_bc8_modal" class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="container">
<div class="row">
<div class="col-12">
<h5 class="modal-title">
Model: <?php echo get_sub_field('text_top'); ?></h5>
</div>
</div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body wa_bc8_modal wa_new_modal">
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<img src="<?php echo get_sub_field('image_before')["url"]; ?>">
</div>
<div class="col-12 col-lg-6">
<img src="<?php echo get_sub_field('image_after')["url"]; ?>">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
</button>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif; ?>
<script>
function hoverElement(elem) {
elem.children[0].style.transition = "all 1s";
elem.children[3].style.transition = "all 1s";
elem.children[0].style.opacity = "0.9";
elem.children[3].style.display = "block";
}
function leaveElement(elem) {
elem.children[0].style.transition = "all 1s";
elem.children[3].style.transition = "all 1s";
elem.children[0].style.opacity = "1";
elem.children[3].style.display = "none";
}
</script>
<!-- A0020 End ----------------------------------->CSS
/* A0020 Start ------------------------ */
#wa_bc10 .bc10 {
text-align: center;
padding-top: 40px;
padding-bottom: 50px;
transition: 1s;
}
#wa_bc10 h1 {
font-weight: 900;
font-family: Playfair Display;
font-size: 48px;
line-height: 56px;
text-align: center;
color: #454545;
padding-bottom: 20px;
}
#wa_bc10 p{
font-size: 1.2em;
font-weight: 600;
color: #7b7b7b;
}
#wa_bc10 .wa_bc10_tb{
bottom: 0;
width: 100%;
color: #FFF;
font-weight: 600;
position: relative !important;
}
#wa_bc10 .wa_bc10_subt{
margin-bottom: 10px;
}
#wa_bc10 .wa_bc10box {
position: relative;
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background: #FCDEDC;
box-sizing: border-box;
box-shadow: 0px 0px 25px rgb(0 0 0 / 15%);
border: 4px solid #E38688;
border-radius: 10px;
}
#wa_bc10 .wa_bc10_text {
font-style: normal;
font-weight: 500;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 20px;
font-family: Playfair Display;
font-size: 22px;
line-height: 28px;
text-align: center;
color: #454545;
padding-top: 0.5rem;
}
#wa_bc10 .wa_bc10_subt {
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
align-items: center;
text-align: center;
color: #000000;
padding-left: 30px;
padding-right: 30px;
}
#wa_bc10 .wa_bc10_subt {
margin-bottom: 10px;
}
.wa_bc10_btn {
position: absolute;
width: 80%;
left: 10%;
top: 35%;
height: 50px;
box-shadow: 0px 0px 15px rgb(0 0 0 / 25%);
font-family: Montserrat;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 22px;
align-items: center;
text-align: center;
z-index: 1000;
border: 0px;
display: none;
color: #454545;
background: #E38688;
border-radius: 5px;
}
#wa_bc10 .wa_bc10box:hover {
box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) !important;
transition: none;
}
.wa_bc10box img{
width: 100%;
}
.wa_new_modal img {
width: auto;
display: block;
margin: auto;
margin-bottom: 30px;
}
.modal-title {
margin-bottom: 0;
font-family: Playfair Display;
font-size: 24px;
line-height: 28px;
text-align: left;
color: #454545;
padding-top: 6px;
}
.close {
float: right;
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
color: #E38688;
text-shadow: 0 1px 0 #fff;
opacity: 1;
}
.close:hover {
color: #E38688;
}
.btn-secondary {
color: #fff;
background-color: #E38688 !important;
}
.resizer-img{
width: 51px !important;
padding-bottom: 20px;
}
@media (min-width: 768px) {
.modal-dialog {
max-width: 740px !important;
}
}
@media (max-width: 1200px) {
#wa_bc10 .wa_bc10_text {
font-size: 16px;
}
}
/* A0020 END ----------------------------*/BC8 - Therapists
Demo
Code With ACF Integration
HTML
<!-- BC8 Start ------------------------------->
<?php if ( have_rows( 'bc8' ) ) : ?>
<?php while ( have_rows( 'bc8' ) ) : the_row();?>
<section id="bc8">
<div class="container">
<div class="row">
<div class="col-12">
<h2><?php echo get_sub_field('title'); ?></h2>
</div>
<?php if ( have_rows( 'therapists' ) ) : ?>
<?php while ( have_rows( 'therapists' ) ) : the_row();?>
<div class="col-6 col-lg-3 mt-4">
<a class="" data-toggle="modal" data-target="#wamod<?php echo get_row_index(); ?>">
<div class="bc8_wr">
<div class="bc8_wr_img">
<img src="<?php echo get_sub_field('image'); ?>" >
</div>
<div class="bc8_wr_trp">
<h3><?php echo get_sub_field('name'); ?></h3>
</div>
</div>
</a>
</div>
<div class="modal fade" id="wamod<?php echo get_row_index(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div id="wa_bc8_modal" class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><?php echo get_sub_field('name'); ?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body wa_bc8_modal">
<img src="<?php echo get_sub_field('image'); ?>" >
<?php echo get_sub_field('biography'); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif; ?>
<!-- BC8 END ------------------------------->CSS
/*-- BC8 Start ------------------------------- */
#bc8{
background-color: #b3b1be;
margin-top: 60px;
padding-top: 20px;
padding-bottom: 20px
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#wa_bc8_modal{
max-width: 550px;
}
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
#wa_bc8_modal{
max-width: 750px;
}
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
#wa_bc8_modal{
max-width: 800px;
}
}
#bc8 h2{
color: #FFF;
text-align: center;
font-size: 3em;
font-weight: 300;
}
#bc8 img{
border-radius: 50%;
width: 200px;
border: solid 2px #d79d83;
}
#bc8 .bc8_wr .bc8_wr_img{
text-align: center;
}
#bc8 .bc8_wr .bc8_wr_trp{
text-align: center;
color: #FFF;
margin-top: 15px;;
}
#bc8 .bc8_wr{
padding: 20px;
}
#bc8 .bc8_wr:hover{
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
background-color: #4f5d9a;
border-radius: 5px;
transition: 0.9s;
margin-top: -10px;
}
#bc8 .wa_bc8_modal img{
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
/*-- BC8 END ------------------------------- */Images are 300px X 300px rectangle. Circle effect is done through CSS styling.
Here is an example of image:
A0047
Code With ACF Integration
HTML
<!-- A0047 Start ------------------------------->
<?php if ( have_rows( 'bc8' ) ) : ?>
<?php while ( have_rows( 'bc8' ) ) : the_row();
$cnt=count(get_field('bc8')['therapists']);
$mod=$cnt%4;
$disperc=$cnt-$mod+1;
$counterBlock=0;
?>
<section id="a0047">
<div class="container">
<div class="row">
<div class="col-12">
<h2><?php echo get_sub_field('title'); ?></h2>
</div>
<?php if ( have_rows( 'therapists' ) ) : ?>
<?php while ( have_rows( 'therapists' ) ) : the_row();?>
<?php
$counterBlock++;
if ($counterBlock==$disperc){
echo '<div class="col-12 col-sm-6 col-md-6 col-lg-3 d-none d-lg-block"></div>';
}
?>
<div class="col-12 col-sm-6 col-md-6 col-lg-3 mt-4">
<div class="a0047_wr">
<div class="a0047_wr_img">
<img src="<?php echo get_sub_field('image'); ?>" >
<a class="a0047-btn" data-toggle="modal" data-target="#wamod<?php echo get_row_index(); ?>">
Info
</a>
</div>
<div class="a0047_wr_trp">
<h3><?php echo get_sub_field('name'); ?></h3>
</div>
</div>
</div>
<div class="modal fade" id="wamod<?php echo get_row_index(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div id="wa_a0047_modal" class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><?php echo get_sub_field('name'); ?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body wa_a0047_modal">
<img src="<?php echo get_sub_field('image'); ?>" >
<?php echo get_sub_field('biography'); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</section>
<?php endwhile; ?>
<?php endif; ?>
<!-- A0047 END ------------------------------->CSS
/*-- A0047 Start ------------------------------- */
#a0047 {
background-color: #F5F5F5;
margin-top: 20px;
padding-top: 50px;
padding-bottom: 80px;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
#wa_a0047_modal{
max-width: 550px;
}
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
#wa_a0047_modal{
max-width: 750px;
}
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
#wa_a0047_modal{
max-width: 800px;
}
}
#a0047 h2 {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 65px;
text-align: center;
color: #454545;
}
#a0047 img {
display: block;
margin: auto;
width: auto;
}
#a0047 .a0047_wr .a0047_wr_img{
text-align: center;
}
#a0047 .a0047_wr .a0047_wr_trp {
margin-top: 15px;
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #454545;
}
#a0047 .a0047_wr {
padding: 20px;
background: #FFFFFF;
border: 1px solid #E57F23;
box-sizing: border-box;
box-shadow: 0px 0px 13px 1px rgb(0 0 0 / 20%);
height: 100%;
}
#a0047 .a0047_wr:hover img{
opacity: 0.5;
}
#a0047 .a0047_wr:hover .a0047_wr_img {
background: #000;
}
#a0047 .wa_a0047_modal img{
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.a0047_wr_img {
position: relative;
}
.a0047-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.87);
border: 1px solid #E57F23;
box-sizing: border-box;
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-size: 23px;
line-height: 25px;
text-align: center;
color: #E57F23 !important;
padding: 10px 20px;
width: 80%;
display: none;
}
#a0047 .a0047_wr:hover .a0047-btn {
display: block;
}
@media (max-width: 992px) {
.a0047-btn {
display: block;
}
.a0047_wr_img img {
width: 100% !important;
}
#a0047 h2 {
font-size: 35px;
line-height: 40px;
}
#a0047 {
padding-top: 30px;
padding-bottom: 40px;
}
}
/*-- A0047 END ------------------------------- */Not compatible with BC8 block - Therapists
