Docs

[patrickg]

One more thing, you’ll also notice that the side-bar content goes all the way to the right-edge of the screen. There should be a bit of a gap there as well.

[Rue Nel]

Hello There,

Thanks for updating in and thank for sending the screenshots. To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.entry-featured {
    margin-bottom: 50px;
}

.x-sidebar.right {
    padding-left: 0;
    padding-right: 35px;
}

Hope this helps. Please let us know how it goes.

[patrickg]

Another step closer….yay!

Now that we’ve got the proper gaps in place I noticed a few side-effects after migrating the changes to my live site.

1) When the page loads, the side-bar does so in a somewhat clunky fashion. It appears even at top with the featured image before pushing down and allowing the featured image to be full screen. This all started with wanting to have the featured header image load more smoothly but now we seem to have gone backwards on that front. Is there a way to adjust how things load to fix this?

Here is the live page you can review on: https://www.bourbonbanter.com/banter/boondocks-american-whiskey-cask-strength-review/#.WHvdgRTUCoQ

2) My discussion area at the bottom of the page is now pushed up against the left margin which it was not previously. Any suggestions on how to get that to align with the left side of the blog content?

Thanks,

Patrick

[Christopher]

Hi there,

Please add following code as well:

.single-post .entry-featured {
    width: 100%;
    height: 100%;
}
div#disqus_thread {
    margin: 0 auto;
    float: none;
    width: 80%;
}

Hope it helps.

[patrickg]

Great, that fixed the alignment issue with Disqus at the bottom. The only issue that remains is the loading order where the sidebar loads aligned to the top of the featured image making it smaller than full screen before it then pushes down allowing the featured image to scale fullscreen. Any thoughts on that issue?

[Lely]

Hello Patrick,

I am a little confuse now with current issue as you stated. When I check the link, your featured image is fullwidth on top, below on the left is the content, and then on the right is your sidebar. See this:http://screencast-o-matic.com/watch/cbVbfVQG6K. I can’t see this part as you stated:where the sidebar loads aligned to the top of the featured image. Please clarify.

[patrickg]

I’ve attached a screen capture of what I’m talking about when the page loads. Let me know if that explains what I’m trying to fix.

Thanks,

Patrick

[Rue Nel]

Hello Patrick,

Thanks for sending us the screenshots. This issue happens because the featured image were moved as the page loads. You can rectify this if you customize the single post template. To do to that, please follow these steps:
1] Please create a new file in your local computer
2] Insert this content into that file:

<?php

// =============================================================================
// VIEWS/ETHOS/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Ethos.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

?>

<?php get_header(); ?>
  
  <div class="x-container max width main">
    <div class="offset cf">

      <?php if ( has_post_thumbnail() ) : ?>
        <div class="entry-featured">
          <?php if ( ! is_single() ) : ?>
            <?php x_ethos_featured_index(); ?>
          <?php else : ?>
            <?php x_featured_image(); ?>
          <?php endif; ?>
        </div>
      <?php endif; ?>

      <div class="<?php x_main_content_class(); ?>" role="main">

        <?php while ( have_posts() ) : the_post(); ?>
          <?php x_get_view( 'ethos', 'content', get_post_format() ); ?>
          <?php x_get_view( 'global', '_comments-template' ); ?>
        <?php endwhile; ?>

      </div>

      <?php if ( $fullwidth != 'on' ) : ?>
        <?php get_sidebar(); ?>
      <?php endif; ?>

    </div>
  </div>

<?php get_footer(); ?>

3] Save this file as wp-single.php
4] Upload this file in your child theme’s folder wp-content/themes/x-child/framework/views/ethos/
5] And then last lastly, please add the following JS code in the customizer, Appearance > Customizer > Custom > JS

(function($){
  $('.x-main .entry-featured').remove();
})(jQuery);

Hope this helps.

[patrickg]

Thank you, this helped a lot. But there’s still an issue with double loading of the featured image. In a browser the main featured image loads fine but there’s a duplicate that appears immediately below it but not full-screen width. It appears for a second and then disappears. Attached is a screen shot from a mobile device to show it. Moves too fast to get screen grab on a desktop.

[Rad]

Hi Patrick,

How about a video recording? Then you can upload it any file hosting services like dropbox. And please provide the URL here.

Thanks!

[patrickg]

Great idea! Here’s a link to a video I just made. You’ll see how the header image is doubled up while loading and then fixes itself.

https://www.dropbox.com/s/wp5ql7i3erhhyze/featuredimageloadisue.mov?dl=0

[Rue Nel]

Hello There,

To resolve this issue, please add this in your customizer, Appearance > Customizer > Custom > CSS

.x-main .entry-featured {
  display: none !important;
}

Please let us know if this works out for you.

[patrickg]

That seems to have worked. Woot! Thank you so much.

As a follow up questions to all of these changes we’ve made, I notice that my header image now is blurry when viewing on a desktop computer. (Despite creating sharp looking images for upload.) I’m assuming it’s because the image is being stretched beyond the original file dimensions. I’ve standardized recently on header images that are 1200×450 pixels because I was hoping to avoid blurry images.

Here’s one that appears blurry on a large screen: https://www.bourbonbanter.com/drink/drink-news/bourbon-news/introducing-whiskey-barons-collection/?preview_id=9435&preview_nonce=18fcbe8d4e&post_format=standard&_thumbnail_id=9441&preview=true#.WId_dmQrKWY

Is there anything I can adjust to help prevent this from happening to my images?

Thanks,

Patrick

[Rupok]

Hi there,

It’s because the featured image is being cropped as 888×333 thumbnail. Even your original image (https://www.bourbonbanter.com/wp-content/uploads/2017/01/whiskey-barons-collection-2.jpg) is not suitable as it’s shorter in height. Let’s choose an image that’s longer in height or you will need to define thumbnail size for featured image.

Cheers!

[patrickg]

I’d like to avoid using images with more height as it takes up a lot of screen real estate. So what’s the best to go about making changes?

[Author]

Posts