Docs

[MB]

Hi,

We would like a featured post slider on our archive page https://mbguiding.ca/trip-reports/ but it places it fully across the website width above the sidebar. Can we place it beside the sidebar?

Thanks, MB

Vancouver Island Hiking Guide

[Darshana]

Hi there,

Thanks for writing in! Can you please enable post slider, so that we should be able to provide a JavaScript solution to move it.

Thanks!

[MB]

Can we make an updated post stick to the first position in archive?

[MB]

Another issue: post slider is displaying the original published date and not the last updated. Any way to organize the archived posts by last updated?

[Paul R]

Hi,

To achieve that, create file wp-index.php in wp-content/themes/x-child/framework/views/ethos
and copy the code below into that file

<?php

// =============================================================================
// VIEWS/ETHOS/WP-INDEX.PHP
// -----------------------------------------------------------------------------
// Index page output for Ethos.
// =============================================================================

$is_filterable_index = is_home() && x_get_option( 'x_ethos_filterable_index_enable' ) == '1';

?>

<?php get_header(); ?>

  <div class="x-container max width main">

    

    <div class="offset cf">
      <div class="<?php x_main_content_class(); ?>" role="main">
        <?php x_get_view( 'ethos', '_post', 'slider' ); ?>
        <?php if ( $is_filterable_index ) : ?>
          <?php x_get_view( 'ethos', '_index' ); ?>
        <?php else : ?>
          <?php x_get_view( 'global', '_index' ); ?>
        <?php endif; ?>

      </div>

      <?php get_sidebar(); ?>

    </div>
  </div>

<?php get_footer(); ?>

Then after that, create another file _post-slider.php in wp-content/themes/x-child/framework/views/ethos
and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/ETHOS/_POST-SLIDER.PHP
// -----------------------------------------------------------------------------
// Outputs the post slider that appears at the top of the blog.
// =============================================================================

$is_blog    = is_home();
$is_archive = is_category() || is_tag();

if ( $is_blog || $is_archive ) :

  if ( $is_blog ) {
    $info = array( 'blog', NULL, NULL, '_x_ethos_post_slider_blog_display' );
  } elseif ( $is_archive ) {
    $type = ( is_category() ) ? 'cat' : 'tag_id';
    $info = array( 'archive', $type, get_queried_object_id(), '_x_ethos_post_slider_archives_display' );
  }

  $slider_enabled = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_enable' ) == '1';
  $count          = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_count' );
  $display        = x_get_option( 'x_ethos_post_slider_' . $info[0] . '_display' );

  $blog_slider_is_enabled    = $slider_enabled && $is_blog;
  $archive_slider_is_enabled = $slider_enabled && $is_archive;
  $is_enabled                = $blog_slider_is_enabled || $archive_slider_is_enabled;

  switch ( $display ) {
    case 'most-commented' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'comment_count',
        'order'          => 'DESC',
        $info[1]         => $info[2]
      );
      break;
    case 'random' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'rand',
        $info[1]         => $info[2]
      );
      break;
    case 'featured' :
      $args = array(
        'post_type'      => 'post',
        'posts_per_page' => $count,
        'orderby'        => 'date',
        'meta_key'       => $info[3],
        'meta_value'     => 'on',
        'ignore_sticky_posts'	=> true
      );
      break;
  }

  ?>

  <?php if ( $is_enabled ) : ?>

    <div class="x-flexslider x-post-slider">
      <ul class="x-slides">

        <?php $wp_query = new WP_Query( $args ); ?>

        <?php if ( $wp_query->have_posts() ) : ?>
          <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

            <li class="x-slide">
              <article <?php post_class( 'x-post-slider-entry' ); ?> style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
                <a href="<?php the_permalink(); ?>">
                  <div class="cover">
                    <div class="middle">
                      <span class="featured-meta"><?php echo x_ethos_post_categories(); ?> / <?php echo get_the_modified_date( 'F j, Y' ); ?></span>
                      <h2 class="h-featured"><span><?php x_the_alternate_title(); ?></span></h2>
                      <span class="featured-view"><?php _e( 'View Post', '__x__' ); ?></span>
                    </div>
                  </div>
                </a>
              </article>
            </li>

          <?php endwhile; ?>
        <?php endif; ?>

        <?php wp_reset_query(); ?>

      </ul>
    </div>

    <script>
      jQuery(window).load(function() {
        jQuery('.x-post-slider').flexslider({
          controlNav   : false,
          selector     : '.x-slides > li',
          prevText     : '<i class="x-icon-chevron-left" data-x-icon=""></i>',
          nextText     : '<i class="x-icon-chevron-right" data-x-icon=""></i>',
          animation    : 'fade',
          smoothHeight : true,
          slideshow    : true
        });
      });
    </script>

  <?php endif; ?>

<?php endif; ?>

Hope that helps

[MB]

Thanks!

We need to adjust the height of featured post slider on archive page because it’s way too short.

Cheers, MB

[Christopher]

Hi there,

Please enable post slider so we can help you with this.

Thanks.

[MB]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.archive .x-post-slider .x-post-slider-entry {
    padding-bottom: 325px !IMPORTANT;
}
.archive .x-post-slider, li.x-slide.flex-active-slide {
    height: 325px !important;
}

Hope it helps.
Hope that helps.

[MB]

Ok that fixes hight of slider.

What is css fix to make the gap under the header same as on single posts? The gap on archive is too tall.

Thanks, MB

[Christopher]

Hi there,

Please find this code :

header.x-header-landmark.x-container.max.width {
    padding-bottom: 0;
}

And update it to :

header.x-header-landmark.x-container.max.width {
    padding: 0;
}

Hope it helps.

[MB]

[RESOLVED] Thanks so much Themeco! 😀

[Christopher]

You’re welcome.

[Author]

Posts