- This topic has 9 replies, 2 voices, and was last updated 3 years, 11 months ago by
Tom.
-
AuthorPosts
-
March 4, 2017 at 11:47 pm #287224
Chris
Hi Tom,
I’m using GP Premium – the Header plug-in.
I’m trying to find a way to set a focus point in the full width image so it scales to a sensible place (such as a face rather than random background) when viewing on mobile/tablet. At the moment it seems fairly arbitrary as to where it chooses to focus on.I have found a plug-in called WP SMART CROP which works beautifully for images elsewher in the site e.g. Featured images – however, in the GP header images, GP seems to be overiding the functionality of this plug-in.
Two questions:
1. Is there a tried and tested way of doing this that I have yet to find in the forums?
2. If not – can you point me in the right direction of allowing WP SMARTCROP to provide the image cropping for the theme?Thanks,
ChrisGeneratePress 1.3.44March 5, 2017 at 9:20 am #287406Tom
Lead DeveloperLead DeveloperHi 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 5, 2017 at 10:14 am #287435Chris
Hi Tom,
Currently, i’my testing using the settings on a specific page/post. NI, the resize options are not set currently.
Chwere
ChrisMarch 5, 2017 at 7:43 pm #287577Tom
Lead DeveloperLead DeveloperIf 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 5, 2017 at 8:02 pm #287592Chris
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
ChrisMarch 5, 2017 at 10:49 pm #287612Tom
Lead DeveloperLead DeveloperAh, 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 7, 2017 at 1:03 pm #288448Chris
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!
ChrisMarch 7, 2017 at 5:21 pm #288567Tom
Lead DeveloperLead DeveloperThat 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%' );
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 7, 2017 at 5:32 pm #288576Chris
Thanks Tom,
It was the . I was missing before generate-content-header. Working a charm now!
Cheers
ChrisMarch 7, 2017 at 9:53 pm #288618Tom
Lead DeveloperLead DeveloperGlad I could help 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.