Featured Image Focus Point

Hi Chris,

Are you using the sizing options in Customize > Blog > Featured Images?

Cropping should be set to the center by default - I'll have to look into it to see if we can allow a different area of focus in the cropping.

Hi Tom,

Currently, i'my testing using the settings on a specific page/post. NI, the resize options are not set currently.

Chwere
Chris

If you're not using the resize options, the image shouldn't be cropped/resized at all.

Any chance you can link me to the page in question?

Hi Tom,

This is the page with how I want the formatting to look give or take.
http://test.karlanorton.co.nz/wordpress/performances/lunchtime-concert/

This is an example page where the header image is turned off and the plug-in WP Smart Crop handles the resizing of the feature image. As you can see, it keeps the image centered on a focus point I specified as it scales.
http://test.karlanorton.co.nz/wordpress/performances/lunchtime-concert-2/

Selecting resize image 'Enable' or 'Disable' does not seem to effect behavior of image scaling?

Cheers
Chris

Ah, you're using the image as a background image, so it sets the full image as a background to the content you add.

Resizing images will only work on static images whether you use GP settings or that plugin I'm afraid.

Hi Tom,

So I found a solution to this using this piece of css which makes the background image focus perfectly when scaling for mobile etc.:

.generate-content-header {
background-position: 50% 50%;
}

Now what I would like to do is put this into jQuery so that I can set the parameters of background-position dynamically. Apparently this piece of code should do the trick but it doesn't seem to be working so I'm wondering if I've misunderstood how to add jQuery to GP.

At the moment, I've added the following to wp_header in Generate Hooks:

<script>
jQuery('generate-content-header').css('background-position', '50% 50%');
</script>

Any ideas why it may not be working?

Thanks!
Chris

That jQuery is identical to writing the CSS as you have it now.

Either way, the jQuery would be: jQuery( '.generate-content-header' ).css( 'background-position', '50% 50%' );

Thanks Tom,

It was the . I was missing before generate-content-header. Working a charm now!

Cheers
Chris

Glad I could help :)

Hello, sorry to drag up an old post but I think it would be a great inbuilt GP feature to be able to assign the focal point of a featured image on each post/page (even if using a page hero element). I know you can do it with custom background-position css but it's a bit of a pain keeping track of it! Would be great if you could see it easily in the editor without the need for an additional plugin and with elements integration.

Thanks

Hi Joel,

Unfortunately something like this should definitely be a custom solution when it's needed.

We try to add options that are useful for the majority of our users to avoid bloat and keep GP lightweight and fast.

Fair enough, I can appreciate you wanting to keep things as lightweight as possible - it's just a feature I've found very useful with other themes/CMS.

Thanks

No problem :)