Skip to content

Jeff Balicki / imagination_library

Go to a project
Toggle navigation
Toggle navigation pinning
9c1e0f29 by Jeff Balicki
Options

test 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 80f7168d
Inline Side-by-side
Showing 13 changed files with 188 additions and 125 deletions
......@@ -11,19 +11,19 @@
// Create id attribute allowing for custom "anchor" value.
$id = 'carousel-' . $block['id'];
if( !empty($block['anchor']) ) {
if (!empty($block['anchor'])) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'carousel';
if( !empty($block['className']) ) {
if (!empty($block['className'])) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
if (!empty($block['align'])) {
$className .= ' align' . $block['align'];
}
if( $is_preview ) {
if ($is_preview) {
$className .= ' is-admin';
}
......@@ -31,37 +31,40 @@ $carousel_style = get_field('carousel_style');
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> ">
<?php
$args = array(
'post_type' => 'testimonial', // Replace 'testimonial' with your custom post type
'posts_per_page' => -1
);
$testimonial_query = new WP_Query($args);
if ($testimonial_query->have_posts()): ?>
<div class="testimonials-carousel carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
<?php while ($testimonial_query->have_posts()): $testimonial_query->the_post(); ?>
<div class="swiper-slide">
<div class="testimonials">
<?php
$args = array(
'post_type' => 'testimonial', // Replace 'testimonial' with your custom post type
'posts_per_page' => -1
);
$testimonial_query = new WP_Query($args);
if ($testimonial_query->have_posts()): ?>
<div class="testimonials-carousel carousel-items <?php echo $size; ?>">
<div class='swiper-wrapper'>
<?php while ($testimonial_query->have_posts()):
$testimonial_query->the_post(); ?>
<div class="swiper-slide">
<div class="testimonials">
<div class="testimonial-text">
<div class="row">
<div class="col-md-12">
<div class="testimonial-text">
<div class="testimonial-copy">
<?php the_content(); ?>
<div class="testimonial-author"><?php the_title(); ?></div>
<div class="col-md-2 quotes col-sm-12">
</div>
</div>
<div class="testimonial-copy col-md-10 col-sm-12">
<?php the_content(); ?>
<div class="testimonial-author"><?php the_title(); ?></div>
</div>
</div>
</div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev" data-id="<?php echo esc_attr($id); ?>"></div>
<div class="swiper-button-next" data-id="<?php echo esc_attr($id); ?>"></div>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev" data-id="<?php echo esc_attr($id); ?>"></div>
<div class="swiper-button-next" data-id="<?php echo esc_attr($id); ?>"></div>
</div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
</div>
\ No newline at end of file
......
......@@ -14969,6 +14969,10 @@ figure.woocommerce-product-gallery__wrapper {
font-family: "PT Sans", sans-serif;
}
html {
overflow-x: hidden;
}
h1, .h1 {
font-family: "Raleway", sans-serif;
font-size: 2.5rem;
......@@ -15289,6 +15293,9 @@ ol li ol {
margin: 0px -25% 0px -25%;
padding: 0px 25%;
}
.join-callout h2, .join-callout .h2 {
color: #231F20;
}
@media screen and (max-width: 900px) {
.join-callout {
margin: 0px -20% 0px -20%;
......@@ -15314,6 +15321,9 @@ ol li ol {
margin-top: -40px;
}
}
.join-callout .wp-block-group__inner-container .wp-block-columns {
margin-bottom: 0px;
}
.join-callout .wp-block-group__inner-container .wp-block-column {
display: flex;
flex-direction: column;
......@@ -15346,13 +15356,13 @@ ol li ol {
margin: 0px -20% 0px -20%;
padding: 0px 20%;
width: 140%;
top: -75px;
top: -73px;
height: 75px;
}
}
@media screen and (max-width: 600px) {
.join-callout::before {
top: -50px;
top: -48px;
height: 50px;
width: calc(100% + 60px);
margin: 0 -30px !important;
......@@ -15556,6 +15566,8 @@ ol li ol {
margin-left: 0px;
}
#menu-social.page li {
height: 48px;
width: 48px;
margin-right: 14px;
}
#menu-social.page li a {
......@@ -15655,8 +15667,8 @@ ol li ol {
margin-inline-start: 0px;
-webkit-margin-end: 0px;
margin-inline-end: 0px;
-webkit-padding-start: 20px;
padding-inline-start: 20px;
-webkit-padding-start: 0px;
padding-inline-start: 0px;
background-color: transparent !important;
}
@media only screen and (max-width: 768px) {
......@@ -15671,10 +15683,6 @@ ol li ol {
pointer-events: all !important;
}
.carousel-items.slick-initialized.slick-slider {
margin-right: 15px;
}
.carousel {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
......@@ -15685,8 +15693,20 @@ ol li ol {
.carousel .swiper-pagination {
bottom: 70px !important;
}
@media screen and (max-width: 1200px) {
.carousel .swiper-pagination {
bottom: 80px !important;
}
}
.carousel .swiper-wrapper {
gap: 1rem;
gap: 0rem;
width: 100vw;
padding-bottom: 60px;
}
@media screen and (max-width: 1200px) {
.carousel .swiper-wrapper {
padding-bottom: 0px;
}
}
.testimonials-carousel {
......@@ -15694,33 +15714,20 @@ ol li ol {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 337px;
}
@media only screen and (max-width: 768px) {
.testimonials-carousel {
width: calc(100% - 2rem) !important;
margin-left: auto !important;
margin-ight: auto !important;
}
height: auto;
}
.testimonials-carousel .swiper-slide {
width: 100%;
width: 100% !important;
}
.testimonials-carousel .swiper-slide .testimonials {
background: transparent;
margin-right: 20px;
}
.testimonials-carousel .swiper-slide .testimonials .row {
margin-right: 0rem !important;
margin-left: -15px !important;
min-height: 316px !important;
}
.testimonials-carousel .swiper-slide .testimonials .col-md-1 {
background-size: cover;
}
.testimonials-carousel .swiper-slide .testimonials .testimonial-text {
padding: 30px 50px;
width: 80%;
width: 100%;
margin: auto;
margin-top: 50px;
background-color: #fff;
......@@ -15729,10 +15736,21 @@ ol li ol {
max-width: 1068px;
position: relative;
}
.testimonials-carousel .swiper-slide .testimonials .testimonial-copy::after {
@media screen and (max-width: 1200px) {
.testimonials-carousel .swiper-slide .testimonials .testimonial-text {
width: 80%;
min-height: unset;
margin-bottom: 60px;
padding-bottom: 70px;
}
}
.testimonials-carousel .swiper-slide .testimonials .quotes {
height: 120px;
}
.testimonials-carousel .swiper-slide .testimonials .quotes::after {
position: absolute;
top: 0px;
left: 69px;
left: 40px;
background-repeat: no-repeat;
background-size: contain;
width: 94px;
......@@ -15741,9 +15759,13 @@ ol li ol {
display: block;
background-image: url("/wp-content/themes/understrap-child/images/qu.png");
}
.testimonials-carousel .swiper-slide .testimonials .testimonial-copy {
margin-left: 15%;
margin-right: 7%;
@media screen and (max-width: 768px) {
.testimonials-carousel .swiper-slide .testimonials .quotes::after {
position: relative;
top: 0px;
margin: auto;
left: unset;
}
}
.testimonials-carousel .swiper-slide .testimonials p {
font-size: 1.13rem !important;
......@@ -15761,8 +15783,11 @@ ol li ol {
font-family: "Chalkduster", sans-serif;
}
.page:not(.page-template-no-title) .testimonials-carousel {
padding-right: 25%;
.page-template-no-title .testimonials {
margin-right: 0 !important;
}
.page-template-no-title .testimonials-carousel {
padding-right: 0%;
}
.has-blue-color,
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -12236,24 +12236,22 @@
jQuery(document).ready(function ($) {
jQuery('.carousel-items').each(function () {
var offset = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
var offsetAfter = (window.innerWidth - $('.entry-content').width()) / 2 - 28;
// var offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
// var offsetAfter = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
var PerView = 'auto';
var space = 20;
var SlidesPerGroup = 1;
var _id = jQuery(this).parent().attr('id');
if ($(window).width() < 600) {
offset = 0;
PerView = 1;
SlidesPerGroup = 1;
space = 0;
offsetAfter = 0;
}
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesPerView: PerView,
slidesOffsetAfter: offsetAfter,
slidesOffsetBefore: offset,
//slidesOffsetAfter: offsetAfter,
//slidesOffsetBefore: offset,
spaceBetween: space,
slidesPerGroup: SlidesPerGroup,
pagination: {
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -17,8 +17,8 @@ jQuery(document).ready(function($) {
jQuery('.carousel-items').each(function() {
var offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
var offsetAfter = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
// var offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
// var offsetAfter = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
var PerView = 'auto';
var space = 20;
var SlidesPerGroup= 1;
......@@ -28,11 +28,11 @@ jQuery(document).ready(function($) {
if ($(window).width() < 600) {
offset = 0;
var offset = 0;
PerView = 1;
SlidesPerGroup = 1;
space = 0;
offsetAfter = 0;
var offsetAfter = 0;
}
......@@ -41,8 +41,8 @@ jQuery(document).ready(function($) {
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesPerView: PerView,
slidesOffsetAfter: offsetAfter,
slidesOffsetBefore: offset,
//slidesOffsetAfter: offsetAfter,
//slidesOffsetBefore: offset,
spaceBetween: space,
slidesPerGroup: SlidesPerGroup ,
pagination: {
......
......@@ -5,6 +5,7 @@
width: 13px !important;
opacity: 1 !important;
}
.swiper-pagination-bullet-active {
background: #3f9c35 !important;
border: 2px solid #3f9c35 !important;
......@@ -22,8 +23,9 @@
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 20px;
padding-inline-start: 0px;
background-color: transparent !important;
@media only screen and (max-width: 768px) {
padding-inline-start: 0px;
}
......@@ -34,9 +36,7 @@
pointer-events: all !important;
}
.carousel-items.slick-initialized.slick-slider {
margin-right: 15px; //for the scroll bar
}
.carousel-items.slick-initialized.slick-slider {}
.carousel {
width: 100vw;
......@@ -45,87 +45,104 @@
left: 0 !important;
min-height: 340px !important;
.swiper-button-next {
//right: 15% !important;
}
.swiper-button-prev {
//left: 11% !important;
}
.swiper-pagination {
bottom: 70px !important;
@media screen and (max-width: 1200px) {
bottom: 80px !important;
}
}
.carousel-items {
}
.carousel-items {}
.swiper-wrapper {
gap: 1rem;
gap: 0rem;
width: 100vw;
padding-bottom: 60px;
@media screen and (max-width: 1200px) {
padding-bottom: 0px;
}
}
}
// testimonials carousel css
.testimonials-carousel {
background-image:url("/wp-content/themes/understrap-child/images/orange-background.png");
background-image: url("/wp-content/themes/understrap-child/images/orange-background.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 337px;
@media only screen and (max-width: 768px) {
width: calc(100% - 2rem) !important;
margin-left: auto !important;
margin-ight: auto !important;
}
height: auto;
.swiper-slide {
width: 100%;
width: 100% !important;
.testimonials {
background: transparent;
margin-right: 20px;
.row {
margin-right: 0rem !important;
margin-left: -15px !important;
min-height: 316px !important;
}
.col-md-1 {
background-size: cover;
}
.testimonial-text {
padding: 30px 50px;
width: 80%;
width: 100%;
margin: auto;
margin-top:50px ;
margin-top: 50px;
background-color: #fff;
border-radius: 25px;
min-height: 230px;
max-width: 1068px;
position: relative;
@media screen and (max-width: 1200px) {
width: 80%;
min-height: unset;
margin-bottom: 60px;
padding-bottom: 70px;
}
}
.quotes {
height: 120px;
}
.testimonial-copy::after{
.quotes::after {
position: absolute;
top: 0px;
left: 69px;
left: 40px;
background-repeat: no-repeat;
background-size: contain;
width:94px;
height:150px;
content:"";
width: 94px;
height: 150px;
content: "";
display: block;
background-image:url("/wp-content/themes/understrap-child/images/qu.png");
background-image: url("/wp-content/themes/understrap-child/images/qu.png");
@media screen and (max-width: 768px) {
position: relative;
top: 0px;
margin: auto;
left: unset;
}
}
.testimonial-copy{
margin-left:15%;
margin-right:7%;
.testimonial-copy {
//margin-left: 15%;
//margin-right: 7%;
}
p {
......@@ -134,25 +151,32 @@
color: #63656B;
font-family: "PT Sans", sans-serif;
}
.testimonial-author{
.testimonial-author {
font-size: 1.13rem !important;
line-height: 1.5rem !important;
font-weight: 700;
color: #007299;
margin-top: 20px;
margin-bottom: 0;
font-family: 'Chalkduster', sans-serif;
font-family: 'Chalkduster', sans-serif;
}
}
}
}
.page:not(.page-template-no-title){
.testimonials-carousel{
padding-right: 25%;
.page-template-no-title {
.testimonials {
margin-right: 0 !important;
}
.testimonials-carousel {
padding-right: 0%;
}
}
\ No newline at end of file
......
......@@ -5,6 +5,10 @@
}
html {
overflow-x: hidden;
}
h1{
font-family: "Raleway", sans-serif;
font-size: 2.5rem;
......@@ -316,6 +320,9 @@ ul:not(.navbar-nav):not(.menu){
background-color: #a3d55f;
margin: 0px -25% 0px -25%;
padding: 0px 25%;
h2{
color:#231F20 ;
}
@media screen and (max-width: 900px) {
margin: 0px -20% 0px -20%;
padding: 0px 20%;
......@@ -333,7 +340,9 @@ ul:not(.navbar-nav):not(.menu){
@media screen and (max-width: 600px) {
margin-top:-40px;
}
.wp-block-columns{
margin-bottom: 0px;
}
.wp-block-column{
display: flex;
flex-direction: column;
......@@ -366,11 +375,11 @@ ul:not(.navbar-nav):not(.menu){
margin: 0px -20% 0px -20%;
padding: 0px 20%;
width: 140%;
top: -75px;
top: -73px;
height: 75px;
}
@media screen and (max-width: 600px) {
top: -50px;
top: -48px;
height: 50px;
width: calc(100% + 60px);
margin: 0 -30px !important;
......
......@@ -132,11 +132,15 @@
#menu-social.page{
margin-left: 0px;
li {
height:48px;
width:48px;
margin-right:14px;
a{
height:48px;
width:48px;
}
margin-right:14px;
}
a::after{
top: 11px;
......