Docs

[[email protected]]

Hello,

I am trying to learn how to hide the ethos 3 carousel for mobile settings. I see I can choose how many pictures show on the size of screen. When I select 0 it does not go away for mobile. Is that something that is possible?

Thanks

[Paul R]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[[email protected]]

The Artefact Custom Tailoring | London’s Modern Tailor

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

@media screen and (max-width: 481px) {
.x-post-carousel.unstyled {
display: none;
}
}

Hope it helps

Joao

[Thai]

Hi There,

To hide the post carousel on the mobile version, please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 480px){
    ul.x-post-carousel {
        display: none;
    }
}

Hope it helps 🙂

[[email protected]]

We also only want this on the front page only. Is it possible to make this change without custom css? If not, can you assist with how to make the carousel show only on front page.

Thanks,
Kathy

[Rahul]

Hey There,

Kindly follow this thread :

https://community.theme.co/forums/topic/post-carousel-on-home-page-only/

Hope this makes sense!

[[email protected]]

Hi Rahul,

I have carefully read this thread. I have a child theme in place. I am getting stuck on how to add the new page for this. I can’t see or find the instructionson how to create this new file.

Here is the step:
After setting up a child theme, create file _post-carousel.php in x-child-ethos\framework\views\ethos
and copy the code below into that file.

Thanks,
Kathy

[Thai]

Hi Kathy,

In this case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / Password
– FTP Account

Don’t forget to select Set as a private reply. This ensures your information is only visible to our staff.

Thanks.

[[email protected]]

This reply has been marked as private.

[Christopher]

Hi there,

Please connect to FTP and download the file _post-carousel.php from wp-content/themes/x/framework/views/ethos. Open it in text editor, replace existing code with following and save the file :

<?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'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'comment_count',
      'order'          => 'DESC'
    );
    break;
  case 'random' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'rand'
    );
    break;
  case 'featured' :
    $args = array(
      'post_type'      => 'post',
      'posts_per_page' => $count,
      'orderby'        => 'date',
      'meta_key'       => '_x_ethos_post_carousel_display',
      'meta_value'     => 'on'
    );
    break;
}

?>

<?php if ( $is_enabled && (is_home() || is_front_page())) : ?>

  <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' ); ?>,
        slidesToScroll : 1,
        rtl            : <?php echo json_encode( is_rtl() ); ?>,
        responsive     : [
          { breakpoint : 1500, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_large' ); ?> } },
          { breakpoint : 1200, settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_medium' ); ?> } },
          { breakpoint : 979,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_small' ); ?> } },
          { breakpoint : 550,  settings : { speed : 500, slide : 'li', slidesToShow : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_small' ); ?> } }
        ]
      });
    });

    </script>

  </ul>

<?php endif; ?>

Now upload this file under wp-content/themes/x-child/framework/views/ethos

Hope that helps.

[Author]

Posts