Docs

[ImpossibleDiG]

So I’m now working on a few new wrinkles on my site. Specifically, I’d like to…

1. Center a featured image on a post that is not wide enough to fill the column.
2. Center embedded tweets. I’m using multiple embed variations, but nothing seems to get them centered. Anything to be done about that? See http://possiblegirls.com/2016/07/interwebs-emergency-kittens-to-the-rescue/ after logging into WordPress to bypass coming soon page. Credentials in next message.

Thanks! DiG

[ImpossibleDiG]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

1. Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.entry-featured {
text-align: center;
}

2. I tried too with no luck. The element that is generated by this embed

<p><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script></p>
<blockquote class="twitter-tweet tw-align-center" data-lang="en"><p>
i love cats <a href="https://t.co/Ihjbo1t5N2">pic.twitter.com/Ihjbo1t5N2</a></p>
<p>— Emergency Kittens (@EmrgencyKittens) <a href="https://twitter.com/EmrgencyKittens/status/739196342254338052">June 4, 2016</a>
</p></blockquote>

Contains this element, <twitterwidget></twitterwidget> and it acts like an iframe. And same as the iframe, there is no way to apply CSS directly on the elements within it. The only solution is wrapping your embed code within another container, then limit that container’s width and center it. Example,

<p><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script></p>
<div class="my_twitter_container">
<blockquote class="twitter-tweet tw-align-center" data-lang="en"><p>
i love cats <a href="https://t.co/Ihjbo1t5N2">pic.twitter.com/Ihjbo1t5N2</a></p>
<p>— Emergency Kittens (@EmrgencyKittens) <a href="https://twitter.com/EmrgencyKittens/status/739196342254338052">June 4, 2016</a>
</p></blockquote>
</div>

Then add this CSS,

.my_twitter_container {
max-width: 520px;
margin: 0 auto;
}

Hope this helps.

[ImpossibleDiG]

Perfect! Thank you so much!

Can you tell me the minimum width my images should be to avoid the need for centering the images in the left column of the post or index page?

thanks!!! dig

[Thai]

Hi There,

The minimum width of your images should be 1024x1024px.

Regards!

[ImpossibleDiG]

You all have been so helpful, I figured I add another tweak to the queue!

I added the slider to my site and would like to do the following:

1. Can I remove the category and date from showing up in the slider?
2. If I only have one item in the slider, is there a way for the navigational arrows to not appear?

Thanks! dig

[Paul R]

Hi,

1. Create 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">               
                      <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; ?>

2. You can add this under Custom > Edi Global CSS in the Customizer.

.flex-direction-nav {
    display:none;
}

Hope that helps.

[ImpossibleDiG]

I made the changes for #1 only, and while the other fields are now gone, the arrows are gone as well, even with two posts in the slider. Is there a way to tweak the code such that the navigation arrows return?

thanks! dig

[Rad]

Hi there,

It is not possible with just CSS, please remove this

.flex-direction-nav {
    display:none;
}

Then add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery( function($) {

$('.x-slides').each( function() {

if( $(this).find('li').length <= 1 ) {

$(this).parent().find('.flex-direction-nav').css({ display: 'none' });

} 

} );

} );

Hope this helps.

[ImpossibleDiG]

So that added the arrows to the carousel above the masthead, which is great.

But I was hoping to add the arrows to the slider within the index.

thanks! dig

[Rue Nel]

Hello There,

The icons are not showing because the data-x-icon were incorrect. Please update the code and use this instead:

<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>

You have to copy the raw code from here (http://pastebin.com/eXydWjNE) to preserve the unicode html entities or data-x-icon value not just the [square] which is the cause why the icon is not displaying in your site.

Please let us know how it goes.

[Author]

Posts