Docs

[Ony]

Hi there. I currently have a customized _post-carousel.php file in my Child theme.

This is the current code:

<?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' => 'x-portfolio', 'posts_per_page' => $count, 'orderby' => 'comment_count', 'order' => 'DESC' );
    break;
  case 'random' :
    $args = array( 'post_type' => 'x-portfolio', 'posts_per_page' => $count, 'orderby' => 'rand' );
    break;
  case 'featured' :
    $args = array( 'post_type' => 'x-portfolio', 'posts_per_page' => $count, 'orderby' => 'post__in', 'post__in' => x_intval_explode( x_get_option( 'x_ethos_post_carousel_featured' ) ) );
    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' ); ?>,
        slidesToScroll : 1,
        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; ?>

This transforms the carousel from a post carousel into a portfolio carousel. I was wondering how to compile this code, code for auto-scrolling, and, if possible, to fix the Featured style to properly adjust for the Portfolio settings, all together for it to function properly. Currently it shows a white background with no posts (in Featured), both the other two options (Most Commented/Random) work fine, just I’d need to organize the Ethos slider in a specific manner.

If required, here is the code changing the post carousels position from above the masthead, to above the footer.

<?php

// =============================================================================
// VIEWS/ETHOS/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Ethos.
// =============================================================================

?>

  <?php x_get_view( 'global', '_header', 'widget-areas' ); ?>
  <?php x_get_view( 'global', '_footer', 'scroll-top' ); ?>
  <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?>
  <?php if(is_front_page()):?>
  <?php x_get_view( 'ethos', '_post', 'carousel' ); ?>
  <?php endif; ?>
  <?php if ( x_get_option( 'x_footer_bottom_display', '1' ) == '1' ) : ?>

    <footer class="x-colophon bottom" role="contentinfo">
      <div class="x-container max width">

        <?php if ( x_get_option( 'x_footer_content_display', '1' ) == '1' ) : ?>
          <div class="x-colophon-content">
            <?php echo x_get_option( 'x_footer_content' ); ?>
          </div>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_menu_display', '1' ) == '1' ) : ?>
          <?php x_get_view( 'global', '_nav', 'footer' ); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_social_display', '1' ) == '1' ) : ?>
          <?php x_social_global(); ?>
        <?php endif; ?>

      </div>
    </footer>

  <?php endif; ?>

<?php x_get_view( 'global', '_footer' ); ?>

And the CSS related to the slider

footer.x-colophon.bottom {
    background-color: transparent; !important
}

/* Post Carousel - Styling Margins and BG Transparency For Perfect Grid */
.x-post-carousel.unstyled{
border:none;
background-color:transparent; !important
padding-top:none;
margin-top:-2px;
margin-bottom:-2px;
}

.x-post-carousel.unstyled .entry-cover{
border:none;
background-color:transparent; !important
}

footer.x-colophon.bottom {
    background: transparent url(http://xxx);
   /* background-position: 25% 25%;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat; */
}

.x-post-carousel-meta,
.h-entry-cover {
	display:none;
}

Thanks so much, if anything is unclear let me know and I’ll try to clarify asap!
O

[Ony]

Also, since modifications were made to change the post carousel into a portfolio carousel, I needed to update the functions.php in my child theme so I can properly set up the “post category” meta on hover, currently it shows a blank space and I cannot seem to find the proper code to change it to portfolio category instead. Please find attached the related code to functions.php

/* Changing Post Carousel Meta */
function x_ethos_entry_cover( $location ) {

    if ( $location == 'main-content' ) { ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php x_the_alternate_title(); ?></span></h2>
        </a>
      </article>

    <?php } elseif ( $location == 'post-carousel' ) { ?>

      <?php GLOBAL $post_carousel_entry_id; ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
          <div class="x-post-carousel-meta">          
            <span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span>
			<span>View Post</span>
            <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
          </div>
        </a>
      </article>

    <?php }

[Rupok]

Hi there,

Thanks for writing in! We can’t assist on such customization is it’s out of our support scope. But as you did it already I can have a look into your site. I can’t promise but will definitely try to assist if this is something within our scope. Let’s provide your URL.

Cheers!

[Ony]

Hey Rupok, unfortunately I’m building the website offline.

Is there a way for you to be able to access my localhost?

If not I can provide you with my child theme and exported XML and XCS files!

[Lely]

Hi There,

Please try to add this two lines:

autoplay: true,
autoplaySpeed: 2000,

Like this:

<?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' => 'x-portfolio', 'posts_per_page' => $count, 'orderby' => 'comment_count', 'order' => 'DESC' );
    break;
  case 'random' :
    $args = array( 'post_type' => 'x-portfolio', 'posts_per_page' => $count, 'orderby' => 'rand' );
    break;
  case 'featured' :
    $args = array( 'post_type' => 'x-portfolio', 'posts_per_page' => $count, 'orderby' => 'post__in', 'post__in' => x_intval_explode( x_get_option( 'x_ethos_post_carousel_featured' ) ) );
    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({
	    infinite       : true,
        speed          : 500,
        slide          : 'li',
        slidesToShow   : <?php echo x_get_option( 'x_ethos_post_carousel_display_count_extra_large' ); ?>,
        slidesToScroll : 1,
		autoplay: true,
		autoplaySpeed: 2000,
        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; ?>

Please do make sure that you have assign the portfolio in a category. It should display the category by default.

Hope this helps.

[Ony]

The auto scroll works great! However the categories still do not show.. I have categories for the items set, however I think because I’ve changed the php (from code on this support forum) to change it from a post carousel to a portfolio carousel (this really should be an option in Customize.) Any ideas :(?

[Rue Nel]

Hello Ony,

Could you please post your code? We want to check what did you change why it is now working.

Thank you.

[Ony]

This reply has been marked as private.

[Paul R]

Hi,

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 to your site
– WordPress Admin username / password
– FTP credentials

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

[Ony]

This reply has been marked as private.

[Lely]

Hello Ony,

Unfortunately, it would be better if you will setup a staging server for your site online so we can check it there. That will eliminate any difference on the setup and settings making it more easy so diagnosed where the issue is coming from. Do let us know once you have set it up already.

[Ony]

This reply has been marked as private.

[Paul R]

Hi Ony,

Kindly review the link below for your guide on how to properly migrate your site without breaking cornerstone.

https://community.theme.co/kb/cornerstone-migration/

Hope that helps

[Ony]

This reply has been marked as private.

[Rue Nel]

Hello There,

The category is not showing because this function x_ethos_post_categories() will only display categories from the posts. Since you have displayed the portfolio items, you need to edit this function. Please insert this following code in your child theme’s functions.php file.

// Custom Ethos categories
// =============================================================================
function x_ethos_post_categories() {

  if ( get_post_type() == 'x-portfolio' ) {
    if ( has_term( '', 'portfolio-category', NULL ) ) {
      $categories      = get_the_terms( get_the_ID(), 'portfolio-category' );
      $categories_list = array();

      if ( ! is_array( $categories ) ) {
        return '';
      }

      foreach ( $categories as $category ) {
        $categories_list[] = $category->name;
      }

      return implode( ', ', $categories_list );
    }
  } else {
    $categories      = get_the_terms( get_the_ID(), 'category' );
    $categories_list = array();

    if ( ! is_array( $categories ) ) {
      return '';
    }

    foreach ( $categories as $category ) {
      $categories_list[] = $category->name;
    }

    return implode( ', ', $categories_list );
  }
}
// =============================================================================

Please let us know if this works out for you.

[Author]

Posts