Docs

[powrider686]

Hey there,
On my site, roadsidegal.wpengine.com, I’m having some problems with the blog and how featured images are displayed.

Is there any way to set the featured image size so it doesn’t take up the whole screen? I.e. max sixe fo 800×600 or something?

Thanks for the help!

Marcus

[Rue Nel]

Hello Marcus,

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 (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[powrider686]

Hey,
Check out this post: http://roadsidegal.wpengine.com/route-66/wash-lady/

The image at the top of it is huge. Is there a way to constrain it without resizing every image that we put on the blog? I have 2560×2048 or flipped images for basically everything on the site so that they display crisp on HD screens. Usually with media items you can say display as thumbnail, medium, large, etc.

Is there a way that blog post featured images could be constrained so that they were universal in appearance?

Thanks for the help!

[Rue Nel]

Hello There,

If you want to display a smaller without having to edit the image, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.single-post .entry-thumb img{
    max-height: 220px;
    width: auto;
}

And if ever you want to display a bigger image but would like to control the height of the image, you can make use of this code instead:

.single-post .entry-thumb{
    max-height: 320px;
    overflow: hidden;
}

Please let us know which one will work out for you.

[powrider686]

Ok, that did the trick to make it smaller. I used the first option.

Now I’m working on how the featured image displays on the main blog page, http://roadsidegal.wpengine.com/blog/. I see through inspecting it that the image div / container size is 1200 x 425. Is there a way to constrain the images that are featured so that they fit within the area shown?

On the page now, Wash Lady is the featured image and post, but because it’s a portrait photo it is covering the container and chopping off the top and bottom of the image. I don’t really want to crop all of the images from the blog so that they fit that dimension, because it really affects which images can be used. Is there a way to contain the images so that both landscape and portrait style images fit within the container and display the whole image?

Is there a way to change the size of the image container itself?

Thanks for the help!
Marcus

[Rue Nel]

Hello There,

To make sure that the image will display within the container, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.blog .entry-thumb,
.archive .entry-thumb,
.x-post-slider .x-post-slider-entry {
    background-size: contain;
}

The code should contain the images so that both landscape and portrait style images fit within the container and display the whole image.

Please let us know how it goes.

[powrider686]

That did the trick.

One more question. On the same blog, is it possible to have the video play when a video is the featured blog post? It seems you have to click on the post to get the video to play currently.

Thanks for the help!

[Rue Nel]

Hello There,

Thanks for the updates!

To have the video play when a video is the featured blog post, since you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

// Custom featured index and display the video instead
// =============================================================================
function x_ethos_featured_index() {

    $entry_id                    = get_the_ID();
    $index_featured_layout       = get_post_meta( $entry_id, '_x_ethos_index_featured_post_layout', true );
    $index_featured_size         = get_post_meta( $entry_id, '_x_ethos_index_featured_post_size', true );
    $index_featured_layout_class = ( $index_featured_layout == 'on' ) ? ' featured' : '';
    $index_featured_size_class   = ( $index_featured_layout == 'on' ) ? ' ' . strtolower( $index_featured_size ) : '';
    $is_index_featured_layout    = $index_featured_layout == 'on' && ! is_single();

    ?>

    <?php if ( ! has_post_format('video') ) : ?>

      <a href="<?php the_permalink(); ?>" class="entry-thumb<?php echo $index_featured_layout_class; echo $index_featured_size_class; ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        <?php if ( $is_index_featured_layout ) : ?>
          <span class="featured-meta"><?php echo x_ethos_post_categories(); ?> / <?php echo get_the_date( 'F j, Y' ); ?></span>
          <h2 class="h-featured"><span><?php x_the_alternate_title(); ?></span></h2>
          <span class="featured-view"><?php _e( 'View Post', '__x__' ); ?></span>
        <?php else : ?>
          <span class="view"><?php _e( 'View Post', '__x__' ); ?></span>
        <?php endif; ?>
      </a>

    <?php else : ?>

      <?php x_featured_video( 'video' ); ?>

    <?php endif; ?>

    <?php

  }
// =============================================================================

This code will only allow you to play the video within the blog index or archive page. Please do not forget to add a featured image. This does not include the changes of the featured blog post when it is displayed in the carousel or post slider.

Please let us know if this works out for you.

[powrider686]

This reply has been marked as private.

[powrider686]

Actually it did! I accidentally responded to another ticket.

On this, can it be the featured post, or only below the featured post carousel?

Thank you!

[Lely]

Hello There,

Unfortunately, at this time, I am not sure about your question. When you say featured post, are you referring to the carousel above the video? If yes, due to how it is structured, it will need customization that is beyond the scope of our support. You may wish to consult a developer to achieve this. If not, please clarify.

[Author]

Posts