Request: Make this work with background images

While it is certainly possible for the same cropping method to work with background images (in modern browsers), it would be difficult to build into a plugin, as wordpress leaves the markup used for background images to the theme to implement, so it would require manual modifications by the theme, or much more resource intensive ajax image checks by the plugin, that would degrade site performance.

I may look into adding some helper functions, so that theme developers can add support for background images, if they so feel, but no promises.

If you can show me an example of where you’re having issues with using image tags, I may be able to suggest a workaround.

• This reply was modified 8 years, 6 months ago by wpsmartcrop.

Hi there,

I’m experimenting with this at the moment as well.

This css is working beautifully to refocus the background images to a focus point I specify manually.

https://www.w3schools.com/cssref/pr_background-position.asp

What I am wondering is whether it is possible to use the focus point set by wp SmartCrop as a variable that the CSS can use as its focus point.

Many Thanks in advance for your help!
Chris

Background images are pretty much guaranteed to require some custom code to implement. as WordPress has no standard way to output HTML for a container with a background image.

My first suggestion would be to not use background images at all, and instead just add your image as the first child of your container, and use position: absolute; top:0;left:0;width:100%;height:100%;, and make sure position is set on the parent element. That way, SmartCrop can work as expected.

I’m doing some major rewrites for the next version, and will attempt to add javascript support for background images in the process, but you will still need some custom scripting to initialize the plugin for these elements and provide it with some necessary data about the image.

Thanks for your suggestion. This looks like it will cause problems with the theme I’m using.

I’m attempting to use jQuery to set the css for the background-position property. this is working well using test variables.

I was hoping you might be able to point me in the right direction for how I might return the variable data-smartcrop-focus using jQuery which seems to contain the info I need.

Thanks
Chris

the data-smartcrop-focus can’t be added from jQuery alone, because the attribute contains a set of percentages for the x and y coordinates of the focus that are stored in the database as image-meta values. You’ll need to modify the php code that outputs the url for the background image to also output the focus. As it is, jQuery has nowhere to grab the data from.

This is definitely not a mod that you’ll be able to accomplish without making modifications to your theme. If you can provide a link to a site running this theme, I can look into the complications involved in retrofitting for smartcrop, but there is no general purpose solution for this.

Sure:

https://test.karlanorton.co.nz/wordpress/performances/lunchtime-concert/

is the page I’ve been doing all my testing on at the moment. The Theme is GeneratePress using their Premium Header PLug-in.

This particular plugin seems to be a nightmare for trying to solve this problem, as it doesn’t even set the background image as an attribute of the header, but instead as a separate css style in the header. I highly doubt that you’d be able to retrofit the plugin in question to support wpsmartcrop without working closely with the plugin developer.

However, the actual task of adding a full-width header image seems relatively easy to do in your template directly, by using the featured image, and simply outputting it into a full-width <header> tag, followed by any content you want inside.

Then you could simply use the absolute positioning method I mentioned above, to get the style you’re looking for.

But yeah, I don’t think integration is going to be possible with this specific plugin.