Crop from bottom, rather than top?

Hi all,

Thanks for the awesome theme! It’s so so good. I’m a noob in need of some help.

I’m currently trying to use Post Template Style 7 for my posts, which looks beautiful and modern. But the image always crops from the centre top on Newspaper. I’ve read the explination why, and understand it. But I’m building a motorsport news website, and the general rule of motorsport photography is the car is at the bottom of the photo, so scenery can be the background. I’ve read about the API thumb update options, which I understood despite my limited knowledge. I checked the td_config.php but couldn’t find the option that directly related to Post Template Style 7 so couldn’t change it.

Could someone point me to the option to change Post Template Style 7 to crop from the centre bottom please? Example screenshot of the problem here.

Thanks all!

You guys are fantastic, that’s perfect. Thanks! 🙂

I’ve one more question, hopefully this is just as easy for you knowledgeable guys!

Is it possible to extend the bottom of the Featured Image in Post Style 7? It looks brilliant, but it’d be nice if it could have a ‘full screen’ option.

For example, my post currently looks like this. Would it be possible to drag the bottom of it down to get an effect like The Verge has created here?

If not, I highly suggest this as an option for future updates. It’s a great design idea. 🙂

Hi Bogdan,

Thanks brilliant, thank you very much! It looks lovely 🙂

One more (hopefully the last one in this thread!). Is there a way to stop the Featured Image in Post Template 7 from re-sizing when you change the window size? The site looks spectacular when the browser is maximised, but when you size down slightly (including mobile), it resizes the photo slightly, creating a black bar. Example image here. It stops at a certain point, which suggests there is a way to stop it resizing but I can’t be sure.

Sorry for all the bother, and thanks again for all the help 🙂

Hi Simion,

It’s actually something that happens on desktop only (width greater than 1141px). As you adjust the browser window down from 1920px, the image is dynamically resized to suit the new browser window. The header is still 1000px tall, but because the image is being resized, it eventually becomes too small to fill the entire header and is replaced by plain black.

You’re right that putting the code into the Desktop section fixes the mobile devices, but the desktop section still displays black at the bottom, because the image is now slightly higher than it used to be (the -40% from the original code is now -20%).

One way of fixing it is to use the first bit of code and move the image down, but as I said, motorsport photography tends to be done with the car at the bottom, so I’m losing the car in the majority of shots. It’d be ideal if the image did not resize with the window in the Desktop view at all, and which would mean I could ‘pin’ the image from the bottom, rather than top. 🙂

I might be REALLY bad at explaining things, lol.

Cheers guys.

• This reply was modified 8 years by ds.ellis.

Got a little more time on my hands to explain it now, so here it goes.

Everything I will post is regarding the desktop (1141px+) view, and the code is in the Advanced CSS -> Desktop Box.

The code I’m using is as follows

.single_template_7 .td-backstretch{
transform: translate3d(-50%, -25%, 0px) scale(1.15, 1.15)!important;
}
.td-post-template-7 .td-post-header{
height:850px;
}

The image I am using is this one. The dimensions are 1920×1280

This is how the post displays on a full HD monitor (1884 width image) It looks absolutely beautiful (IMO) – Preview

If you resize the browser to emulate smaller series, a black bar begins to appear at the bottom as the image is resized dynamically. Due to the new 850px height, the image no longer covers the required area. – Preview (Note the black bar at the bottom)

As I continue to resize the browser, the black bar enlarges as the image gets smaller and eventually begins to look quite bad. Preview

As you can see, it’s still cutting off quite a large amount of the image at the top, despite the black bar appearing at the bottom. Is there a way to…’pin’ the bottom of the image, to the bottom of the header image display area, so it’ll stop creating a black bar? I can move the image down, but then it starts to cut off the bottom of the image more…and motorsport is a pain in that the car is always at the bottom. So being able to pin the bottom of the image to the bottom of the header area would solve it.

Because the mobile devices have a relatively narrow window width they operate in, it doesn’t really cause a problem in those views and I can manage it. It’s the fact that desktops have to range from 1140 up to 1920 that’s causing an issue.

Hope this explains things a bit better!

• This reply was modified 8 years by ds.ellis.

Simion and Bogdan, you guys are fantastic. That last little bit has done the trick. It needs just a wee bit of tweaking but I think I can manage that myself, as you guys got the hard bits done. Thank you for putting up with my constant questioning. I’ll probably extend the service to 12 months rather than the default 6, as I’m impressed how much help we get, even though that’s a bit beyond what is meant to be done.

I’d suggest this sort of style as an additional post template in future updates. I’ve seen this style on a lot of sites and it does tend to look very impressive and modern.

Thanks for the help guys, much appreciated.