[Resolved] Captions for scaled images are failing.

[Author]

Posts

[CSS Web]

Aloha - this is a follow-up inquiry to thread previously resolved:

https://toolset.com/forums/topic/captions-display/

Tell us what you are trying to do?

Troubleshoot a pair of display issues associated with a custom solution you provided for me a few months ago.

1) Broken captions

2) loading FULL images ... would like to dumb down to MEDIUM

The issue didn't appear at the time you helped me - I just found it yesterday while preparing some training materials.

---

To summarize, I'm trying to display images/captions in the right sidebar of a POST template.

For the most part - it's working GREAT! 🙂

The is the shortcode used on the template: [repeating-media-field field="wpcf-pimages"]

Here is the custom code:

<?php
/**
* New custom code snippet (replace this with snippet description).
*/

toolset_snippet_security_check() or die( 'Direct access is not allowed' );

// Put the code of your snippet below this comment.

add_shortcode('media-field', function ($atts = [], $content = null) {

// provide default
$atts = shortcode_atts(
array(
'output' => 'title',
),
$atts
);

$output = '';

if (isset($content)) {
$url = do_shortcode( $content );

// get the ID of the media post for the URL contained in content
$media_id = attachment_url_to_postid($url);

$media = get_post($media_id);

switch ($atts['output']) {
case 'title':
$output = $media->post_title;
break;
case 'caption':
$output = $media->post_excerpt;
break;
case 'description':
$output = $media->post_content;
break;
case 'alt':
$output = get_post_meta( $media_id, '_wp_attachment_image_alt', true );
break;
}
}
return $output;
});

add_shortcode('repeating-media-field', function($atts = []){
global $post;
// provide default
$atts = shortcode_atts(
array(
'field' => 'wpcf-pimages',
),
$atts
);

$output = '';
$images = get_post_meta( $post->ID, $atts['field'], false); // false to return an array of image_urls
foreach( $images as $index => $image) {
// get the image, note how we use $index
$output .= wpv_do_shortcode('[types field="pimages" index="' . $index . '" title="%%TITLE%%" alt="%%ALT%%" size="full"][/types]');
// get the image's caption
$output .= wpv_do_shortcode('[media-field output="caption"]' . $image . '[/media-field]');
}
return $output;
});

Is there any documentation that you are following?

Just what was offered in the thread above.

Is there a similar example that we can see?

Yes - hidden link

Here is the issue with images in the right sidebar (max pixel dimensions are listed on images, and under as a Caption).

1) Captions for images that were uploaded UNDER the WordPress max of 2560 pixels are working just fine (see attached image).

2) Captions for images that were uploaded OVER the WordPress max of 2560 pixels are failing - oddly, Captions are displaying the POST EXCERPT (see attached image).

Clearly, something to do with WP image auto-scaling.

I'd really like TWO things to happen.

1) Adress the broken caption/excerpt issue.

1) Can the code pull the MEDIUM image - rather than the FULL?

--- I'm wondering if this alone might fix the weird broken caption for images being scaled on import by WP.

Pulling the MEDIUM image will also be very helpful in getting my page speeds down.

I tried it myself in the code above (size="full" to size="medium") but it broke the display - so I panicked and rolled back 🙂

Sorry, I lack the confidence to do this myself.

What is the link to your site?

hidden link

Millions of thanks for your continued support -- Toolset is AWESOME.

[Luo Yang]

Hello,

Since it is a custom codes problem, please provide a test site with the same problem, also point out:
- The problem page URLs
- Where I can edit your custom PHP codes,

I need a live website to test and debug it, thanks

[Luo Yang]

I have tried the credentials you provided, but can only see httaccess login window, please check it, make sure the test website is ready for debug. thanks

[CSS Web]

My apologies - I appending the additional privacy login details to the private message.

Thank you again 🙂

[Luo Yang]

Your website is abnormal, I have tried these:
1) Modify the PHP codes "media-field", add line 25~26 to:

        // get the ID of the media post for the URL contained in content
        $media_id = attachment_url_to_postid($url);
      var_dump($media_id);

2) Test it in frontend:
hidden link

The first three images outputs 0 value, so WordPress function attachment_url_to_postid() can not get the media file ID in your website, the function attachment_url_to_postid() does not work in your website, see WP document:
https://developer.wordpress.org/reference/functions/attachment_url_to_postid/

So there should be other compatibility issue in your website, please try these:
deactivate all other plugins, and switch to WordPress default theme 2021, upload those images, and test again

[CSS Web]

Aloha Luo,

I don't think we're heading in the right direction.

The issue appears to be one with - attachment_url_to_postid() - not knowing what to do with images above 2560px, which have been scaled by WordPress during upload ... ie. "-scaled" has been added to the file name.

The first three images - outputs 0 value - as they were all scaled by WordPress.

The code your team provided works perfectly for images UNDER the 2560px threshold - unscaled images.

I'm trying to find a solution for high res. images as I cannot guarantee that my users will follow my instruction to resize images below 2560 before upload.

This issue seems known to the WordPress community:

https://core.trac.wordpress.org/ticket/51058

^ I'm just not techi enough to understand if a solution is being presented on the thread above.

Thanks

[Luo Yang]

Thanks for sharing the link, since it is a WordPress core issue, we won't be able to fix it, you might consider to upload smaller images to avoid the problem.