-
Posts
-
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.pngI’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,
JoshHey 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,
DevinDevin,
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,
JoshHey!
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,
IsmaelHi 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
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,
JoshHey 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!
JosueHi 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,
JoshHi 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,
JosueHey 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,
JoshHi Josh!
This will do it:
.template-single-blog .big-preview a { max-height: 766px !important; overflow: hidden; }Best regards,
JosueHi 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,
JoshHi 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,
JoshHi 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,
JoshHey 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,
JosueHi 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,
JoshHey!
Yeah, it’s because of some custom code here:
https://staging.expresswriters.com/?sccss=1&ver=3.9.2Best regards,
JosueSimilar 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/
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!
JosueHi 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?
- The topic ‘New Blog Layout Can't Make Featured Image Full Width’ is closed to new replies.