Docs

[patrickg]

Hello, I have modified my Ethos theme using tips in the forum so that my featured image on a post is full-width as seen on this page:

https://www.bourbonbanter.com/banter/happy-new-year-thank-you-few-thoughts/

However, the image loads as a regular width and then expands to full width. It’s a small annoyance but one I’d like to correct. Ideally, the full-width image would be loaded from the start. I found a few solution that did that but if I turn on a sidebar, the main content aligns left and kills the design of my page.

Ultimately I want a full-width featured image upon page load and the ability to keep the padding on both sides of my post content if I added a sidebar.

Does anyone have any recommendations on how to accomplish this?

Thanks,

Patrick

[Nico]

Hi There,

Thanks for writing in.

I could see that the loaded image is 1200×450 px. First, would you mind sharing us your admin credentials so we could check your setup first.

Don’t forget to set it as private reply.

Thanks.

[patrickg]

This reply has been marked as private.

[Rupok]

Hi there,

It seems you have added the below CSS which making the image fullwidth.

.single-post .entry-featured, .single-post .entry-thumb, .single-post .entry-featured img {
  width: 100%;
}

As it’s loading a bit later, so you are noticing the delay. You have lots of plugins that’s eventually slowing down your site.

Hope this helps.

[patrickg]

I know that I added that code to make it full width. I also tested some other code recommendations that I found in the forum and they made it load immediately. Unfortunately, that code also pushed my body content to the far left ruining my design. The only way to fix it would be to change the container settings on every post. I was hoping there was a solution that would load immediately but not push content to align left.

Since the other code loaded immediatley i’m a bit confused on why you feel the plugins are causing the problem.

Any other thoughts?

[Christian]

This is because your using Javascript to move your the featured image above the main content. Scripts in Appearance > Customize > Custom > Global Javascript are loaded in the footer so they will be loaded last.

The best way is the template customization route. To do that:

1. Copy content.php located in wp-content\themes\x\framework\views\ethos to the same folder structure in your child theme (wp-content\themes\x-child\framework\views\ethos). Open the copied file and comment out the featured image like this.

<?php // x_featured_image(); ?>

2. Copy wp-index.php located in the same folder given above to your child theme. Then, paste this code

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

below the line <?php get_header(); ?>

Thanks.

[patrickg]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove customization from your child theme and add following code in customizer :

.single-post .entry-wrap, .single-post .x-comments-area {
    width: 80%;
    margin: 0 auto;
}
.single-post .x-container.max.width.main,.single-post .entry-featured img {
    width: 100%;
    max-width: 100%;
}

Hope it helps.

[patrickg]

Thanks. That addresses part of the issue. Now, when I re-enabled a sidebar it goes up alongside the featured image. I want the sidebar to start below the featured image that goes across the entire browser window like it did previously.

http://bourbonbanter.staging.wpengine.com/drink/drink-reviews/bourbon-reviews/trader-joes-kentucky-bourbon-straight-whiskey-review/

Patrick

[Christian]

Please give us FTP access.

Thanks.

[patrickg]

This reply has been marked as private.

[Rad]

Hi there,

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

jQuery('.single-post .entry-featured').insertBefore('.x-main');

This should do it 🙂

Cheers!

[patrickg]

Thanks again. Almost there. If you look at the update page:

http://bourbonbanter.staging.wpengine.com/banter/sometimes-bourbon-hunt-comes/

You’ll notice that there is a white gap above the featured image that needs to be removed. And then the title and side-bar images are bumped up right against the featured image. there should be a gap there (e.g., between featured image and title) as seen on this page:

https://www.bourbonbanter.com/banter/sometimes-bourbon-hunt-comes/#.WHMRUbYrJR4

Thanks,

Patrick

[Paul R]

Hi Patrick,

To get rid of the gap on that page, you can add this under Custom > Edit Global CSS in the Customizer.

.postid-9349 .x-container>.offset {
    margin-top:0;
}

Hope that helps.

[patrickg]

That fixed the top gap above the header image, thanks. But now we need a gap between the bottom of the header image and the post title and the first element in the side-bar. I’ve attached an image to illustrate what I’m talking about. What should I add to re-insert this gap which exists normally?

[Author]

Posts