Docs

[Krishna K]

For a website I am working on http://www.benschopdetachering.nl I am trying to use the Ethos Stack with Carousel functionality. Because this will be a static website I would like to Use the Carousel only for Pages and no Posts.
I already tried some instructions I found regarding Carousel Modifications https://theme.co/x/member/forums/topic/ethos-carousel-modifactions/ and this link https://theme.co/x/member/forums/topic/ethos-post-carousel-in-integrity-2/page/1/#post-128567 I think it almost works. I already installed a Child, edited the _post-carousel.php but Now I cannot choose the carousel option within the page . What am I doing wrong and what do I need to do more?

With Regards,
Krishna Kurvers
from
Rode Rups

[Rad]

Hi Krishna,

Thanks for writing in.

Your site is currently not using X theme and I’d like to check what you’re currently working on.

Please note that carousel option is only available if your stack is on ethos. Please provide your admin login credentials in private reply.

Thanks!

[Krishna K]

This reply has been marked as private.

[Zeshan]

Hi Krishna,

If you wish to show featured pages in your post carousel, please remove the code from previous threads and follow these instructions. As the featured post carousel option is only available in Posts, you’ll need to manually add it for your pages.

Step 1: Copy the file wp-content/themes/x/framework/views/ethos/_post-carousel.php in your child theme’s folder /framework/views/ethos/, open the file in a text editor and replace entire code with following:

<?php

// =============================================================================
// VIEWS/ETHOS/_POST-CAROUSEL.PHP
// -----------------------------------------------------------------------------
// Outputs the post carousel that appears at the top of the masthead.
// =============================================================================

GLOBAL $post_carousel_entry_id;

$post_carousel_entry_id = get_the_ID();

$is_enabled = x_get_option( 'x_ethos_post_carousel_enable', '' ) == '1';
$count      = x_get_option( 'x_ethos_post_carousel_count' );
$display    = x_get_option( 'x_ethos_post_carousel_display' );

switch ( $display ) {
  case 'most-commented' :
    $args = array(
      'post_type'      => 'page',
      'posts_per_page' => $count,
      'orderby'        => 'comment_count',
      'order'          => 'DESC'
    );
    break;
  case 'random' :
    $args = array(
      'post_type'      => 'page',
      'posts_per_page' => $count,
      'orderby'        => 'rand'
    );
    break;
  case 'featured' :
    $args = array(
      'post_type'      => 'page',
      'posts_per_page' => $count,
      'orderby'        => 'date',
      'meta_key'       => 'x_ethos_post_carousel_display',
      'meta_value'     => 'on'
    );
    break;
}

?>

<?php if ( $is_enabled ) : ?>

  <ul class="x-post-carousel unstyled">

    <?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-post-carousel-item">
          <?php x_ethos_entry_cover( 'post-carousel' ); ?>
        </li>

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

    <?php wp_reset_query(); ?>

    <script>

    jQuery(document).ready(function() {
      jQuery('.x-post-carousel').slick({
        speed          : 500,
        slide          : 'li',
        slidesToShow   : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_large', '5' ); ?>,
        slidesToScroll : 1,
        responsive     : [
          { breakpoint : 1500, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_large', '4' ); ?> } },
          { breakpoint : 1200, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_medium', '3' ); ?> } },
          { breakpoint : 979,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_small', '2' ); ?> } },
          { breakpoint : 550,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_small', '1' ); ?> } }
        ]
      });
    });

    </script>

  </ul>

<?php endif; ?>

Step 2: If you select Featured under your Customizer settings for post carousel, you’ll need to manually add custom field to your pages. To do that, simply add x_ethos_post_carousel_display custom field with the value on in each of your page that you want to display as featured in the post carousel (see: http://prntscr.com/6f01p9). In case the “Custom Fields” section isn’t visible for you, you can enable it under Screen Options.

That’s it.

Hope this helps. 🙂

Thank you.

[Krishna K]

Hello X Support,

YES, Thank You. This Part works correctly now. But I still get a warning message in the front if you Hover over the Page image. Is it possibel NOT to show Author, Date, Category?

with Regards,
Krishna Kurvers
from Rode Rups

[Thai]

Hi There,
To achieve this, try adding following CSS under Appearance > Customize > Custom > CSS:

.x-post-carousel.unstyled .entry-cover:hover .h-entry-cover {
top: calc(100% - 4em);
}
.x-post-carousel-meta {
display: none;
}

Hope it helps.

[gahoo]

I am interested in this functionality also – does this fix continue to also allow posts to appear in the carousel?

[Christian]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do, we’ll be happy to provide you with a response once we have a better understanding of the situation.

[gahoo]

Sorry for the vagueness. I’d simply like to be able to send both posts (default behavior), and pages, to the “Post Carousel Display” in the ethos stack.

[Thai]

Hi @Gahoo,
Thanks for updating the thread.
On Step 1: please use this following code instead:

<?php

// =============================================================================
// VIEWS/ETHOS/_POST-CAROUSEL.PHP
// -----------------------------------------------------------------------------
// Outputs the post carousel that appears at the top of the masthead.
// =============================================================================

GLOBAL $post_carousel_entry_id;

$post_carousel_entry_id = get_the_ID();

$is_enabled = x_get_option( 'x_ethos_post_carousel_enable', '' ) == '1';
$count      = x_get_option( 'x_ethos_post_carousel_count' );
$display    = x_get_option( 'x_ethos_post_carousel_display' );

switch ( $display ) {
  case 'most-commented' :
    $args = array(
      'post_type'      => array('page', 'post'),
      'posts_per_page' => $count,
      'orderby'        => 'comment_count',
      'order'          => 'DESC'
    );
    break;
  case 'random' :
    $args = array(
      'post_type'      => array('page', 'post'),
      'posts_per_page' => $count,
      'orderby'        => 'rand'
    );
    break;
  case 'featured' :
    $args = array(
      'post_type'      => array('page', 'post'),
      'posts_per_page' => $count,
      'orderby'        => 'date',
      'meta_key'       => 'x_ethos_post_carousel_display',
      'meta_value'     => 'on'
    );
    break;
}

?>

<?php if ( $is_enabled ) : ?>

  <ul class="x-post-carousel unstyled">

    <?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-post-carousel-item">
          <?php x_ethos_entry_cover( 'post-carousel' ); ?>
        </li>

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

    <?php wp_reset_query(); ?>

    <script>

    jQuery(document).ready(function() {
      jQuery('.x-post-carousel').slick({
        speed          : 500,
        slide          : 'li',
        slidesToShow   : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_large', '5' ); ?>,
        slidesToScroll : 1,
        responsive     : [
          { breakpoint : 1500, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_large', '4' ); ?> } },
          { breakpoint : 1200, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_medium', '3' ); ?> } },
          { breakpoint : 979,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_small', '2' ); ?> } },
          { breakpoint : 550,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_small', '1' ); ?> } }
        ]
      });
    });

    </script>

  </ul>

<?php endif; ?>

Hope it helps.

[Bhakti]

Hi! I followed steps 1 & 2 mentioned above, to use pages instead of posts in the Ethos carousel. It worked like a charm until I tried to change the number of featured carousel items from four to three in the Customizer. Now all I see is blank/white where the carousel used to be. I tried taking the php out from the child theme, putting it back in, turning the custom field on and off, but no dice.

I’ll add my login details to another post so you can login and go see, the site is in development so not visible online.

Thanks so much!

[Bhakti]

This reply has been marked as private.

[Rue Nel]

Hello @Bhakti,

Thanks for the information!

We would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme setup, then you can do the steps 1 and 2. You might have changed something in the parent theme that is why you are seeing a blank screen. It would simply mean that it created an error code or you have placed a code in the wrong file. Step 1 clearly mentioned Child theme.

Hope this helps. Kindly let us know.

[Bhakti]

Hi! Thanks for the pointer – I had a child theme in place, but it had somehow gotten unactivated, and defaulted to parent X-theme. I activated the child theme again, and voila it works. Thank you!

[Friech]

Glad it sorted things out. Should you require any further assistance with X theme, feel free to get in touch with us.

Cheers!

[Author]

Posts