Exemple #1
0
        /**
         *  Widget front end display
         */
        function widget($args, $instance)
        {
            // Turn $args array into variables.
            extract($args);
            // $instance Defaults
            $instance_defaults = $this->defaults;
            // If we have information in this widget, then ignore the defaults
            if (!empty($instance)) {
                $instance_defaults = array();
            }
            // Parse $instance
            $widget = wp_parse_args($instance, $instance_defaults);
            // Enqueue Masonry if need be
            if ('list-masonry' == $this->check_and_return($widget, 'design', 'liststyle')) {
                $this->enqueue_masonry();
            }
            // Set the background styling
            if (!empty($widget['design']['background'])) {
                layers_inline_styles('#' . $widget_id, 'background', array('background' => $widget['design']['background']));
            }
            if (!empty($widget['design']['fonts']['color'])) {
                layers_inline_styles('#' . $widget_id, 'color', array('selectors' => array('.section-title h3.heading', '.section-title div.excerpt'), 'color' => $widget['design']['fonts']['color']));
            }
            // Apply the advanced widget styling
            $this->apply_widget_advanced_styling($widget_id, $widget);
            /**
             * Generate the widget container class
             */
            $widget_container_class = array();
            $widget_container_class[] = 'widget';
            $widget_container_class[] = 'row';
            $widget_container_class[] = 'content-vertical-massive';
            $widget_container_class[] = $this->check_and_return($widget, 'design', 'advanced', 'customclass');
            $widget_container_class[] = $this->get_widget_spacing_class($widget);
            $widget_container_class = implode(' ', apply_filters('layers_content_widget_container_class', $widget_container_class));
            ?>

			<section class="<?php 
            echo $widget_container_class;
            ?>
" id="<?php 
            echo $widget_id;
            ?>
">
				<?php 
            if ('' != $this->check_and_return($widget, 'title') || '' != $this->check_and_return($widget, 'excerpt')) {
                ?>
					<div class="container clearfix">
						<?php 
                /**
                 * Generate the Section Title Classes
                 */
                $section_title_class = array();
                $section_title_class[] = 'section-title clearfix';
                $section_title_class[] = $this->check_and_return($widget, 'design', 'fonts', 'size');
                $section_title_class[] = $this->check_and_return($widget, 'design', 'fonts', 'align');
                $section_title_class[] = $this->check_and_return($widget, 'design', 'background', 'color') && 'dark' == layers_is_light_or_dark($this->check_and_return($widget, 'design', 'background', 'color')) ? 'invert' : '';
                $section_title_class = implode(' ', $section_title_class);
                ?>
						<div class="<?php 
                echo $section_title_class;
                ?>
">
							<?php 
                if ('' != $widget['title']) {
                    ?>
								<h3 class="heading"><?php 
                    echo $widget['title'];
                    ?>
</h3>
							<?php 
                }
                ?>
							<?php 
                if ('' != $widget['excerpt']) {
                    ?>
								<div class="excerpt"><?php 
                    echo $widget['excerpt'];
                    ?>
</div>
							<?php 
                }
                ?>
						</div>
					</div>
				<?php 
            }
            ?>
				<?php 
            if (!empty($widget['columns'])) {
                ?>
					<div class="row <?php 
                echo $this->get_widget_layout_class($widget);
                ?>
 <?php 
                echo $this->check_and_return($widget, 'design', 'liststyle');
                ?>
">
						<?php 
                // Set total width so that we can apply .last to the final container
                $total_width = 0;
                ?>
						<?php 
                foreach (explode(',', $widget['column_ids']) as $column_key) {
                    // Make sure we've got a column going on here
                    if (!isset($widget['columns'][$column_key])) {
                        continue;
                    }
                    // Setup the relevant slide
                    $column = $widget['columns'][$column_key];
                    // Set the background styling
                    if (!empty($column['design']['background'])) {
                        layers_inline_styles('#' . $widget_id . '-' . $column_key, 'background', array('background' => $column['design']['background']));
                    }
                    if (!empty($column['design']['fonts']['color'])) {
                        layers_inline_styles('#' . $widget_id . '-' . $column_key, 'color', array('selectors' => array('h5.heading a', 'h5.heading', 'div.excerpt', 'div.excerpt p'), 'color' => $column['design']['fonts']['color']));
                    }
                    if (!empty($column['design']['fonts']['shadow'])) {
                        layers_inline_styles('#' . $widget_id . '-' . $column_key, 'text-shadow', array('selectors' => array('h5.heading a', 'h5.heading', 'div.excerpt', 'div.excerpt p'), 'text-shadow' => $column['design']['fonts']['shadow']));
                    }
                    if (!isset($column['width'])) {
                        $column['width'] = $this->column_defaults['width'];
                    }
                    // Add the correct span class
                    $span_class = 'span-' . $column['width'];
                    // Add .last to the final column
                    $total_width += $column['width'];
                    if (12 == $total_width) {
                        $span_class .= ' last';
                        $total_width = 0;
                    } elseif ($total_width > 12) {
                        $total_width = 0;
                    }
                    // Set Featured Media
                    $featureimage = $this->check_and_return($column, 'design', 'featuredimage');
                    $featurevideo = $this->check_and_return($column, 'design', 'featuredvideo');
                    // Set Image Sizes
                    if (isset($column['design']['imageratios'])) {
                        // Translate Image Ratio into something usable
                        $image_ratio = layers_translate_image_ratios($column['design']['imageratios']);
                        if (!isset($column['width'])) {
                            $column['width'] = 6;
                        }
                        if (4 > $column['width']) {
                            $use_image_ratio = $image_ratio . '-medium';
                        } else {
                            $use_image_ratio = $image_ratio . '-large';
                        }
                    } else {
                        if (4 > $column['width']) {
                            $use_image_ratio = 'medium';
                        } else {
                            $use_image_ratio = 'full';
                        }
                    }
                    $media = layers_get_feature_media($featureimage, $use_image_ratio, $featurevideo);
                    // Set the column link
                    $link = $this->check_and_return($column, 'link');
                    /**
                     * Set Individual Column CSS
                     */
                    $column_class = array();
                    $column_class[] = 'layers-masonry-column';
                    $column_class[] = $this->id_base . '-' . $column_key;
                    $column_class[] = $span_class;
                    $column_class[] = 'list-masonry' == $this->check_and_return($widget, 'design', 'liststyle') ? 'no-gutter' : '';
                    $column_class[] = 'column' . ('on' != $this->check_and_return($widget, 'design', 'gutter') ? '-flush' : '');
                    if ('' != $this->check_and_return($column, 'design', 'background', 'image') || '' != $this->check_and_return($column, 'design', 'background', 'color')) {
                        $column_class[] = 'content';
                    }
                    if (false != $media) {
                        $column_class[] = 'has-image';
                    }
                    $column_class = implode(' ', $column_class);
                    ?>

							<div id="<?php 
                    echo $widget_id;
                    ?>
-<?php 
                    echo $column_key;
                    ?>
" class="<?php 
                    echo $column_class;
                    ?>
">
								<?php 
                    /**
                     * Set Overlay CSS Classes
                     */
                    $column_inner_class = array();
                    $column_inner_class[] = 'media';
                    if (!$this->check_and_return($widget, 'design', 'gutter')) {
                        $column_inner_class[] = 'no-push-bottom';
                    }
                    if ($this->check_and_return($column, 'design', 'background', 'color')) {
                        if ('dark' == layers_is_light_or_dark($this->check_and_return($column, 'design', 'background', 'color'))) {
                            $column_inner_class[] = 'invert';
                        }
                    } else {
                        if ($this->check_and_return($widget, 'design', 'background', 'color') && 'dark' == layers_is_light_or_dark($this->check_and_return($widget, 'design', 'background', 'color'))) {
                            $column_inner_class[] = 'invert';
                        }
                    }
                    $column_inner_class[] = $this->check_and_return($column, 'design', 'imagealign');
                    $column_inner_class[] = $this->check_and_return($column, 'design', 'fonts', 'size');
                    $column_inner_class = implode(' ', $column_inner_class);
                    ?>

								<div class="<?php 
                    echo $column_inner_class;
                    ?>
">
									<?php 
                    if (NULL != $media) {
                        ?>
										<div class="media-image <?php 
                        echo isset($column['design']['imageratios']) && 'image-round' == $column['design']['imageratios'] ? 'image-rounded' : '';
                        ?>
">
											<?php 
                        if (NULL != $link) {
                            ?>
<a href="<?php 
                            echo $link;
                            ?>
"><?php 
                        }
                        ?>
												<?php 
                        echo $media;
                        ?>
											<?php 
                        if (NULL != $link) {
                            ?>
</a><?php 
                        }
                        ?>
										</div>
									<?php 
                    }
                    ?>

									<?php 
                    if ($this->check_and_return($column, 'title') || $this->check_and_return($column, 'excerpt') || $this->check_and_return($column, 'link_text')) {
                        ?>
										<div class="media-body <?php 
                        echo isset($column['design']['fonts']['align']) ? $column['design']['fonts']['align'] : '';
                        ?>
">
											<?php 
                        if ($this->check_and_return($column, 'title')) {
                            ?>
												<h5 class="heading">
													<?php 
                            if (NULL != $link && !(isset($column['link']) && $this->check_and_return($column, 'link_text'))) {
                                ?>
<a href="<?php 
                                echo $column['link'];
                                ?>
"><?php 
                            }
                            ?>
														<?php 
                            echo $column['title'];
                            ?>
													<?php 
                            if (NULL != $link && !(isset($column['link']) && $this->check_and_return($column, 'link_text'))) {
                                ?>
</a><?php 
                            }
                            ?>
												</h5>
											<?php 
                        }
                        ?>
											<?php 
                        if ($this->check_and_return($column, 'excerpt')) {
                            ?>
												<div class="excerpt"><?php 
                            layers_the_content($column['excerpt']);
                            ?>
</div>
											<?php 
                        }
                        ?>
											<?php 
                        if (isset($column['link']) && $this->check_and_return($column, 'link_text')) {
                            ?>
												<a href="<?php 
                            echo $column['link'];
                            ?>
" class="button btn-<?php 
                            echo $this->check_and_return($column, 'design', 'fonts', 'size');
                            ?>
"><?php 
                            echo $column['link_text'];
                            ?>
</a>
											<?php 
                        }
                        ?>
										</div>
									<?php 
                    }
                    ?>
								</div>
							</div>
						<?php 
                }
                ?>
					</div>
				<?php 
            }
            ?>

			</section>
			<?php 
            if ('list-masonry' == $this->check_and_return($widget, 'design', 'liststyle')) {
                ?>
				<script>
					jQuery(function($){
						layers_masonry_settings[ '<?php 
                echo $widget_id;
                ?>
' ] = [{
								itemSelector: '.layers-masonry-column',
								layoutMode: 'masonry',
								gutter: <?php 
                echo isset($widget['design']['gutter']) ? 20 : 0;
                ?>
							}];

						$('#<?php 
                echo $widget_id;
                ?>
').find('.list-masonry').layers_masonry( layers_masonry_settings[ '<?php 
                echo $widget_id;
                ?>
' ][0] );
					});
				</script>
			<?php 
            }
            // masonry trigger
            ?>
		<?php 
        }
Exemple #2
0
        /**
         *  Widget front end display
         */
        function widget($args, $instance)
        {
            global $wp_customize;
            // Turn $args array into variables.
            extract($args);
            // $instance Defaults
            $instance_defaults = $this->defaults;
            // If we have information in this widget, then ignore the defaults
            if (!empty($instance)) {
                $instance_defaults = array();
            }
            // Parse $instance
            $widget = wp_parse_args($instance, $instance_defaults);
            // Enqueue Scipts when needed
            $this->enqueue_scripts();
            // Apply the advanced widget styling
            $this->apply_widget_advanced_styling($widget_id, $widget);
            // Apply slider arrow color
            if ($this->check_and_return($widget, 'slider_arrow_color')) {
                layers_inline_styles('#' . $widget_id, 'color', array('selectors' => array('.arrows a'), 'color' => $this->check_and_return($widget, 'slider_arrow_color')));
            }
            if ($this->check_and_return($widget, 'slider_arrow_color')) {
                layers_inline_styles('#' . $widget_id, 'border', array('selectors' => array('span.swiper-pagination-switch'), 'border' => array('color' => $this->check_and_return($widget, 'slider_arrow_color'))));
            }
            if ($this->check_and_return($widget, 'slider_arrow_color')) {
                layers_inline_styles('#' . $widget_id, 'background', array('selectors' => array('span.swiper-pagination-switch'), 'background' => array('color' => $this->check_and_return($widget, 'slider_arrow_color'))));
            }
            if ($this->check_and_return($widget, 'slider_arrow_color')) {
                layers_inline_styles('#' . $widget_id, 'background', array('selectors' => array('span.swiper-pagination-switch.swiper-active-switch'), 'background' => array('color' => 'transparent !important')));
            }
            // Get slider height css
            $slider_height_css = '';
            if ('layout-full-screen' != $this->check_and_return($widget, 'design', 'layout') && FALSE == $this->check_and_return($widget, 'autoheight_slides') && $this->check_and_return($widget, 'slide_height')) {
                $slider_height_css = 'height: ' . $widget['slide_height'] . 'px; ';
            }
            /**
             * Generate the widget container class
             */
            $widget_container_class = array();
            $widget_container_class[] = 'widget';
            $widget_container_class[] = 'row';
            $widget_container_class[] = 'slide';
            $widget_container_class[] = 'swiper-container';
            $widget_container_class[] = $this->get_widget_layout_class($widget);
            $widget_container_class[] = $this->check_and_return($widget, 'design', 'advanced', 'customclass');
            $widget_container_class[] = $this->get_widget_spacing_class($widget);
            if (isset($widget['design']['layout']) && '' != $widget['design']['layout']) {
                // Slider layout eg 'slider-layout-full-screen'
                $widget_container_class[] = 'slider-' . $widget['design']['layout'];
            }
            if (!isset($widget['design']['layout']) || isset($widget['design']['layout']) && 'layout-full-screen' != $widget['design']['layout']) {
                // If slider is not full screen
                $widget_container_class[] = 'not-full-screen';
            }
            if (1 == count($widget['slides'])) {
                // If only one slide
                $widget_container_class[] = 'single-slide';
            }
            $widget_container_class = implode(' ', apply_filters('layers_slider_widget_container_class', $widget_container_class));
            /**
             * Slider HTML
             */
            ?>
			<section class="<?php 
            echo $widget_container_class;
            ?>
" id="<?php 
            echo $widget_id;
            ?>
" style="<?php 
            echo esc_attr($slider_height_css);
            ?>
" >
				<?php 
            if (!empty($widget['slides'])) {
                ?>
					<?php 
                if (1 < count($widget['slides']) && isset($widget['show_slider_arrows'])) {
                    ?>
						 <div class="arrows">
							<a href="" class="l-left-arrow animate"></a>
							<a href="" class="l-right-arrow animate"></a>
						</div>
					<?php 
                }
                ?>
					<div class="<?php 
                echo $this->get_field_id('pages');
                ?>
 pages animate">
						<?php 
                for ($i = 0; $i < count($widget['slides']); $i++) {
                    ?>
							<a href="" class="page animate <?php 
                    if (0 == $i) {
                        echo 'active';
                    }
                    ?>
"></a>
						<?php 
                }
                ?>
					</div>
			 		<div class="swiper-wrapper">
						<?php 
                foreach (wp_parse_id_list($widget['slide_ids']) as $slide_key) {
                    // Make sure we've got a column going on here
                    if (!isset($widget['slides'][$slide_key])) {
                        continue;
                    }
                    // Setup the relevant slide
                    $slide = $widget['slides'][$slide_key];
                    // Set the background styling
                    if (!empty($slide['design']['background'])) {
                        layers_inline_styles('#' . $widget_id . '-' . $slide_key, 'background', array('background' => $slide['design']['background']));
                    }
                    if (!empty($slide['design']['fonts']['color'])) {
                        layers_inline_styles('#' . $widget_id . '-' . $slide_key, 'color', array('selectors' => array('h3.heading', 'h3.heading a', 'div.excerpt'), 'color' => $slide['design']['fonts']['color']));
                    }
                    if (!empty($slide['design']['fonts']['shadow'])) {
                        layers_inline_styles('#' . $widget_id . '-' . $slide_key, 'text-shadow', array('selectors' => array('h3.heading', 'h3.heading a', 'div.excerpt'), 'text-shadow' => $slide['design']['fonts']['shadow']));
                    }
                    // Set Featured Media
                    $featureimage = $this->check_and_return($slide, 'design', 'featuredimage');
                    $featurevideo = $this->check_and_return($slide, 'design', 'featuredvideo');
                    // Set Image Sizes
                    if (isset($slide['design']['imageratios'])) {
                        // Translate Image Ratio into something usable
                        $image_ratio = layers_translate_image_ratios($slide['design']['imageratios']);
                        $use_image_ratio = $image_ratio . '-medium';
                    } else {
                        $use_image_ratio = 'large';
                    }
                    /**
                     * Set Individual Slide CSS
                     */
                    $slide_class = array();
                    $slide_class[] = 'swiper-slide';
                    if ($this->check_and_return($slide, 'design', 'background', 'color')) {
                        if ('dark' == layers_is_light_or_dark($this->check_and_return($slide, 'design', 'background', 'color'))) {
                            $slide_class[] = 'invert';
                        }
                    } else {
                        $slide_class[] = 'invert';
                    }
                    if (false != $this->check_and_return($slide, 'image') || 'image-left' == $slide['design']['imagealign'] || 'image-top' == $slide['design']['imagealign']) {
                        $slide_class[] = 'has-image';
                    }
                    if (isset($slide['design']['imagealign']) && '' != $slide['design']['imagealign']) {
                        $slide_class[] = $slide['design']['imagealign'];
                    }
                    if (isset($slide['design']['fonts']['align']) && '' != $slide['design']['fonts']['align']) {
                        $slide_class[] = $slide['design']['fonts']['align'];
                    }
                    $slide_class = implode(' ', $slide_class);
                    // Set link entire slide or not
                    $slide_wrapper_tag = 'div';
                    $slide_wrapper_href = '';
                    if ($this->check_and_return($slide, 'link') && !$this->check_and_return($slide, 'link_text')) {
                        $slide_wrapper_tag = 'a';
                        $slide_wrapper_href = 'href="' . esc_url($slide['link']) . '"';
                    }
                    ?>
							<<?php 
                    echo $slide_wrapper_tag;
                    ?>
 <?php 
                    echo $slide_wrapper_href;
                    ?>
 class="<?php 
                    echo $slide_class;
                    ?>
" id="<?php 
                    echo $widget_id;
                    ?>
-<?php 
                    echo $slide_key;
                    ?>
" style="float: left; <?php 
                    echo $slider_height_css;
                    ?>
">
								<?php 
                    /**
                     * Set Overlay CSS Classes
                     */
                    $overlay_class = array();
                    $overlay_class[] = 'overlay';
                    if (isset($slide['design']['background']['darken'])) {
                        $overlay_class[] = 'darken';
                    }
                    if ('' != $this->check_and_return($slide, 'design', 'background', 'image') || '' != $this->check_and_return($slide, 'design', 'background', 'color')) {
                        $overlay_class[] = 'content';
                    }
                    $overlay_classes = implode(' ', $overlay_class);
                    ?>

								<div class="<?php 
                    echo $overlay_classes;
                    ?>
" >
									<div class="container clearfix">
										<?php 
                    if ('' != $slide['title'] || '' != $slide['excerpt'] || '' != $slide['link']) {
                        ?>
											<div class="copy-container">
												<div class="section-title <?php 
                        echo isset($slide['design']['fonts']['size']) ? $slide['design']['fonts']['size'] : '';
                        ?>
">
													<?php 
                        if ($this->check_and_return($slide, 'title')) {
                            ?>
														<h3 class="heading"><?php 
                            echo $slide['title'];
                            ?>
</h3>
													<?php 
                        }
                        ?>
													<?php 
                        if ($this->check_and_return($slide, 'excerpt')) {
                            ?>
														<div class="excerpt"><?php 
                            layers_the_content($slide['excerpt']);
                            ?>
</div>
													<?php 
                        }
                        ?>
													<?php 
                        if ('div' == $slide_wrapper_tag && $this->check_and_return($slide, 'link') && $this->check_and_return($slide, 'link_text')) {
                            ?>
														<a href="<?php 
                            echo $slide['link'];
                            ?>
" class="button btn-<?php 
                            echo $this->check_and_return($slide, 'design', 'fonts', 'size');
                            ?>
"><?php 
                            echo $slide['link_text'];
                            ?>
</a>
													<?php 
                        }
                        ?>
												</div>
											</div>
										<?php 
                    }
                    // if title || excerpt
                    ?>
										<?php 
                    if ($featureimage || $featurevideo) {
                        ?>
											<div class="image-container <?php 
                        echo 'image-round' == $this->check_and_return($slide, 'design', 'imageratios') ? 'image-rounded' : '';
                        ?>
">
												<?php 
                        echo layers_get_feature_media($featureimage, $use_image_ratio, $featurevideo);
                        ?>
											</div>
										<?php 
                    }
                    // if $slide image
                    ?>
									</div> <!-- .container -->
								</div> <!-- .overlay -->
							</<?php 
                    echo $slide_wrapper_tag;
                    ?>
>
						<?php 
                }
                // foreach slides
                ?>
			 		</div>
				<?php 
            }
            // if !empty( $widget->slides )
            ?>
		 	</section>
			
			<?php 
            /**
             * Slider javascript initialize
             */
            if (1 < count($widget['slides'])) {
                ?>
	 			<?php 
                $swiper_js_obj = str_replace('-', '_', $this->get_field_id('slider'));
                ?>
			 	<script>
					jQuery(function($){

						var <?php 
                echo $swiper_js_obj;
                ?>
 = $('#<?php 
                echo $widget_id;
                ?>
').swiper({
							mode:'horizontal',
							<?php 
                if ('' == $slider_height_css) {
                    ?>
								calculateHeight: true,
							<?php 
                }
                ?>
							<?php 
                if (isset($widget['show_slider_dots']) && (!empty($widget['slides']) && 1 < count($widget['slides']))) {
                    ?>
								pagination: '.<?php 
                    echo $this->get_field_id('pages');
                    ?>
',
							<?php 
                }
                ?>
							paginationClickable: true,
							watchActiveIndex: true
							<?php 
                if (1 < count($widget['slides'])) {
                    ?>
								,loop: true
							<?php 
                }
                ?>
							<?php 
                if (isset($widget['autoplay_slides']) && isset($widget['slide_time']) && is_numeric($widget['slide_time'])) {
                    ?>
								, autoplay: <?php 
                    echo $widget['slide_time'] * 1000;
                    ?>
							<?php 
                }
                ?>
							<?php 
                if (isset($wp_customize) && $this->check_and_return($widget, 'focus_slide')) {
                    ?>
								,initialSlide: <?php 
                    echo $this->check_and_return($widget, 'focus_slide');
                    ?>
							<?php 
                }
                ?>
						});

						<?php 
                if (1 < count($widget['slides'])) {
                    ?>
							// Allow keyboard control
							<?php 
                    echo $swiper_js_obj;
                    ?>
.enableKeyboardControl();
						<?php 
                }
                // if > 1 slide
                ?>

						$('#<?php 
                echo $widget_id;
                ?>
').find('.arrows a').on( 'click' , function(e){
							e.preventDefault();

							// "Hi Mom"
							$that = $(this);

							if( $that.hasClass( 'swiper-pagination-switch' ) ){ // Anchors
								<?php 
                echo $swiper_js_obj;
                ?>
.swipeTo( $that.index() );
							} else if( $that.hasClass( 'l-left-arrow' ) ){ // Previous
								<?php 
                echo $swiper_js_obj;
                ?>
.swipePrev();
							} else if( $that.hasClass( 'l-right-arrow' ) ){ // Next
								<?php 
                echo $swiper_js_obj;
                ?>
.swipeNext();
							}

							return false;
						});

						<?php 
                echo $swiper_js_obj;
                ?>
.init();
					})
			 	</script>
		 	<?php 
            }
            ?>
		 	
		<?php 
        }
Exemple #3
0
        /**
         *  Widget front end display
         */
        function widget($args, $instance)
        {
            global $wp_customize;
            $this->backup_inline_css();
            // Turn $args array into variables.
            extract($args);
            // Use defaults if $instance is empty.
            if (empty($instance) && !empty($this->defaults)) {
                $instance = wp_parse_args($instance, $this->defaults);
            }
            // Mix in new/unset defaults on every instance load (NEW)
            $instance = $this->apply_defaults($instance);
            // Check if we have a map present
            if (isset($instance['show_google_map']) && ('' != $instance['google_maps_location'] || '' != $instance['google_maps_long_lat'])) {
                $hasmap = true;
            }
            // Set the background styling
            if (!empty($instance['design']['background'])) {
                $this->inline_css .= layers_inline_styles('#' . $widget_id, 'background', array('background' => $instance['design']['background']));
            }
            if (!empty($instance['design']['fonts']['color'])) {
                $this->inline_css .= layers_inline_styles('#' . $widget_id, 'color', array('selectors' => array('.section-title .heading', '.section-title div.excerpt', '.section-title small', '.form.content', 'form p', 'form label'), 'color' => $instance['design']['fonts']['color']));
            }
            // Set the map & form widths
            if (isset($hasmap)) {
                $form_class = 'span-6';
            } else {
                $form_class = 'span-12';
            }
            $mapwidth = 'span-12';
            // Set Display Variables
            $show_address_or_contactform = '' != $instance['address_shown'] && isset($instance['show_address']) || $this->check_and_return($instance, 'contact_form') && $this->check_and_return($instance, 'show_contact_form') ? TRUE : FALSE;
            $show_title_or_excerpt = '' != $instance['title'] || '' != $instance['excerpt'] ? TRUE : FALSE;
            // Apply the advanced widget styling
            $this->apply_widget_advanced_styling($widget_id, $instance);
            /**
             * Generate the widget container class
             */
            $widget_container_class = array();
            $widget_container_class[] = 'widget';
            $widget_container_class[] = 'layers-contact-widget';
            $widget_container_class[] = 'clearfix';
            $widget_container_class[] = 'content-vertical-massive';
            $widget_container_class[] = 'layers-contact-widget';
            $widget_container_class[] = 'on' == $this->check_and_return($instance, 'design', 'background', 'darken') ? 'darken' : '';
            $widget_container_class[] = $this->check_and_return($instance, 'design', 'advanced', 'customclass');
            // Apply custom class from design-bar's advanced control.
            $widget_container_class[] = $this->get_widget_spacing_class($instance);
            if (!$show_title_or_excerpt && !$show_address_or_contactform) {
                $widget_container_class[] = 'no-inset-top no-inset-bottom';
            }
            $widget_container_class = apply_filters('layers_contact_widget_container_class', $widget_container_class, $this, $instance);
            $widget_container_class = implode(' ', $widget_container_class);
            // Custom Anchor
            echo $this->custom_anchor($instance);
            ?>

			<div id="<?php 
            echo esc_attr($widget_id);
            ?>
" class="<?php 
            echo esc_attr($widget_container_class);
            ?>
" <?php 
            $this->selective_refresh_atts($args);
            ?>
>

				<?php 
            do_action('layers_before_contact_widget_inner', $this, $instance);
            ?>

				<?php 
            if ($show_title_or_excerpt) {
                ?>
					<div class="container clearfix">
						<?php 
                /**f
                 * Generate the Section Title Classes
                 */
                $section_title_class = array();
                $section_title_class[] = 'section-title clearfix';
                $section_title_class[] = $this->check_and_return($instance, 'design', 'fonts', 'size');
                $section_title_class[] = $this->check_and_return($instance, 'design', 'fonts', 'align');
                $section_title_class[] = $this->check_and_return($instance, 'design', 'background', 'color') && 'dark' == layers_is_light_or_dark($this->check_and_return($instance, 'design', 'background', 'color')) ? 'invert' : '';
                $section_title_class = implode(' ', $section_title_class);
                ?>
						<div class="<?php 
                echo $section_title_class;
                ?>
">
							<?php 
                if ('' != $this->check_and_return($instance, 'title')) {
                    ?>
								<<?php 
                    echo $this->check_and_return($instance, 'design', 'fonts', 'heading-type');
                    ?>
 class="heading">
									<?php 
                    echo $instance['title'];
                    ?>
								</<?php 
                    echo $this->check_and_return($instance, 'design', 'fonts', 'heading-type');
                    ?>
>
							<?php 
                }
                ?>
							<?php 
                if ('' != $this->check_and_return($instance, 'excerpt')) {
                    ?>
								<div class="excerpt"><?php 
                    echo layers_the_content($instance['excerpt']);
                    ?>
</div>
							<?php 
                }
                ?>
						</div>
					</div>
				<?php 
            }
            // if title || excerpt
            ?>

				<?php 
            /**
             * Generate the Widget Body Class
             */
            $widget_body_class = array();
            $widget_body_class[] = 'row';
            $widget_body_class[] = $this->get_widget_layout_class($instance);
            $widget_body_class[] = $this->check_and_return($instance, 'design', 'background', 'color') && 'dark' == layers_is_light_or_dark($this->check_and_return($instance, 'design', 'background', 'color')) ? 'invert' : '';
            $widget_body_class = implode(' ', $widget_body_class);
            ?>
				<div class="<?php 
            echo $widget_body_class;
            ?>
">
					<?php 
            if ($show_address_or_contactform) {
                ?>
						<div class="column <?php 
                echo $form_class;
                ?>
 form content">
							<?php 
                if ($this->check_and_return($instance, 'show_address')) {
                    ?>
								<address class="copy">
									<p><?php 
                    echo $instance['address_shown'];
                    ?>
</p>
								</address>
							<?php 
                }
                ?>
							<?php 
                if ($this->check_and_return($instance, 'contact_form')) {
                    ?>
								<?php 
                    echo do_shortcode($instance['contact_form']);
                    ?>
							<?php 
                }
                ?>
						</div>
						<?php 
                $mapwidth = 'span-6';
                ?>
					<?php 
            }
            // if show_contact_form || address_shown
            ?>

					<?php 
            if (isset($hasmap)) {
                ?>
						<div class="column no-push-bottom <?php 
                echo esc_attr($mapwidth);
                ?>
">
							<?php 
                if (isset($wp_customize)) {
                    ?>
								<?php 
                    if ($this->check_and_return($instance, 'google_maps_location')) {
                        $map_center = $instance['google_maps_location'];
                    } else {
                        if ($this->check_and_return($instance, 'google_maps_long_lat')) {
                            $map_center = $instance['google_maps_long_lat'];
                        }
                    }
                    ?>
								<div class="layers-map" style="height: <?php 
                    echo esc_attr($instance['map_height']);
                    ?>
px; overflow: hidden;">
									<img src="https://maps.googleapis.com/maps/api/staticmap?center=<?php 
                    echo esc_attr($map_center);
                    ?>
&zoom=<?php 
                    echo isset($instance['google_maps_zoom']) ? $instance['google_maps_zoom'] : 14;
                    ?>
&size=1960x<?php 
                    echo isset($instance['map_height']) && '' != $instance['map_height'] ? $instance['map_height'] : 400;
                    ?>
&scale=2&markers=color:red|<?php 
                    echo esc_attr($map_center);
                    ?>
" class="google-map-img" />
								</div>
							<?php 
                } else {
                    ?>
								<div class="layers-map" style="height: <?php 
                    echo esc_attr($instance['map_height']);
                    ?>
px;" data-zoom-level="<?php 
                    echo isset($instance['google_maps_zoom']) ? $instance['google_maps_zoom'] : 14;
                    ?>
" <?php 
                    if ('' != $instance['google_maps_location']) {
                        ?>
data-location="<?php 
                        echo $instance['google_maps_location'];
                        ?>
"<?php 
                    }
                    ?>
 <?php 
                    if ('' != $instance['google_maps_long_lat']) {
                        ?>
data-longlat="<?php 
                        echo $instance['google_maps_long_lat'];
                        ?>
"<?php 
                    }
                    ?>
></div>
							<?php 
                }
                ?>
						</div>
					<?php 
            }
            ?>
				</div>

				<?php 
            do_action('layers_after_contact_widget_inner', $this, $instance);
            // Print the Inline Styles for this Widget
            $this->print_inline_css();
            ?>

			</div>

			<?php 
            if (!isset($wp_customize)) {
                wp_enqueue_script(LAYERS_THEME_SLUG . "-map-api");
                wp_enqueue_script(LAYERS_THEME_SLUG . "-map-trigger");
            }
            // Enqueue the map js
        }
Exemple #4
0
        /**
         *  Widget front end display
         */
        function widget($args, $instance)
        {
            global $wp_customize;
            $this->backup_inline_css();
            // Turn $args array into variables.
            extract($args);
            // Use defaults if $instance is empty.
            if (empty($instance) && !empty($this->defaults)) {
                $instance = wp_parse_args($instance, $this->defaults);
            }
            // Mix in new/unset defaults on every instance load (NEW)
            $instance = $this->apply_defaults($instance);
            // Enqueue Scipts when needed
            $this->enqueue_scripts();
            // Apply slider arrow color
            if ($this->check_and_return($instance, 'slider_arrow_color')) {
                $this->inline_css .= layers_inline_styles('#' . $widget_id, 'color', array('selectors' => array('.arrows a'), 'color' => $this->check_and_return($instance, 'slider_arrow_color')));
            }
            if ($this->check_and_return($instance, 'slider_arrow_color')) {
                $this->inline_css .= layers_inline_styles('#' . $widget_id, 'border', array('selectors' => array('span.swiper-pagination-switch'), 'border' => array('color' => $this->check_and_return($instance, 'slider_arrow_color'))));
            }
            if ($this->check_and_return($instance, 'slider_arrow_color')) {
                $this->inline_css .= layers_inline_styles('#' . $widget_id, 'background', array('selectors' => array('span.swiper-pagination-switch'), 'background' => array('color' => $this->check_and_return($instance, 'slider_arrow_color'))));
            }
            if ($this->check_and_return($instance, 'slider_arrow_color')) {
                $this->inline_css .= layers_inline_styles('#' . $widget_id, 'background', array('selectors' => array('span.swiper-pagination-switch.swiper-active-switch'), 'background' => array('color' => 'transparent !important')));
            }
            // Get slider height css
            $slider_height_css = '';
            if ('layout-full-screen' != $this->check_and_return($instance, 'design', 'layout') && FALSE == $this->check_and_return($instance, 'autoheight_slides') && $this->check_and_return($instance, 'slide_height')) {
                $slider_height_css = 'height: ' . $instance['slide_height'] . 'px; ';
            }
            // Apply the advanced widget styling
            $this->apply_widget_advanced_styling($widget_id, $instance);
            /**
             * Generate the widget container class
             */
            $widget_container_class = array();
            $widget_container_class[] = 'widget';
            $widget_container_class[] = 'layers-slider-widget';
            $widget_container_class[] = 'row';
            $widget_container_class[] = 'slide';
            $widget_container_class[] = 'swiper-container';
            $widget_container_class[] = 'loading';
            // `loading` will be changed to `loaded` to fade in the slider.
            $widget_container_class[] = $this->check_and_return($instance, 'design', 'advanced', 'customclass');
            // Apply custom class from design-bar's advanced control.
            $widget_container_class[] = $this->get_widget_spacing_class($instance);
            $widget_container_class[] = $this->get_widget_layout_class($instance);
            if ($this->check_and_return($instance, 'autoheight_slides')) {
                if (FALSE !== ($fullwidth = array_search('full-screen', $widget_container_class))) {
                    unset($widget_container_class[$fullwidth]);
                }
                $widget_container_class[] = 'auto-height';
            }
            if ($this->check_and_return($instance, 'design', 'layout')) {
                // Slider layout eg 'slider-layout-full-screen'
                $widget_container_class[] = 'slider-' . $instance['design']['layout'];
            }
            if (!isset($instance['design']['layout']) || isset($instance['design']['layout']) && 'layout-full-screen' != $instance['design']['layout']) {
                // If slider is not full screen
                $widget_container_class[] = 'not-full-screen';
            }
            if (1 == count($instance['slides'])) {
                // If only one slide
                $widget_container_class[] = 'single-slide';
            }
            $widget_container_class = apply_filters('layers_slider_widget_container_class', $widget_container_class, $this, $instance);
            $widget_container_class = implode(' ', $widget_container_class);
            /**
             * Slider HTML
             */
            if (!empty($instance['slides'])) {
                ?>

				<?php 
                // Custom Anchor
                echo $this->custom_anchor($instance);
                ?>

				<div id="<?php 
                echo esc_attr($widget_id);
                ?>
" class="<?php 
                echo esc_attr($widget_container_class);
                ?>
" style="<?php 
                echo esc_attr($slider_height_css);
                ?>
" <?php 
                $this->selective_refresh_atts($args);
                ?>
>

					<?php 
                do_action('layers_before_slider_widget_inner', $this, $instance);
                ?>

					<?php 
                if (1 < count($instance['slides']) && isset($instance['show_slider_arrows'])) {
                    ?>
						 <div class="arrows">
							<a href="" class="l-left-arrow animate"></a>
							<a href="" class="l-right-arrow animate"></a>
						</div>
					<?php 
                }
                ?>

					<div class="<?php 
                echo $this->get_layers_field_id('pages');
                ?>
 pages animate">
						<?php 
                for ($i = 0; $i < count($instance['slides']); $i++) {
                    ?>
							<a href="" class="page animate <?php 
                    if (0 == $i) {
                        echo 'active';
                    }
                    ?>
"></a>
						<?php 
                }
                ?>
					</div>

			 		<div class="swiper-wrapper">
						<?php 
                foreach (wp_parse_id_list($instance['slide_ids']) as $slide_key) {
                    // Make sure we've got a column going on here
                    if (!isset($instance['slides'][$slide_key])) {
                        continue;
                    }
                    // Setup the relevant slide
                    $item_instance = $instance['slides'][$slide_key];
                    // Mix in new/unset defaults on every instance load (NEW)
                    $item_instance = $this->apply_defaults($item_instance, 'slide');
                    // Set the background styling
                    if (!empty($item_instance['design']['background'])) {
                        $this->inline_css .= layers_inline_styles('#' . $widget_id . '-' . $slide_key, 'background', array('background' => $item_instance['design']['background']));
                    }
                    if (!empty($item_instance['design']['fonts']['color'])) {
                        $this->inline_css .= layers_inline_styles('#' . $widget_id . '-' . $slide_key, 'color', array('selectors' => array('.heading', '.heading a', 'div.excerpt'), 'color' => $item_instance['design']['fonts']['color']));
                    }
                    if (!empty($item_instance['design']['fonts']['shadow'])) {
                        $this->inline_css .= layers_inline_styles('#' . $widget_id . '-' . $slide_key, 'text-shadow', array('selectors' => array('.heading', '.heading a', 'div.excerpt'), 'text-shadow' => $item_instance['design']['fonts']['shadow']));
                    }
                    // Set the button styling
                    $button_size = '';
                    if (function_exists('layers_pro_apply_widget_button_styling')) {
                        $button_size = $this->check_and_return($item_instance, 'design', 'buttons-size') ? 'btn-' . $this->check_and_return($item_instance, 'design', 'buttons-size') : '';
                        $this->inline_css .= layers_pro_apply_widget_button_styling($this, $item_instance, array("#{$widget_id}-{$slide_key} .button"));
                    }
                    // Set Featured Media
                    $featureimage = $this->check_and_return($item_instance, 'design', 'featuredimage');
                    $featurevideo = $this->check_and_return($item_instance, 'design', 'featuredvideo');
                    // Set Image Sizes
                    if (isset($item_instance['design']['imageratios'])) {
                        // Translate Image Ratio into something usable
                        $image_ratio = layers_translate_image_ratios($item_instance['design']['imageratios']);
                        $use_image_ratio = $image_ratio . '-medium';
                    } else {
                        $use_image_ratio = 'large';
                    }
                    // Get the button array.
                    $link_array = $this->check_and_return_link($item_instance, 'button');
                    $link_href_attr = $link_array['link'] ? 'href="' . esc_url($link_array['link']) . '"' : '';
                    $link_target_attr = '_blank' == $link_array['target'] ? 'target="_blank"' : '';
                    /**
                     * Set Individual Slide CSS
                     */
                    $slide_class = array();
                    $slide_class[] = 'swiper-slide';
                    if ($this->check_and_return($item_instance, 'design', 'background', 'color')) {
                        if ('dark' == layers_is_light_or_dark($this->check_and_return($item_instance, 'design', 'background', 'color'))) {
                            $slide_class[] = 'invert';
                        }
                    } else {
                        $slide_class[] = 'invert';
                    }
                    if (false != $this->check_and_return($item_instance, 'image') || 'image-left' == $item_instance['design']['imagealign'] || 'image-top' == $item_instance['design']['imagealign']) {
                        $slide_class[] = 'has-image';
                    }
                    if (isset($item_instance['design']['imagealign']) && '' != $item_instance['design']['imagealign']) {
                        $slide_class[] = $item_instance['design']['imagealign'];
                    }
                    if (isset($item_instance['design']['fonts']['align']) && '' != $item_instance['design']['fonts']['align']) {
                        $slide_class[] = $item_instance['design']['fonts']['align'];
                    }
                    $slide_class[] = $this->check_and_return($item_instance, 'design', 'advanced', 'customclass');
                    // Apply custom class from design-bar's advanced control.
                    $slide_class = apply_filters('layers_slider_widget_item_class', $slide_class, $this, $item_instance, $instance);
                    $slide_class = implode(' ', $slide_class);
                    // Set link entire slide or not
                    $slide_wrapper_tag = 'div';
                    $slide_wrapper_href = '';
                    if ($link_array['link'] && !$link_array['text']) {
                        $slide_wrapper_tag = 'a';
                        $slide_wrapper_href = $link_href_attr;
                    }
                    ?>
							<<?php 
                    echo $slide_wrapper_tag;
                    ?>
 <?php 
                    echo $slide_wrapper_href;
                    ?>
 class="<?php 
                    echo $slide_class;
                    ?>
" id="<?php 
                    echo $widget_id;
                    ?>
-<?php 
                    echo $slide_key;
                    ?>
" style="float: left; <?php 
                    echo $slider_height_css;
                    ?>
" <?php 
                    echo $link_target_attr;
                    ?>
>

								<?php 
                    do_action('layers_before_slider_widget_item_inner', $this, $item_instance, $instance);
                    ?>

								<?php 
                    /**
                     * Set Overlay CSS Classes
                     */
                    $overlay_class = array();
                    $overlay_class[] = 'overlay';
                    if (isset($item_instance['design']['background']['darken'])) {
                        $overlay_class[] = 'darken';
                    }
                    if ('' != $this->check_and_return($item_instance, 'design', 'background', 'image') || '' != $this->check_and_return($item_instance, 'design', 'background', 'color')) {
                        $overlay_class[] = 'content';
                    }
                    $overlay_classes = implode(' ', $overlay_class);
                    ?>

								<div class="<?php 
                    echo $overlay_classes;
                    ?>
" >
									<div class="container clearfix">
										<?php 
                    if ('' != $item_instance['title'] || '' != $item_instance['excerpt'] || '' != $link_array['link']) {
                        ?>
											<div class="copy-container">
												<div class="section-title <?php 
                        echo isset($item_instance['design']['fonts']['size']) ? $item_instance['design']['fonts']['size'] : '';
                        ?>
">
													<?php 
                        if ($this->check_and_return($item_instance, 'title')) {
                            ?>
														<<?php 
                            echo $this->check_and_return($item_instance, 'design', 'fonts', 'heading-type');
                            ?>
 data-swiper-parallax="-100" class="heading">
															<?php 
                            echo $item_instance['title'];
                            ?>
														</<?php 
                            echo $this->check_and_return($item_instance, 'design', 'fonts', 'heading-type');
                            ?>
>
													<?php 
                        }
                        ?>
													<?php 
                        if ($this->check_and_return($item_instance, 'excerpt')) {
                            ?>
														<div data-swiper-parallax="-300" class="excerpt"><?php 
                            layers_the_content($item_instance['excerpt']);
                            ?>
</div>
													<?php 
                        }
                        ?>
													<?php 
                        if ('div' == $slide_wrapper_tag && $link_array['link'] && $link_array['text']) {
                            ?>
														<a data-swiper-parallax="-200" <?php 
                            echo $link_href_attr;
                            ?>
 <?php 
                            echo $link_target_attr;
                            ?>
 class="button <?php 
                            echo $button_size;
                            ?>
">
															<?php 
                            echo $link_array['text'];
                            ?>
														</a>
													<?php 
                        }
                        ?>
												</div>
											</div>
										<?php 
                    }
                    // if title || excerpt
                    ?>
										<?php 
                    if ($featureimage || $featurevideo) {
                        ?>
											<div class="image-container <?php 
                        echo 'image-round' == $this->check_and_return($item_instance, 'design', 'imageratios') ? 'image-rounded' : '';
                        ?>
">
												<?php 
                        echo layers_get_feature_media($featureimage, $use_image_ratio, $featurevideo);
                        ?>
											</div>
										<?php 
                    }
                    // if $item image
                    ?>
									</div> <!-- .container -->
								</div> <!-- .overlay -->

								<?php 
                    do_action('layers_after_slider_widget_item_inner', $this, $item_instance, $instance);
                    ?>

							</<?php 
                    echo $slide_wrapper_tag;
                    ?>
>
						<?php 
                }
                // foreach slides
                ?>
					</div>

					<?php 
                do_action('layers_after_slider_widget_inner', $this, $instance);
                // Print the Inline Styles for this Widget
                $this->print_inline_css();
                /**
                 * Slider javascript initialize
                 */
                $swiper_js_obj = str_replace('-', '_', $this->get_layers_field_id('slider'));
                ?>
					<script type='text/javascript'>
						jQuery(function($){

							var <?php 
                echo $swiper_js_obj;
                ?>
 = $('#<?php 
                echo $widget_id;
                ?>
').swiper({
							mode:'horizontal'
							,onInit: function(s){
								$(document).trigger( 'layers-slider-init', s);
							}
							,bulletClass: 'swiper-pagination-switch'
							,bulletActiveClass: 'swiper-active-switch swiper-visible-switch'
							,paginationClickable: true
							,watchActiveIndex: true
							<?php 
                if ('fade' == $this->check_and_return($instance, 'animation_type')) {
                    ?>
								,effect: '<?php 
                    echo $instance['animation_type'];
                    ?>
'
							<?php 
                } else {
                    if ('parallax' == $this->check_and_return($instance, 'animation_type')) {
                        ?>
								,speed: 700
								,parallax: true
								<?php 
                    }
                }
                ?>
								<?php 
                if (isset($instance['show_slider_dots']) && (!empty($instance['slides']) && 1 < count($instance['slides']))) {
                    ?>
								,pagination: '.<?php 
                    echo $this->get_layers_field_id('pages');
                    ?>
'
								<?php 
                }
                ?>
								<?php 
                if (1 < count($instance['slides'])) {
                    ?>
									,loop: true
							<?php 
                } else {
                    ?>
								,loop: false
								,noSwiping: true
								,allowSwipeToPrev: false
								,allowSwipeToNext: false
								<?php 
                }
                ?>
								<?php 
                if (isset($instance['autoplay_slides']) && isset($instance['slide_time']) && is_numeric($instance['slide_time'])) {
                    ?>
									, autoplay: <?php 
                    echo $instance['slide_time'] * 1000;
                    ?>
								<?php 
                }
                ?>
								<?php 
                if (isset($wp_customize) && $this->check_and_return($instance, 'focus_slide')) {
                    ?>
									,initialSlide: <?php 
                    echo $this->check_and_return($instance, 'focus_slide');
                    ?>
								<?php 
                }
                ?>
							});

							<?php 
                if (1 < count($instance['slides'])) {
                    ?>
								// Allow keyboard control
								<?php 
                    echo $swiper_js_obj;
                    ?>
.enableKeyboardControl();
							<?php 
                }
                // if > 1 slide
                ?>

							<?php 
                if (TRUE == $this->check_and_return($instance, 'autoheight_slides')) {
                    ?>
								$( '#<?php 
                    echo esc_attr($widget_id);
                    ?>
' ).imagesLoaded(function(){
									layers_swiper_resize( <?php 
                    echo $swiper_js_obj;
                    ?>
 );
								});

								$(window).resize(function(){
									layers_swiper_resize( <?php 
                    echo $swiper_js_obj;
                    ?>
 );
								});
							<?php 
                }
                ?>

							$('#<?php 
                echo $widget_id;
                ?>
').find('.arrows a').on( 'click' , function(e){
								e.preventDefault();

								// "Hi Mom"
								$that = $(this);

								if( $that.hasClass( 'swiper-pagination-switch' ) ){
									// Anchors
									<?php 
                echo $swiper_js_obj;
                ?>
.slideTo( $that.index() );
								} else if( $that.hasClass( 'l-left-arrow' ) ){
									// Previous
									<?php 
                echo $swiper_js_obj;
                ?>
.slidePrev();
								} else if( $that.hasClass( 'l-right-arrow' ) ){
									// Next
									<?php 
                echo $swiper_js_obj;
                ?>
.slideNext();
								}

								return false;
							});

							<?php 
                echo $swiper_js_obj;
                ?>
.init();

							// Do stuff if this is the first widget.
							if ( ! $('#<?php 
                echo $widget_id;
                ?>
').prev('.widget').length ) {
								if ( ! $('#<?php 
                echo $widget_id;
                ?>
').hasClass( '.full-screen' ) ) {
									jQuery('.header-site.header-overlay').css( 'transition', '0s' );
									setTimeout( function(){ jQuery('.header-site.header-overlay').css( 'transition', '' ); }, 1000 );
									jQuery('body').addClass( 'header-overlay-no-push' );
								}
							}

							// Fade-in slider after it's been initilaized (FOUC).
							$( '#<?php 
                echo $widget_id;
                ?>
' ).removeClass('loading').addClass('loaded');
						});
					</script>

				</div>
			<?php 
            }
        }
Exemple #5
0
        /**
         *  Widget front end display
         */
        function widget($args, $instance)
        {
            global $wp_customize;
            $this->backup_inline_css();
            // Turn $args array into variables.
            extract($args);
            // Use defaults if $instance is empty.
            if (empty($instance) && !empty($this->defaults)) {
                $instance = wp_parse_args($instance, $this->defaults);
            }
            // Mix in new/unset defaults on every instance load (NEW)
            $instance = $this->apply_defaults($instance);
            // Enqueue Masonry if need be
            if ('list-masonry' == $this->check_and_return($instance, 'design', 'liststyle')) {
                wp_enqueue_script(LAYERS_THEME_SLUG . '-layers-masonry-js');
            }
            // Set the background styling
            if (!empty($instance['design']['background'])) {
                $this->inline_css .= layers_inline_styles('#' . $widget_id, 'background', array('background' => $instance['design']['background']));
            }
            if (!empty($instance['design']['fonts']['color'])) {
                $this->inline_css .= layers_inline_styles('#' . $widget_id, 'color', array('selectors' => array('.section-title .heading', '.section-title div.excerpt'), 'color' => $instance['design']['fonts']['color']));
            }
            // Apply the advanced widget styling
            $this->apply_widget_advanced_styling($widget_id, $instance);
            /**
             * Generate the widget container class
             */
            $widget_container_class = array();
            $widget_container_class[] = 'widget';
            $widget_container_class[] = 'layers-content-widget';
            $widget_container_class[] = 'content-vertical-massive';
            $widget_container_class[] = 'on' == $this->check_and_return($instance, 'design', 'background', 'darken') ? 'darken' : '';
            $widget_container_class[] = $this->check_and_return($instance, 'design', 'advanced', 'customclass');
            // Apply custom class from design-bar's advanced control.
            $widget_container_class[] = $this->get_widget_spacing_class($instance);
            $widget_container_class = apply_filters('layers_content_widget_container_class', $widget_container_class, $this, $instance);
            $widget_container_class = implode(' ', $widget_container_class);
            // Custom Anchor
            echo $this->custom_anchor($instance);
            ?>

			<div id="<?php 
            echo esc_attr($widget_id);
            ?>
" class="<?php 
            echo esc_attr($widget_container_class);
            ?>
" <?php 
            $this->selective_refresh_atts($args);
            ?>
>

				<?php 
            do_action('layers_before_content_widget_inner', $this, $instance);
            ?>

				<?php 
            if (NULL !== $this->check_and_return($instance, 'title') || NULL !== $this->check_and_return($instance, 'excerpt')) {
                ?>

					<div class="container clearfix">
						<?php 
                /**
                 * Generate the Section Title Classes
                 */
                $section_title_class = array();
                $section_title_class[] = 'section-title clearfix';
                $section_title_class[] = $this->check_and_return($instance, 'design', 'fonts', 'size');
                $section_title_class[] = $this->check_and_return($instance, 'design', 'fonts', 'align');
                $section_title_class[] = $this->check_and_return($instance, 'design', 'background', 'color') && 'dark' == layers_is_light_or_dark($this->check_and_return($instance, 'design', 'background', 'color')) ? 'invert' : '';
                $section_title_class = implode(' ', $section_title_class);
                ?>
						<div class="<?php 
                echo $section_title_class;
                ?>
">
							<?php 
                if ('' != $this->check_and_return($instance, 'title')) {
                    ?>
								<<?php 
                    echo $this->check_and_return($instance, 'design', 'fonts', 'heading-type');
                    ?>
 class="heading">
									<?php 
                    echo $instance['title'];
                    ?>
								</<?php 
                    echo $this->check_and_return($instance, 'design', 'fonts', 'heading-type');
                    ?>
>
							<?php 
                }
                ?>
							<?php 
                if ('' != $this->check_and_return($instance, 'excerpt')) {
                    ?>
								<div class="excerpt"><?php 
                    echo layers_the_content($instance['excerpt']);
                    ?>
</div>
							<?php 
                }
                ?>
						</div>
					</div>
				<?php 
            }
            ?>
				<?php 
            if (!empty($instance['columns'])) {
                $column_ids = explode(',', $instance['column_ids']);
                // Set total width
                $col_no = 0;
                $first_last_class = '';
                $row_width = 0;
                ?>
					<div class="<?php 
                echo $this->get_widget_layout_class($instance);
                ?>
 <?php 
                echo $this->check_and_return($instance, 'design', 'liststyle');
                ?>
">
						<div class="grid">
							<?php 
                foreach ($column_ids as $column_key) {
                    // Make sure we've got a column going on here
                    if (!isset($instance['columns'][$column_key])) {
                        continue;
                    }
                    // Setup Internal Vars.
                    $item_instance = $instance['columns'][$column_key];
                    $item_id_attr = "{$widget_id}-tabs-{$column_key}";
                    // Mix in new/unset defaults on every instance load (NEW)
                    $item_instance = $this->apply_defaults($item_instance, 'column');
                    // Get the Next Column for use later.
                    if (isset($column_ids[$col_no + 1]) && isset($instance['columns'][$column_ids[$col_no + 1]])) {
                        $next_item = $instance['columns'][$column_ids[$col_no + 1]];
                    }
                    // Set the background styling
                    if (!empty($item_instance['design']['background'])) {
                        $this->inline_css .= layers_inline_styles('#' . $widget_id . '-' . $column_key, 'background', array('background' => $item_instance['design']['background']));
                    }
                    if (!empty($item_instance['design']['fonts']['color'])) {
                        $this->inline_css .= layers_inline_styles('#' . $widget_id . '-' . $column_key, 'color', array('selectors' => array('.heading a', '.heading', 'div.excerpt', 'div.excerpt p'), 'color' => $item_instance['design']['fonts']['color']));
                    }
                    if (!empty($item_instance['design']['fonts']['shadow'])) {
                        $this->inline_css .= layers_inline_styles('#' . $widget_id . '-' . $column_key, 'text-shadow', array('selectors' => array('.heading a', '.heading', 'div.excerpt', 'div.excerpt p'), 'text-shadow' => $item_instance['design']['fonts']['shadow']));
                    }
                    // Set column margin & padding
                    if (!empty($item_instance['design']['advanced']['margin'])) {
                        $this->inline_css .= layers_inline_styles("#{$widget_id}-{$column_key}", 'margin', array('margin' => $item_instance['design']['advanced']['margin']));
                    }
                    if (!empty($item_instance['design']['advanced']['padding'])) {
                        $this->inline_css .= layers_inline_styles("#{$widget_id}-{$column_key}", 'padding', array('padding' => $item_instance['design']['advanced']['padding']));
                    }
                    if (!isset($item_instance['width'])) {
                        $item_instance['width'] = $this->column_defaults['width'];
                    }
                    // Set the button styling
                    $button_size = '';
                    if (function_exists('layers_pro_apply_widget_button_styling')) {
                        $this->inline_css .= layers_pro_apply_widget_button_styling($this, $item_instance, array("#{$widget_id}-{$column_key} .button"));
                        $button_size = $this->check_and_return($item_instance, 'design', 'buttons-size') ? 'btn-' . $this->check_and_return($item_instance, 'design', 'buttons-size') : '';
                    }
                    // Add the correct span class
                    $span_class = 'span-' . $item_instance['width'];
                    $col_no++;
                    $max = 12;
                    $initial_width = $row_width;
                    $item_width = $item_instance['width'];
                    $next_item_width = isset($next_item['width']) ? $next_item['width'] : 0;
                    $row_width += $item_width;
                    if ($max == $row_width) {
                        $first_last_class = 'last';
                        $row_width = 0;
                    } elseif ($max < $next_item_width + $row_width) {
                        $first_last_class = 'last';
                        $row_width = 0;
                    } elseif (0 == $initial_width) {
                        $first_last_class = 'first';
                    } else {
                        $first_last_class = '';
                    }
                    // Set Featured Media
                    $featureimage = $this->check_and_return($item_instance, 'design', 'featuredimage');
                    $featurevideo = $this->check_and_return($item_instance, 'design', 'featuredvideo');
                    // Calculate which cut based on ratio.
                    if (isset($item_instance['design']['imageratios'])) {
                        // Translate Image Ratio into something usable
                        $image_ratio = layers_translate_image_ratios($item_instance['design']['imageratios']);
                        if (!isset($item_instance['width'])) {
                            $item_instance['width'] = 6;
                        }
                        if (4 >= $item_instance['width'] && 'layout-fullwidth' != $this->check_and_return($instance, 'design', 'layout')) {
                            $use_image_ratio = $image_ratio . '-medium';
                        } else {
                            $use_image_ratio = $image_ratio . '-large';
                        }
                    } else {
                        if (4 > $item_instance['width']) {
                            $use_image_ratio = 'medium';
                        } else {
                            $use_image_ratio = 'full';
                        }
                    }
                    $media = layers_get_feature_media($featureimage, $use_image_ratio, $featurevideo);
                    // Set Image Size
                    if (isset($item_instance['design']['featuredimage-size']) && 0 != $item_instance['design']['featuredimage-size'] && '' != $item_instance['design']['featuredimage-size']) {
                        $image_width = $item_instance['design']['featuredimage-size'] . 'px';
                        $this->inline_css .= layers_inline_styles("#{$widget_id}-{$column_key} .media-image img { max-width : {$image_width}; }");
                    }
                    // Get the link array.
                    $link_array = $this->check_and_return_link($item_instance, 'button');
                    $link_href_attr = $link_array['link'] ? 'href="' . esc_url($link_array['link']) . '"' : '';
                    $link_target_attr = '_blank' == $link_array['target'] ? 'target="_blank"' : '';
                    /**
                     * Set Individual Column CSS
                     */
                    $classes = array();
                    $classes[] = 'layers-masonry-column';
                    $classes[] = $this->id_base . '-' . $column_key;
                    $classes[] = $span_class;
                    $classes[] = 'on' == $this->check_and_return($item_instance, 'design', 'background', 'darken') ? 'darken' : '';
                    $classes[] = '' != $first_last_class ? $first_last_class : '';
                    $classes[] = 'list-masonry' == $this->check_and_return($instance, 'design', 'liststyle') ? '' : '';
                    $classes[] = 'column' . ('on' != $this->check_and_return($instance, 'design', 'gutter') ? '-flush' : '');
                    $classes[] = $this->check_and_return($item_instance, 'design', 'advanced', 'customclass');
                    // Apply custom class from design-bar's advanced control.
                    if ($this->check_and_return($item_instance, 'design', 'background', 'image') || '' != $this->check_and_return($item_instance, 'design', 'background', 'color')) {
                        $classes[] = 'content';
                    }
                    if (false != $media) {
                        $classes[] = 'has-image';
                    }
                    $classes = apply_filters('layers_content_widget_item_class', $classes, $this, $item_instance);
                    $classes = implode(' ', $classes);
                    ?>

								<div id="<?php 
                    echo $widget_id;
                    ?>
-<?php 
                    echo $column_key;
                    ?>
" class="<?php 
                    echo esc_attr($classes);
                    ?>
">
									<?php 
                    /**
                     * Set Overlay CSS Classes
                     */
                    $column_inner_classes = array();
                    $column_inner_classes[] = 'media';
                    if (!$this->check_and_return($instance, 'design', 'gutter')) {
                        $column_inner_classes[] = 'no-push-bottom';
                    }
                    if ($this->check_and_return($item_instance, 'design', 'background', 'color')) {
                        if ('dark' == layers_is_light_or_dark($this->check_and_return($item_instance, 'design', 'background', 'color'))) {
                            $column_inner_classes[] = 'invert';
                        }
                    } else {
                        if ($this->check_and_return($instance, 'design', 'background', 'color') && 'dark' == layers_is_light_or_dark($this->check_and_return($instance, 'design', 'background', 'color'))) {
                            $column_inner_classes[] = 'invert';
                        }
                    }
                    $column_inner_classes[] = $this->check_and_return($item_instance, 'design', 'imagealign');
                    $column_inner_classes[] = $this->check_and_return($item_instance, 'design', 'fonts', 'size');
                    $column_inner_classes = implode(' ', $column_inner_classes);
                    ?>

									<div class="<?php 
                    echo $column_inner_classes;
                    ?>
">
										<?php 
                    if (NULL != $media) {
                        ?>
											<div class="media-image <?php 
                        echo isset($item_instance['design']['imageratios']) && 'image-round' == $item_instance['design']['imageratios'] ? 'image-rounded' : '';
                        ?>
">
												<?php 
                        if ($link_array['link']) {
                            ?>
													<a <?php 
                            echo $link_href_attr;
                            ?>
 <?php 
                            echo $link_target_attr;
                            ?>
>
												<?php 
                        }
                        ?>
													<?php 
                        echo $media;
                        ?>
												<?php 
                        if ($link_array['link']) {
                            ?>
													</a>
												<?php 
                        }
                        ?>
											</div>
										<?php 
                    }
                    ?>

										<?php 
                    if ($this->check_and_return($item_instance, 'title') || $this->check_and_return($item_instance, 'excerpt') || $link_array['link'] && $link_array['text']) {
                        ?>
											<div class="media-body <?php 
                        echo isset($item_instance['design']['fonts']['align']) ? $item_instance['design']['fonts']['align'] : '';
                        ?>
">
												<?php 
                        if ($this->check_and_return($item_instance, 'title')) {
                            ?>
													<<?php 
                            echo $this->check_and_return($item_instance, 'design', 'fonts', 'heading-type');
                            ?>
 class="heading">
														<?php 
                            if ($link_array['link']) {
                                ?>
															<a <?php 
                                echo $link_href_attr;
                                ?>
 <?php 
                                echo $link_target_attr;
                                ?>
>
														<?php 
                            }
                            ?>
															<?php 
                            echo $item_instance['title'];
                            ?>
														<?php 
                            if ($link_array['link']) {
                                ?>
															</a>
														<?php 
                            }
                            ?>
													</<?php 
                            echo $this->check_and_return($item_instance, 'design', 'fonts', 'heading-type');
                            ?>
>
												<?php 
                        }
                        ?>
												<?php 
                        if ($this->check_and_return($item_instance, 'excerpt')) {
                            ?>
													<div class="excerpt"><?php 
                            layers_the_content($item_instance['excerpt']);
                            ?>
</div>
												<?php 
                        }
                        ?>
												<?php 
                        if ($link_array['link'] && $link_array['text']) {
                            ?>
													<a <?php 
                            echo $link_href_attr;
                            ?>
 class="button <?php 
                            echo $button_size;
                            ?>
" <?php 
                            echo $link_target_attr;
                            ?>
>
														<?php 
                            echo $link_array['text'];
                            ?>
													</a>
												<?php 
                        }
                        ?>
											</div>
										<?php 
                    }
                    ?>
									</div>
								</div>
							<?php 
                }
                ?>
						</div><!-- /row -->
					</div>
				<?php 
            }
            do_action('layers_after_content_widget_inner', $this, $instance);
            // Print the Inline Styles for this Widget
            $this->print_inline_css();
            if ('list-masonry' == $this->check_and_return($instance, 'design', 'liststyle')) {
                ?>

					<script type='text/javascript'>
						jQuery(function($){
							$('#<?php 
                echo $widget_id;
                ?>
').find('.list-masonry .grid').layers_masonry({
								itemSelector: '.layers-masonry-column',
								layoutMode: 'masonry',
								gutter: <?php 
                echo isset($instance['design']['gutter']) ? 20 : 0;
                ?>
,
							});
						});
					</script>

				<?php 
            }
            // masonry trigger
            ?>
			</div>
		<?php 
        }
Exemple #6
0
        /**
         *  Widget front end display
         */
        function widget($args, $instance)
        {
            global $wp_customize;
            $this->backup_inline_css();
            // Turn $args array into variables.
            extract($args);
            // Use defaults if $instance is empty.
            if (empty($instance) && !empty($this->defaults)) {
                $instance = wp_parse_args($instance, $this->defaults);
            }
            // Mix in new/unset defaults on every instance load (NEW)
            $instance = $this->apply_defaults($instance);
            // Enqueue Masonry if need be
            if ('list-masonry' == $this->check_and_return($instance, 'design', 'liststyle')) {
                wp_enqueue_script(LAYERS_THEME_SLUG . '-layers-masonry-js');
            }
            // Set the span class for each column
            if ('list-list' == $instance['design']['liststyle']) {
                $col_count = 1;
                $span_class = 'span-12';
            } else {
                if (isset($instance['design']['columns'])) {
                    $col_count = str_ireplace('columns-', '', $instance['design']['columns']);
                    $span_class = 'span-' . 12 / $col_count;
                } else {
                    $col_count = 3;
                    $span_class = 'span-4';
                }
            }
            // Apply Styling
            $this->inline_css .= layers_inline_styles('#' . $widget_id, 'background', array('background' => $instance['design']['background']));
            $this->inline_css .= layers_inline_styles('#' . $widget_id, 'color', array('selectors' => array('.section-title .heading', '.section-title div.excerpt'), 'color' => $instance['design']['fonts']['color']));
            $this->inline_css .= layers_inline_styles('#' . $widget_id, 'background', array('selectors' => array('.thumbnail-body'), 'background' => array('color' => $this->check_and_return($instance, 'design', 'column-background-color'))));
            // Apply Button Styling.
            $button_size = '';
            if (function_exists('layers_pro_apply_widget_button_styling')) {
                // Apply Layers Pro Button Styling.
                $this->inline_css .= layers_pro_apply_widget_button_styling($this, $instance, array("#{$widget_id} .thumbnail-body a.button"));
                $button_size = $this->check_and_return($instance, 'design', 'buttons-size') ? 'btn-' . $this->check_and_return($instance, 'design', 'buttons-size') : '';
            } else {
                // Apply Button Styling.
                $this->inline_css .= layers_inline_button_styles("#{$widget_id}", 'button', array('selectors' => array('.thumbnail-body a.button'), 'button' => $this->check_and_return($instance, 'design', 'buttons')));
            }
            // Set Image Sizes
            if (isset($instance['design']['imageratios'])) {
                // Translate Image Ratio
                $image_ratio = layers_translate_image_ratios($instance['design']['imageratios']);
                if ('layout-boxed' == $this->check_and_return($instance, 'design', 'layout') && $col_count > 2) {
                    $use_image_ratio = $image_ratio . '-medium';
                } elseif ('layout-boxed' != $this->check_and_return($instance, 'design', 'layout') && $col_count > 3) {
                    $use_image_ratio = $image_ratio . '-large';
                } else {
                    $use_image_ratio = $image_ratio . '-large';
                }
            } else {
                $use_image_ratio = 'large';
            }
            // Begin query arguments
            $query_args = array();
            if (get_query_var('paged')) {
                $query_args['paged'] = get_query_var('paged');
            } else {
                if (get_query_var('page')) {
                    $query_args['paged'] = get_query_var('page');
                } else {
                    $query_args['paged'] = 1;
                }
            }
            $query_args['post_type'] = $this->post_type;
            $query_args['posts_per_page'] = $instance['posts_per_page'];
            if (isset($instance['order'])) {
                $decode_order = json_decode($instance['order'], true);
                if (is_array($decode_order)) {
                    foreach ($decode_order as $key => $value) {
                        $query_args[$key] = $value;
                    }
                }
            }
            // Do the special taxonomy array()
            if (isset($instance['category']) && '' != $instance['category'] && 0 != $instance['category']) {
                $query_args['tax_query'] = array(array("taxonomy" => $this->taxonomy, "field" => "id", "terms" => $instance['category']));
            } elseif (!isset($instance['hide_category_filter'])) {
                $terms = get_terms($this->taxonomy);
            }
            // if we haven't selected which category to show, let's load the $terms for use in the filter
            // Do the WP_Query
            $post_query = new WP_Query($query_args);
            // Set the meta to display
            global $layers_post_meta_to_display;
            $layers_post_meta_to_display = array();
            if (isset($instance['show_dates'])) {
                $layers_post_meta_to_display[] = 'date';
            }
            if (isset($instance['show_author'])) {
                $layers_post_meta_to_display[] = 'author';
            }
            if (isset($instance['show_categories'])) {
                $layers_post_meta_to_display[] = 'categories';
            }
            if (isset($instance['show_tags'])) {
                $layers_post_meta_to_display[] = 'tags';
            }
            // Apply the advanced widget styling
            $this->apply_widget_advanced_styling($widget_id, $instance);
            /**
             * Generate the widget container class
             */
            $widget_container_class = array();
            $widget_container_class[] = 'widget';
            $widget_container_class[] = 'layers-post-widget';
            $widget_container_class[] = 'content-vertical-massive';
            $widget_container_class[] = 'clearfix';
            $widget_container_class[] = 'on' == $this->check_and_return($instance, 'design', 'background', 'darken') ? 'darken' : '';
            $widget_container_class[] = $this->check_and_return($instance, 'design', 'advanced', 'customclass');
            // Apply custom class from design-bar's advanced control.
            $widget_container_class[] = $this->get_widget_spacing_class($instance);
            $widget_container_class = apply_filters('layers_post_widget_container_class', $widget_container_class, $this, $instance);
            $widget_container_class = implode(' ', $widget_container_class);
            // Custom Anchor
            echo $this->custom_anchor($instance);
            ?>

			<div id="<?php 
            echo esc_attr($widget_id);
            ?>
" class="<?php 
            echo esc_attr($widget_container_class);
            ?>
" <?php 
            $this->selective_refresh_atts($args);
            ?>
>

				<?php 
            do_action('layers_before_post_widget_inner', $this, $instance);
            ?>

				<?php 
            if ('' != $this->check_and_return($instance, 'title') || '' != $this->check_and_return($instance, 'excerpt')) {
                ?>
					<div class="container clearfix">
						<?php 
                /**
                 * Generate the Section Title Classes
                 */
                $section_title_class = array();
                $section_title_class[] = 'section-title clearfix';
                $section_title_class[] = $this->check_and_return($instance, 'design', 'fonts', 'size');
                $section_title_class[] = $this->check_and_return($instance, 'design', 'fonts', 'align');
                $section_title_class[] = $this->check_and_return($instance, 'design', 'background', 'color') && 'dark' == layers_is_light_or_dark($this->check_and_return($instance, 'design', 'background', 'color')) ? 'invert' : '';
                $section_title_class = implode(' ', $section_title_class);
                ?>
						<div class="<?php 
                echo $section_title_class;
                ?>
">
							<?php 
                if ('' != $this->check_and_return($instance, 'title')) {
                    ?>
								<<?php 
                    echo $this->check_and_return($instance, 'design', 'fonts', 'heading-type');
                    ?>
 class="heading">
									<?php 
                    echo $instance['title'];
                    ?>
								</<?php 
                    echo $this->check_and_return($instance, 'design', 'fonts', 'heading-type');
                    ?>
>
							<?php 
                }
                ?>
							<?php 
                if ('' != $this->check_and_return($instance, 'excerpt')) {
                    ?>
								<div class="excerpt"><?php 
                    echo layers_the_content($instance['excerpt']);
                    ?>
</div>
							<?php 
                }
                ?>
						</div>
					</div>
				<?php 
            }
            ?>
				<?php 
            if ($post_query->have_posts()) {
                ?>
					<div class="<?php 
                echo $this->get_widget_layout_class($instance);
                ?>
 <?php 
                echo $this->check_and_return($instance, 'design', 'liststyle');
                ?>
">
						<div class="grid">
								<?php 
                while ($post_query->have_posts()) {
                    $post_query->the_post();
                    if ('list-list' == $instance['design']['liststyle']) {
                        ?>
										<article id="post-<?php 
                        the_ID();
                        ?>
" class="clearfix push-bottom-large">
											<?php 
                        if (isset($instance['show_titles'])) {
                            ?>
												<header class="section-title large">
													<h1 class="heading"><a href="<?php 
                            the_permalink();
                            ?>
"><?php 
                            the_title();
                            ?>
</a></h1>
												</header>
											<?php 
                        }
                        ?>

											<?php 
                        // Layers Featured Media );
                        if (isset($instance['show_media'])) {
                            echo layers_post_featured_media(array('postid' => get_the_ID(), 'wrap_class' => 'thumbnail push-bottom span-5 column' . ('image-round' == $this->check_and_return($instance, 'design', 'imageratios') ? ' image-rounded' : ''), 'size' => $use_image_ratio));
                        }
                        // if Show Media
                        ?>

											<?php 
                        if (isset($instance['show_excerpts']) || $instance['show_call_to_action'] || !empty($layers_post_meta_to_display)) {
                            ?>
												<div class="column span-7">
													<?php 
                            if (isset($instance['show_excerpts'])) {
                                if (isset($instance['excerpt_length']) && '' == $instance['excerpt_length']) {
                                    echo '<div class="copy push-bottom">';
                                    the_content();
                                    echo '</div>';
                                } else {
                                    if (isset($instance['excerpt_length']) && 0 != $instance['excerpt_length'] && strlen(get_the_excerpt()) > $instance['excerpt_length']) {
                                        echo '<div class="copy push-bottom">' . substr(get_the_excerpt(), 0, $instance['excerpt_length']) . '&#8230;</div>';
                                    } else {
                                        if ('' != get_the_excerpt()) {
                                            echo '<div class="copy push-bottom">' . get_the_excerpt() . '</div>';
                                        }
                                    }
                                }
                            }
                            ?>

													<?php 
                            layers_post_meta(get_the_ID(), $layers_post_meta_to_display, 'footer', 'meta-info push-bottom ' . ('' != $this->check_and_return($instance, 'design', 'column-background-color') && 'dark' == layers_is_light_or_dark($this->check_and_return($instance, 'design', 'column-background-color')) ? 'invert' : ''));
                            ?>

													<?php 
                            if (isset($instance['show_call_to_action']) && $this->check_and_return($instance, 'call_to_action')) {
                                ?>
														<p><a href="<?php 
                                the_permalink();
                                ?>
" class="button <?php 
                                echo $button_size;
                                ?>
"><?php 
                                echo $instance['call_to_action'];
                                ?>
</a></p>
													<?php 
                            }
                            // show call to action
                            ?>
												</div>
											<?php 
                        }
                        ?>
										</article>
									<?php 
                    } else {
                        /**
                         * Set Individual Column CSS
                         */
                        $post_column_class = array();
                        $post_column_class[] = 'layers-masonry-column';
                        $post_column_class[] = 'thumbnail';
                        $post_column_class[] = 'list-masonry' == $this->check_and_return($instance, 'design', 'liststyle') ? 'no-gutter' : '';
                        $post_column_class[] = 'column' . ('on' != $this->check_and_return($instance, 'design', 'gutter') ? '-flush' : '');
                        $post_column_class[] = $span_class;
                        $post_column_class[] = 'overlay' == $this->check_and_return($instance, 'text_style') ? 'with-overlay' : '';
                        $post_column_class[] = '' != $this->check_and_return($instance, 'design', 'column-background-color') && 'dark' == layers_is_light_or_dark($this->check_and_return($instance, 'design', 'column-background-color')) ? 'invert' : '';
                        $post_column_class = implode(' ', $post_column_class);
                        ?>

										<article class="<?php 
                        echo $post_column_class;
                        ?>
" data-cols="<?php 
                        echo $col_count;
                        ?>
">
											<?php 
                        // Layers Featured Media
                        if (isset($instance['show_media'])) {
                            echo layers_post_featured_media(array('postid' => get_the_ID(), 'wrap_class' => 'thumbnail-media' . ('image-round' == $this->check_and_return($instance, 'design', 'imageratios') ? ' image-rounded' : ''), 'size' => $use_image_ratio, 'hide_href' => false));
                        }
                        // if Show Media
                        ?>
											<?php 
                        if (isset($instance['show_titles']) || isset($instance['show_excerpts'])) {
                            ?>
												<div class="thumbnail-body">
													<div class="overlay">
														<?php 
                            if (isset($instance['show_titles'])) {
                                ?>
															<header class="article-title">
																<h4 class="heading"><a href="<?php 
                                the_permalink();
                                ?>
"><?php 
                                the_title();
                                ?>
</a></h4>
															</header>
														<?php 
                            }
                            ?>
														<?php 
                            if (isset($instance['show_excerpts'])) {
                                if (isset($instance['excerpt_length']) && '' == $instance['excerpt_length']) {
                                    echo '<div class="excerpt">';
                                    the_content();
                                    echo '</div>';
                                } else {
                                    if (isset($instance['excerpt_length']) && 0 != $instance['excerpt_length'] && strlen(get_the_excerpt()) > $instance['excerpt_length']) {
                                        echo '<div class="excerpt">' . substr(get_the_excerpt(), 0, $instance['excerpt_length']) . '&#8230;</div>';
                                    } else {
                                        if ('' != get_the_excerpt()) {
                                            echo '<div class="excerpt">' . get_the_excerpt() . '</div>';
                                        }
                                    }
                                }
                            }
                            ?>
														<?php 
                            if ('overlay' != $this->check_and_return($instance, 'text_style')) {
                                ?>
															<?php 
                                layers_post_meta(get_the_ID(), $layers_post_meta_to_display, 'footer', 'meta-info ' . ('' != $this->check_and_return($instance, 'design', 'column-background-color') && 'dark' == layers_is_light_or_dark($this->check_and_return($instance, 'design', 'column-background-color')) ? 'invert' : ''));
                                ?>
														<?php 
                            }
                            // Don't show meta if we have chosen overlay
                            ?>
														<?php 
                            if (isset($instance['show_call_to_action']) && $this->check_and_return($instance, 'call_to_action')) {
                                ?>
															<a href="<?php 
                                the_permalink();
                                ?>
" class="button <?php 
                                echo $button_size;
                                ?>
"><?php 
                                echo $instance['call_to_action'];
                                ?>
</a>
														<?php 
                            }
                            // show call to action
                            ?>
													</div>
												</div>
											<?php 
                        }
                        // if show titles || show excerpt
                        ?>
										</article>
									<?php 
                    }
                    // if list-list == liststyle
                    ?>
								<?php 
                }
                // while have_posts
                ?>
						</div><!-- /row -->
					</div>
				<?php 
            }
            // if have_posts
            ?>
				<?php 
            if (isset($instance['show_pagination'])) {
                ?>
					<div class="container">
						<?php 
                layers_pagination(array('query' => $post_query), 'div', 'pagination clearfix');
                ?>
					</div>
				<?php 
            }
            ?>

				<?php 
            do_action('layers_after_post_widget_inner', $this, $instance);
            // Print the Inline Styles for this Widget
            $this->print_inline_css();
            if ('list-masonry' == $this->check_and_return($instance, 'design', 'liststyle')) {
                ?>
					<script type='text/javascript'>
						jQuery(function($){
							$('#<?php 
                echo $widget_id;
                ?>
').find('.list-masonry .grid').layers_masonry({
								itemSelector: '.layers-masonry-column',
								gutter: <?php 
                echo isset($instance['design']['gutter']) ? 20 : 0;
                ?>
,
							});
						});
					</script>
				<?php 
            }
            // masonry trigger
            ?>

			</div>

			<?php 
            // Reset WP_Query
            wp_reset_postdata();
        }