How To Make Featured Image In Blog Full

Viewing 25 posts - 1 through 25 (of 25 total)

Posts
August 1, 2014 at 9:05 pm #298932

Hello,

I wanted to show you a new blog layout (like Medium.com) I've been working on, and thought maybe that it could go into the next update: https://medium.com/@JuliaEMcCoy/how-dr-seuss-nails-copywriting-c5c11d3201a2

I'm running into some issues in how the image is displayed. I realize that some of the past images in past blogs may be bigger or smaller than the ones I'm posting as a featured image currently, and am wanting to make it appear as a fixed width and height no matter what browser you are on (like stretch image to fit). For example, this spacing is idea to me: http://staging.expresswriters.com/content-marketing-vs-copywriting-top-strategies-2014/ and this is not idea (notice the spacing from the image): http://staging.expresswriters.com/google-2014-rise-of-the-content-beast/

http://staging.expresswriters.com/wp-content/uploads/2014/08/ideal-spacing.png
http://staging.expresswriters.com/wp-content/uploads/2014/08/NOT-idea-spacing.png
http://staging.expresswriters.com/wp-content/uploads/2014/08/remove-space-on-category-pages.png

I'm also having trouble on the category pages (with header spacing): http://staging.expresswriters.com/category/content-marketing/

Is there a way to make the images all equal width and height?

Would really appreciate your expertise. :)

Thanks,
Josh

August 2, 2014 at 8:18 pm #299186

Hey j1980mac!

The best place to start would be customizing the single author full width layout: http://kriesi.at/themes/enfold/blog/blog-single-author-full/

The issue would be that the image is still inside the site container so you would need to modify the containers or the php file to pull the image outside of the container for each post. Both are a bit tough but doable in a few hours I would guess if you were comfortable with php/html/css.

Its far beyond what we can help with through support however so if you need assistance in creating the custom layout then hiring a freelance developer from somewhere like Codeable or Envato Studio would be best.

Regards,
Devin

August 2, 2014 at 8:56 pm #299193

Devin,

Sounds quite a bit more difficult than it seems. So what exact file do I need to look into? So you're saying, it's just a matter of removing the image out of the container and placing it above the container in the php?

Thanks,
Josh

August 4, 2014 at 4:26 am #299495

Hey!

You can start with the loop-index.php, inside the includes folder. Also, please refer to this link. I'm not sure if this is what you want but it should make the featured image span full width: https://kriesi.at/support/topic/how-do-i-make-the-single-post-with-full-screen-wide-featured-image/

Best regards,
Ismael

August 11, 2014 at 5:02 am #302405

Hi Ismael,

I just tried to implement the code that you sent me on the forum, that made the image full-width, but does this give it an exact container size (cutting the height overflow off)? If so, what would the css be that would allow me to effectively move the title to the middle of the image?

Thanks,Josh

August 12, 2014 at 9:29 pm #303438
Hey Josh!

Did you manage to equalize them? i couldn't not a difference between this post and this post.

Regards,
Josue
- This reply was modified 7 years, 4 months ago by Josue.
August 12, 2014 at 10:29 pm #303452

Hi Josue,

That is the same post.. I'm not sure what you're asking? I'd like to be able to make all posts (featured images) full width – and the same height on every post. :)

Thanks,
Josh

August 12, 2014 at 11:49 pm #303474
Hey Josh!

Try adding this code to the Quick CSS:
```
                .template-single-blog main.content.units.twelve.alpha article .big-preview.single-big, .template-single-blog main.content.units.twelve.alpha article , .template-single-blog main.content.units.twelve.alpha, .template-single-blog { 	width: 100% !important; }  .template-single-blog main.content.units.twelve.alpha article > *, .template-single-blog main.content.units.twelve.alpha > * { 	width: 1030px; 	margin: 0 auto; 	float: none; }     .template-single-blog .content {     padding-top: 0; }              
```
Cheers!
Josue
August 13, 2014 at 1:03 am #303493

Hi Josue,

That looks great so far! But is there any way to make the title and the height the same no matter even at the image is really tall? Kind of like this? https://medium.com/the-archipelago/not-everyone-feels-this-way-7e21574a2dfd

Thanks,
Josh

August 13, 2014 at 10:23 pm #304049
Hi Josh!

Try adding this too:
```
                @media only screen and (min-width: 767px) { .template-single-blog .blog-meta{ 	margin-top: -320px !important; } .template-single-blog .entry-content-wrapper { 	z-index: 100; 	position: relative; } }              
```
You'd need to change the title color to keep it readable.

Regards,
Josue
August 14, 2014 at 1:36 am #304104

Hey Josue,

Man that looks really close to what I'd like to do!

The only thing left really is to make sure that the images, (no matter what size) are cropped at a certain height. Notice these two blogs (after adding the above code) are different in height: http://staging.expresswriters.com/release-press-release-soon-can/
http://staging.expresswriters.com/content-marketing-vs-copywriting-top-strategies-2014/

I would also need to make sure that the title is "above the fold" per say.

What with the CSS need to perform this?

Thanks,
Josh

August 14, 2014 at 4:03 am #304132
Hi Josh!

This will do it:
```
                .template-single-blog .big-preview a {     max-height: 766px !important;     overflow: hidden; }              
```
Best regards,
Josue
August 21, 2014 at 10:22 pm #307552

Hi Josue,

Sorry I'm just now getting back to you on this, I tried implementing this code, but it seems as if what I'm trying to do looks more how this function works here: http://staging.expresswriters.com/wp-content/uploads/2014/08/Screen-Shot-2014-08-21-at-2.52.11-PM.png on this page: http://staging.expresswriters.com/blog-writing/ for example. Essentially, no matter the images height and width, it fits the whole image container.

So when comparing these two posts side-by-side, you will see that one is A greater height and the other:
http://staging.expresswriters.com/release-press-release-soon-can/
http://staging.expresswriters.com/content-marketing-vs-copywriting-top-strategies-2014/

Is there a way to make the featured image container on the blog 1425px by 1425px?

Thanks,
Josh

August 24, 2014 at 1:26 am #308353

Hi Josh!

They both look 776px height on my end.

Cheers!
Josue

August 26, 2014 at 5:14 pm #309420

Hi Josue,

If you look at these posts here:

http://staging.expresswriters.com/release-press-release-soon-can/
http://staging.expresswriters.com/why-you-cant-put-a-price-on-content/

You can't see the height differences? The issue is that they are not equal. Please also note that the title isn't in the same location on both posts…

Thanks,
Josh

August 26, 2014 at 8:00 pm #309499

Hey Josh!

They look the same on my end (1920×1080):

Cheers!
Josue

August 26, 2014 at 9:08 pm #309531

Hi Josue,

I've been fixing it. I got lucky I guess :) the issue seems to occur when the title is more than a certain word count. If I make every title the same length, then there will be no issue ever. Is there a solution to this?

It's not displaying correctly on mobile, what the CSS to correct this?

Thanks,
Josh

August 26, 2014 at 11:22 pm #309566
Hey Josh!

For some reason the z-index value was being changed on mobile, try adding this to ensure that its always position: relative and z-index: 10:
```
                header.entry-content-header {     z-index: 10;     position: relative !important; }              
```
I'd suggest to reduce the title font-size on mobiles too.

Best regards,
Josue
August 27, 2014 at 4:29 am #309625

Should I add this to the mobile CSS or regular CSS?

August 27, 2014 at 4:44 am #309626

Hi Josue,

Hi, was this CSS designed to simply make the header just show up on the blog? If so, what CSS would control the look of the title (size) on mobile?

Also, I noticed that there are a lot of elements that aren't as visible on mobile- iphone. The body text is not displayed, the top menu follows me down the page (when I'd like it hidden), and the logo is smushed. How would I correct this?

Thanks,
Josh

September 5, 2014 at 7:13 am #313823

Hey!

Yeah, it's because of some custom code here:
https://staging.expresswriters.com/?sccss=1&ver=3.9.2

Best regards,
Josue

October 9, 2014 at 11:24 pm #333480

Similar issue here but is there currently an easy way to have the full width featured image atop a 2 column post layout like this? http://www.mtv.com/news/1955600/ed-sheeran-thinking-out-loud-video/

October 10, 2014 at 12:02 am #333508
Hello!

That's possible but it would require some custom work, unfortunately that's beyond the scope of the support we can offer. If you really need it try contacting a developer.

Alternatively you can always manually build your Posts with the Layout Builder, something like this – http://screencast.com/t/LztyvBVGD

Cheers!
Josue
- This reply was modified 7 years, 2 months ago by Josue.
December 18, 2015 at 10:43 am #554885

Hi All,

First of all, sorry for bumping this as it's quite old, but I had the exact same goal in mind as the OP. Make the feature image full width and put the title on top (as if it was a feature image slider). However, the code linked here to make the feature image full width, doesn't seem to do anything on my side. Have updates been done to the theme that broke those?

December 18, 2015 at 2:10 pm #554947

Hey @xioliul!

Can you please create a new thread including a link to your site?

Cheers!
Josue
Author

Posts