Custom Cornerstone Element - Graphic Parameter Being Saved like "1234:full"

[brianjohnsondesign]

So I have a custom cornerstone element that I’ve been using for years, and it has stopped working properly with the newest versions of WordPress and X Theme / Pro (I’ve tested with both).

Basically what happens is that when you save the image using the parameters in the cornerstone editor, it saves the SRC as the ID of the image and then the thumbnail size you want. it doesn’t actually figure out the proper URL.

I’ve looked into the database to see how it is saving the shortcode, and it actually saves it wrong there.

So for example, the generated shortcode SHOULD be:

[custom_element graphic=“http://example.com/wp-content/uploads/example-image.jpg”]

But instead, what you end up with is:

[custom_element graphic=“123:full”]

The image ID is 123 and I chose full-size, and that’s what it does with it. This worked even just a couple weeks ago.

The functionality being used here is something built-in to the theme and/or Cornerstone, so I’m not really sure how to accommodate it.

What changed and what do I need to do to fix it?

Note that I tested on two very different sites. I tried with older PHP versions and also 7.3. It works fine with everything until I’m using the newest version of WordPress and X Theme or Pro, and then it stops working (note that it doesn’t affect previous instances of the element unless I try to swap out the image)

For reference, here is the snippet of code we have in our file to generate the controls and parameters for our element:

'graphic' => array(
	'type'    => 'image',
	'ui' => array(
		'title'   => __( 'Image', 'si-custom-elements' ),
        'condition' => array(
        'graphic' => 'image'
        )
	)

I don’t really think anything else is relevant, as it just spits out that broken URL (123:full) if the image is defined, or our default image URL we defined if not. So those parts work as intended.

It’s literally just the use of an “Image” parameter within Cornerstone.

The “Classic Image” element appears to continue working (though it appears to have been updated).

Any ideas?

[alexander]

Hi @brianjohnsondesign,

Thanks for writing in about this. I’m sorry about that, it was somewhat of a breaking change for newly added images. Prior to Cornerstone 5 all images were saved as a URL so that “just worked” but now the builder will save them as a combination of the attachment ID and selected thumbnail size (e.g. 1234:full, 5678:medium) as you’ve probably detected.

The reason the classic element works is because we’re wrapping the attribute with a function to resolve the image URL like this:

$src = cs_resolve_image_source( $src );

That takes 1234:full and returns the URL to the image. You could wrap your graphic attribute in a similar call to fix this.

The cs_resolve_image_source function is a helper that we primarily use in classic elements and it’s a simple one argument wrapper around the cs_apply_image_atts function which is more comprehensive and can let you access the alt text from the media library. Both functions are in cornerstone/includes/elements/helpers.php if you wanted to poke around at the source code.

Hopefully this helps!

[marcor]

Hi Alexander,
Saving the images as attachment ID and selected thumbnail size is breaking the schema standard:

As is Schema expect an URL, not the attachment ID.

Please check it asap.

Kindest regards.

[ruenel]

Hey @marcor,

At this time we kindly ask that you open up your issue in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off-topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Best Regards.

[brianjohnsondesign]

Thanks so much for that response! I figured it would be something like that and your answer makes perfect sense.

I was able to make an update simply using your helper function cs_resolve_image_source.

@alexander

$src = cs_resolve_image_source( $src );

Basically just used that and subbed out my variable names and it worked just fine! I was worried it would break the images that were previously working but it did not.

Thanks for your help!

[alexander]

Hi @marcor,

Thank you for letting us know about the schema error with the testimonial element. I’ve taken a look and can confirm this. We’ll see what we can do to get it corrected in the next cycle.

@brianjohnsondesign, that’s great! Glad to hear you were able to get it sorted out.