gschoppe

Hi @awpu, I got your email and am investigating. It haven’t reviewed Photon for the last year, and it looks like the service has changed a fair amount in that time. It looks like photon is replacing the entire image tag, and not respecting the normal classes and filters that wp_get_attachment_image outputs. I’m hoping I can find a similar filter to the one that SmartCrop uses on normal featured images, that can be used to enable the functionality with this new version of photon, but I am not sure yet if I’ll be successful.

I’ll keep you updated with what I find.

Hi Jan, sorry for the confusion. I’m the lead developer at Burlington Bytes (now called Bytes.co). You can find my bio here: https://bytes.co/company/team/greg-schoppe/

Absolutely! The goal with SmartCrop is to let you control aspect ratio however you want, using CSS.

to force an aspect ratio of 2:1 on a smartcropped image, you add a wrapping div with a class like “featured-image-wrapper”, and then add css like this:

.featured-image-wrapper {
    position: relative;
    padding-bottom: 50%;
}
.featured-image-wrapper > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

There is also the legacy option of using add_image_size() to register a new image size that is 2:1 (or several). Smartcrop will make sure the new image sizes are properly cropped.

Hi psntr,

The reason you aren’t seeing the smartcrop data attributes is that the_post_thumbnail() defaults to using the ‘post-thumbnail’ image size, which is a cropped image size, and therefore cannot be properly smartcropped. To enable smartcropping, just set the image size to any non-cropped image size, such as the_post_thumbnail('full').

Hi Portalp,

The goal of smartcrop is to let you style smartcropped images however you like, to change their aspect ratio. As such, it does require a making some changes to your site’s CSS styles to change an image’s aspect ratio.

for example, if you wanted to make every smartcropped image on the site 200px tall and 100% wide, you could add a css rule either to style.css or in the customizer that looked like this:

img.wpsmartcrop-image {
	display: block;
	width: 100%;
	height: 250px;
}

if you wanted that rule to only apply to the homepage, it would look like this:

body.home img.wpsmartcrop-image {
	display: block;
	width: 100%;
	height: 250px;
}

if you only wanted it to apply to featured images, the exact markup would depend on how your theme is structured, but it might look something like this:

#content header img.wpsmartcrop-image {
	display: block;
	width: 100%;
	height: 250px;
}

The big feature smartcrop adds is being able to apply css styles to any image, just like you would to a div or any other tag, without worrying about setting specific aspect ratios or sizes. No matter what ratio the image ends up being on page, it will still work, even if you resize the window and the image’s aspect ratio changes as a result.

Unfortunately, it doesn’t look like Divi uses the standard WordPress image rendering functions either. You can test by inspecting images on their demo pages. If they were rendered by WordPress functions, they should have a class like wp-image-## on them, as well as having a src-set attribute on the tag. Neither of those seem to be present in the images created by the Divi Page builder.

This is, unfortunately, very common with page builders like Divi or Visual Composer. They ignore the WordPress way of doing things, and instead implement their own proprietary solutions, that offer far less flexibility for developers.

clearly I should stop trying to write code at three am… that was two different typos in two different snippets.

Try this:

add_filter( 'wp_generate_attachment_metadata', "smartcrop_enable_by_default", 20, 2 );
function smartcrop_enable_by_default( $metadata, $post_id ) {
	update_post_meta( $post_id, '_wpsmartcrop_enabled', true );
	return $metadata;
}

Unfortunately, Jupiter theme outputs most images using custom markup, rather than using wp_get_attachment_image(), or any of the other pre-built WordPress functions for outputting image tags. As such, there is no way for wp-smartcrop to be able to identify or modify these images.

I would recommend submitting a support ticket with Artbees (the studio behind Jupiter), although I wouldn’t hold out much hope for them fixing this, as the flaw is baked pretty deeply into their theme.

I’m sorry, I missed a line in the code snippet. Try this:

add_filter( 'wp_generate_attachment_metadata', array( $this, function( $metadata, $post_id ) {
	update_post_meta( $post_id, '_wpsmartcrop_enabled', true );
	return $metadata;
} ), 20, 2 );

You should be able to automatically enable smartcrop with the following code, added to your functions.php:

add_filter( 'wp_generate_attachment_metadata', array( $this, function( $metadata, $post_id ) {
	update_post_meta( $post_id, '_wpsmartcrop_enabled', true );
} ), 20, 2 );

That fix actually won’t work. Not only is editing the plugin files an issue, because it removes the ability to take updates without losing customizations, but just switching the output format won’t change the settings for jQuery UI Datepicker in your JavaScript, and won’t change the settings you use when you parse the saved date.

The column Date type is the place that I noticed the issue, but if you are using a datepicker anywhere else in the plugin, it would also be an issue there.

@senlin Thanks for the snippet. I made a change to it, so that the plugin will no longer read or update a setting from the database on every page load. It should slightly improve performance. I also packaged your code with a plugin header, so that it can be installed via ManageWP, or another multi-install dashboard.

https://gist.github.com/gschoppe/ce88a7821764ef11803a5c64350078b6

I still, however, firmly believe that this is a flaw with the design of the plugin that should be properly fixed so we don’t need two plugins to do the work of one.

Can we at the very least make this “a short time before the merge” so that my sites are ready to have Gutenberg deactivated BEFORE it arrives in the update?

Agreed wholeheartedly. We need to be able to put this plugin in place on all our existing client sites Before the release of 5.0 and have it function out-of-box with no config.

With the current configuration, I’ll need to release yet another plugin, perhaps called Better Classic Editor just to do this the right way.

unrelated to the bug you’re seeing, but if you want to get dynamic cropping working with a little more flexibility, you might want to take a look at https://www.wpsmartcrop.com

Might make life easier for you.