<?php
// Add the home blog custom loop
add_action( 'beans_main_append_markup', 'hg_home_posts_loop' );

function hg_home_posts_loop() { ?>

  <?php query_posts('showposts=1&post_type=post'); ?>

  <div class="tm-posts-wrap">
    <h2 class="tm-double-border uk-text-center"><span>Recent Blog Posts</span></h2>
    <div class="uk-grid uk-grid-collapse">
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php

          $thumb_id = get_post_thumbnail_id();
          $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
          $thumb_width = $thumb_url_array[1];
          $thumb_height = $thumb_url_array[2];

          $resized_src = beans_edit_image( $thumb_url_array[0], array(
            'resize' => array( 720, 500, array( 'center', 'top' ) )
          ) );
        ?>
        <div class="uk-width-1-1 uk-width-medium-2-3">
          <div class="tm-featured-post">
            <figure class="uk-overlay">
              <img src="<?php echo $resized_src; ?>" />
              <figcaption class="uk-overlay-panel uk-overlay-bottom uk-overlay-background uk-contrast uk-width-3-4">
                <h3 class="uk-text-uppercase"><?php the_title() ;?></h3>
                <?php echo wp_trim_words( get_the_excerpt(), 140, '...' ); ?> <a href="<?php echo get_the_permalink(); ?>">read more</a>
              </figcaption>
              <a class="uk-position-cover" href="<?php echo get_permalink(); ?>" title="<?php esc_attr( get_the_title() ); ?>"></a>
            </figure>
          </div>
        </div>
      <?php endwhile; else: ?>

        <p>Sorry, there are no posts to display</p>

      <?php endif; ?>

      <?php rewind_posts(); ?>

      <?php query_posts('showposts=2&offset=1&post_type=post'); ?>
      <div class="uk-width-1-1 uk-width-medium-1-3">
        <div>
          <div class="uk-grid uk-grid-collapse">
              <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <?php

                  $thumb_id = get_post_thumbnail_id();
                  $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'full', true);
                  $thumb_width = $thumb_url_array[1];
                  $thumb_height = $thumb_url_array[2];

                  $resized_src = beans_edit_image( $thumb_url_array[0], array(
                    'resize' => array( 400, 250, array( 'center', 'top' ) )
                  ) );
                ?>
                  <div class="tm-sub-item uk-width-small-1-2 uk-width-medium-1-1">
                    <figure class="uk-overlay uk-animation-hover">
                      <img src="<?php echo $resized_src; ?>" />
                      <figcaption class="uk-overlay-panel uk-overlay-bottom uk-overlay-background uk-animation-slide-right">
                        <h3 class="uk-text-uppercase"><a href="<?php echo get_the_permalink(); ?>"><?php echo wp_trim_words( get_the_title(), 4, '...' ); ?></a></h3>
                      </figcaption>
                      <a class="uk-position-cover" href="<?php echo get_permalink(); ?>" title="<?php esc_attr( get_the_title() ); ?>"></a>
                    </figure>
                </div>
              <?php endwhile; ?>
          </div>
        </div>
    </div>

    <?php else: ?>

        <p>Sorry, there are no posts to display</p>

      <?php endif; ?>
    </div>
  </div>
<?php }