<div <?php post_class(); ?>  id="post-<?php the_ID(); ?>">
<article class="grid-container">
    
<?php if ( has_post_format( 'gallery' )) { ?>
<?php $galleryimages = get_post_meta( get_the_id(), 'ombregalleryimages', true ); ?>
<?php $galleryautoplay = get_post_meta( get_the_id(), 'ombreactivateauto', true ); ?>
<?php $galleryautoplayduration = get_post_meta( get_the_id(), 'ombreautoplaypause', true ); ?>
<?php if (!empty($galleryimages)) { ?>
<div id="ombre-carousel-<?php the_ID(); ?>" class="owl-carousel grid-carousel">
    <?php foreach ($galleryimages as $image => $link) { ?>
    <div class="ombre-carousel">
        <a href="<?php the_permalink(); ?>">
            <?php $imageurl = wp_get_attachment_image_src( $image, 'large' ); ?>
            <img src="<?php echo esc_js($imageurl['0']); ?>" alt="">
        </a>
    </div>
    <?php } ?>
</div>
<?php } ?>    
<div class="grid-content">
    <div class="postdate">
        <a href="<?php the_permalink(); ?>">
            <?php echo esc_attr(the_time(get_option('date_format'))); ?>
        </a>
    </div>
    <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
    <?php the_excerpt(); ?>
</div>    
<script type="text/javascript">
    jQuery("#ombre-carousel-<?php the_ID(); ?>").css('opacity', 0);
    jQuery(window).on('load', function () {
        jQuery("#ombre-carousel-<?php the_ID(); ?>").owlCarousel({
            <?php if (is_rtl()) { echo esc_js("rtl:true,"); } ?>
            items: 1,
            autoplay: <?php if ($galleryautoplay == 'on') { echo esc_js('true'); } else { echo esc_js('false'); } ?>,
            autoplayTimeout: <?php if(!empty($galleryautoplayduration)) { echo esc_js($galleryautoplayduration); } else { echo esc_js('4'); } ?>000,
            autoplayHoverPause: true,
            dots: true,
            autoHeight: true,
            <?php if (!is_rtl()) { ?>
            margin: 100,
            <?php } else { ?>
            margin: 0,
            <?php } ?>
            mouseDrag: false,
            smartSpeed: 800,
            navText: ['', ''],
            nav: false,
            loop: true,
            lazyLoad: false<?php if (!is_rtl()) { ?>,
            animateIn: 'zoomIn',
            animateOut: 'zoomOut'
            <?php } ?>
        });
        jQuery("#ombre-carousel-<?php the_ID(); ?>").css('opacity', 1);
    });
    </script>
<?php } ?>
    
<?php if ( has_post_format( 'quote' )) { ?>
<?php $quote = get_post_meta( get_the_id(), 'ombrequote', true ); ?>
<?php $quotename = get_post_meta( get_the_id(), 'ombrequotename', true ); ?>
<div class="grid-content grid-quote">
    <div class="postdate">
        <a href="<?php the_permalink(); ?>">
            <?php echo esc_attr(the_time(get_option('date_format'))); ?>
        </a>
    </div>
    <?php if (!empty($quote)) { ?>
    <h4><a href="<?php the_permalink(); ?>"><?php echo esc_attr($quote); ?></a></h4>
    <?php } ?>
    <?php if (!empty($quotename)) { ?>
    <p class="grid-quote-cite"><span>―</span> <?php echo esc_attr($quotename); ?></p>
    <?php } ?>
</div>  
<?php } ?>
    
<?php if ( has_post_format( 'video' )) { ?>
<?php $videoid = get_post_meta( get_the_id(), 'ombrevideoid', true ); ?>
<?php $videothumb = get_post_meta( get_the_id(), 'ombrevideothumb', true ); ?>
<?php $embed = get_post_meta( get_the_id(), 'ombreembed', true ); ?>
<?php if (!empty($videoid)) { ?>    
    <div class="flex-video" data-pe-videoid="<?php echo esc_attr($videoid); ?>" <?php if (!empty($videothumb)) { ?>data-thumb="<?php echo esc_attr($videothumb); ?>"<?php } ?>></div>
<?php } else { ?> 
<?php if (!empty($embed)) { ?>    
    <div class="ombre-flex-video"><?php echo balanceTags($embed); ?></div>
<?php } ?>    
<?php } ?>
<div class="grid-content">
    <div class="postdate">
        <a href="<?php the_permalink(); ?>">
            <?php echo esc_attr(the_time(get_option('date_format'))); ?>
        </a>
    </div>
    <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
    <?php the_excerpt(); ?>
</div>     
<?php } ?>    

<?php if ((has_post_thumbnail()) && (get_post_format() === false)) {
    $thumb_id = get_post_thumbnail_id();
    $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'large', true);
    $thumb_url = $thumb_url_array[0];
?>
<div class="grid-img">
    <a href="<?php the_permalink(); ?>" class="o-gallery link">
        <img src="<?php echo esc_url($thumb_url); ?>" alt="" />
    </a>
</div>
<div class="grid-content">
    <div class="postdate">
        <a href="<?php the_permalink(); ?>">
            <?php echo esc_attr(the_time(get_option('date_format'))); ?>
        </a>
    </div>
    <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
    <?php the_excerpt(); ?>
</div>     
<?php } ?> 
    
<?php if ((!has_post_thumbnail()) && (get_post_format() === false)) { ?>
<div class="grid-content">
    <div class="postdate">
        <a href="<?php the_permalink(); ?>">
            <?php echo esc_attr(the_time(get_option('date_format'))); ?>
        </a>
    </div>
    <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
    <?php the_excerpt(); ?>
</div>     
<?php } ?>     
    
</article>
</div>