Featured image comes up wrong in blog section

[Nordicearthchild]

Hi there,

I own the website: http://scandinavianearthchild.com - I have an issue with how my blog posts come up on my blog page when I choose a featured photo.

On my blog everything looks great, but when I select a featured photo - in order to use the post in the ethos slider on the home page or for the post to appear in my ‘latest post section’ also on the ‘home’ page, the blog post comes up weirdly on the blog page. Almost as if the photo comes up twice. You can see the difference in how a regular blog post comes up vs. a blog post with a featured photo comes up by going to this link: http://scandinavianearthchild.com/category/personal-blog/

Is there a code that I can put in, so that having a featured photo doesn’t interfere with my blog post page?

Thanks very much.

Mai

[paul.r]

Hi Mai,

When adding/uploading your featured image, No need to insert it into post.

By just uploading the image it is already attached to your post and will show in the slider.

You can also try this third party plugin to unattach or attached existing images in your media library to a post,

Unattach and Re-attach Media Attachments

Thanks

[Nordicearthchild]

Hi Paul,

Many thanks for your reply,

Unfortunately the image doesn’t come up unless I set as a featured image (I tried it on several posts) and the plugin doesn’t come up correctly, so I can’t get it to work.

Is there anything else I can do to fix this issue?

Thanks very much.

[ruenel]

Hello There,

Yes the image will not display because only featured image will display in the blog index area. It becomes duplicate since you have inserted the image in the post content as well. I can see why the feature image is not displaying on single post. That is because you have inserted this css:

.single-post .entry-featured {
    display: none;
}

The best solution to this issue is to use a featured image for each of your posts and remove any image that you have inserted within your post content that is the same with your featured image. You must delete the css too so that the featured image will display in your single blog post.

Hope this make sense.

[Nordicearthchild]

Hi!

Thanks so much for your reply. It makes complete sense, but I don’t know where to see my old CSS code. When I looked in the customiser or when I went into ‘appearance’ --> ‘editor’ where I tried to select and look at both my child theme as well as X I couldn’t see the code you mention. Can you tell me where to find it?

Thanks very much!

Mai

[ruenel]

Hey Mai,

The code can be found in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS
https://image.prntscr.com/image/TO5DVrRaRZ_4JoIn5GikYw.png

Hope this helps.

[Nordicearthchild]

Hi again,

Thanks very much for trying to help me, however I’m afraid this still doesn’t solve the issue.

I just deleted the code from the CSS, however looking at my site afterwards I realised that the reason this code is there is that if I don’t have this code in my CSS I have the featured image appear in a huge size above the headline of my post. As the image appears above the headline rather than below it looks really weird as if they don’t go together so I re-inserted the code in the CSS.

Another thing is that removing the code still didn’t affect how the image appears on the index page of the blog.

If you go to this link: http://scandinavianearthchild.com/category/personal-blog/ you’ll see that the first post looks like a summary with a photo to the left next to my excerpt of the post.

Underneath that is another layout where the image appears double as if it’s showing the image to the left but instead of showing the excerpt it’s showing the post in it’s full length.

Then after that there’s the layout I wish the entire page would have; the post appears in it’s full length but the image isn’t shown twice.

All of the posts have the same settings so I don’t understand why some of them come up differently on the index page. Could this be a bug? Or could there be a setting somewhere else that’s causing this? I’ve already checked in the blog settings section that the settings are set to show post in full text.

I look forward to your reply.

Thanks very much for your assistance.

Mai

[christopher]

Hi there,

Thank you for your detailed explanation of the issue.

I should insist that you use the Featured Image on your posts and remove the images which you have added inside the blog post itself. So please kindle again remove the CSS code which hides the Featured Image on the Single Post page.

For the single posts, I suggest that you add the CSS code below which will make it look like what you have in mind with the title at the top and featured image below that:

.single-post article.post {
	position:  relative;
}

.single-post .x-main.full .hentry .entry-featured {
	    max-width: 599px;
            margin: 108px auto 0;
}

.single-post article.post .entry-wrap .entry-header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 90px;
}

For the listing page kindly add the CSS code below:

.archive .x-main .hentry {
    position: relative;
}

.archive .x-main .hentry>.entry-featured {
	float:  none;
	max-width:  599px;
	margin: 108px auto 0;
	width: 100%;
}

.archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    float: none;
    width: 100%;
    padding-left: 0;
}

.archive .x-main .hentry.has-post-thumbnail>.entry-wrap .entry-header {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 30px 0 0 ;
   
}

That should do the trick and make the listing as you want by keeping the Featured Images of the blog posts and removing the images you have added inside each blog post.

Thank you.

[Nordicearthchild]

Christopher, Thank you so much for all of your help!

I have had this issue for about a year and a half after trying to solve it last time so I had kind of kiven up on it finding a solution, but I thought I’d give it one last try when I wrote in!

Thank you thank you thank you - everything looks lovely now!

You’re a superstar!

Mai

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!