Docs

[xsangiorgi]

Ok, so I made the video in video post as featured image like:
https://community.theme.co/forums/topic/video-as-featured-image-for-video-post-in-ethos-blog-entry-list/

Now when I select in post page:
Index Featured Post Layout
Make the featured image of this post fullwidth on the blog index page.

It makes the featured image full width overwriting the fact that I wanted the video to show as a features image on blog page. Could you help me make the full width image the video whie keeping the featured image size skinny?

Code I used for php:

<?php

// =============================================================================
// VIEWS/ETHOS/CONTENT-VIDEO.PHP
// -----------------------------------------------------------------------------
// Video post output for Ethos.
// =============================================================================

$is_index_featured_layout = get_post_meta( get_the_ID(), '_x_ethos_index_featured_post_layout', true ) == 'on' && ! is_single();

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <?php if ( $is_index_featured_layout ) : ?>
    <?php x_ethos_featured_index(); ?>
  <?php else : ?>
    <?php if ( has_post_thumbnail() && ! is_single() ) : ?>
      <div class="entry-featured">
        <?php x_featured_video(); ?>
      </div>
    <?php elseif ( is_single() ) : ?>
      <div class="entry-featured">
        <?php x_featured_video(); ?>
      </div>
    <?php endif; ?>
    <div class="entry-wrap">
      <?php x_get_view( 'ethos', '_content', 'post-header' ); ?>
      <?php x_get_view( 'global', '_content' ); ?>
    </div>
  <?php endif; ?>
</article>

[xsangiorgi]

website:
http://foodforestry-development.nl/

[Rue Nel]

Hello There,

Thanks for writing in! To make your featured video for video post format fullwidth and at the same time keep the featured image skinny, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css

.blog .x-main .format-video>.entry-featured, 
.search .x-main .format-video>.entry-featured, 
.archive .x-main .format-video>.entry-featured {
  float: none;
  width: 100%;
  margin-bottom: 30px;
}

.blog .x-main .format-video.has-post-thumbnail>.entry-wrap, 
.search .x-main .format-video.has-post-thumbnail>.entry-wrap, 
.archive .x-main .format-video.has-post-thumbnail>.entry-wrap {
    float: none;
    width: 100%;
    padding-left: 0;
}

http://prntscr.com/abs7w0

We would loved to know if this has work for you. Thank you.

[xsangiorgi]

He thanks, but it doesn’t seem to do anything.

Is it not possible to do this in the Php file i created?

[Nico]

Hi There,

The requested customization above could be done using custom CSS. The PHP code you shared above is the skeleton while the shared CSS is the body or the design of the skeleton. You could also add the custom CSS in your style.css child theme. You could check the link below to best describe on how to do it.

https://community.theme.co/kb/customization-best-practices/

Hope it helps.

Let us know how it goes.

Thanks.

[Author]

Posts