Issue with the image custom field (missing thumb preivew)

[speedwheel]

Version

• Carbon Fields: 3.0.0-rc3
• WordPress: 5.0.2
• PHP: 7.2.13

Expected Behavior

The image custom field should show a thumb preview with the selected image.

Actual Behavior

The image custom field is showing a 0 instead, but the value is saved. This happens only after you refresh the page. What is weird is that I have 2 custom fields of type image, but the first one works just fine.

Container definition

add_action( 'carbon_fields_register_fields', 'crb_speakers_options' );
function crb_speakers_options() {
    $speakers = get_speakers_array();
    Container::make( 'post_meta', __( 'Speaker custom fields', 'crb' ) )
    ->where( 'post_type', '=', 'speakers' )
    ->add_fields( array(
        Field::make( 'text', 'crb_speaker_subtitle', 'Subtitle' ),
        Field::make( 'image', 'crb_speaker_thumb', 'Thumbnail image' )
            ->set_value_type( 'url' ),
        Field::make( 'image', 'crb_speaker_mobile_img', 'Mobile image' )
            ->set_value_type( 'url' )
            ->set_visible_in_rest_api( $visible = true )
    ) );
}

Steps to Reproduce the Problem

1. Create a custom field of type image
2. Upload an image to the custom field from inside wordpress
3. Refresh the page and observ the missing thumb preview

Comments

From what I see the image from the first custom field was added in the past with a different verion of carbon fields, so that's why is still showing. If I remove it and add it again it will also show 0.

Any tips?

LE: I found the problem, but I am not sure how to fix it:

• I am using a plugin called "Parallelize Downloads", so basically all my attachments use a different domain then the one the website uses. If I go in the database and change this domain with the one from the website, then the preview of the image works!
  Any fixes so the attachments also work with custom domain different then the one from the main website?

[jorostoyanov]

Hi @speedwheel,

Thank you for the thorough example and additional information of the issue.

We have released v3.0 in which the issue should be fixed. Can you try updating to the latest version by using:

composer require htmlburger/carbon-fields

and let me know if this solves the problem?

[speedwheel]

Hello @jorostoyanov, thank you for the quick reply, I 've updated using composer require htmlburger/carbon-fields, but the problem still persists, the only change that I see now is that there is no 0 showing anymore:

The value is showing, but it's missing the img html tag.

[jorostoyanov]

Hi @speedwheel,

In your case the value stored in database for your image fields is the URL of the image and since it is not hosted on the same domain as your site (because of the "Parallelize Downloads" plugin) Carbon Fields is not able to determine the attachment ID and thus cannot display a preview of the image.

Because of that, we are introducing a new filter carbon_fields_attachment_id_base_url, which accepts the attachment URL as the first parameter.

You will be able to hook a function to this filter and apply custom logic to determine the attachment ID like so:

add_filter( 'carbon_fields_attachment_id_base_url', function ( $url ) {
	return str_replace( 'https://s2.bunity-edge.com/', home_url( '/' ), $url );
} );

I noticed that the only difference in the attachment URL is the domain. You can try replacing it with the domain of your site like the example above. If this doesn't help, you might have to dig deeper and find how the "Parallelize Downloads" plugin keeps the association between the external url and the local attachment.

The filter is now in the development branch and will be available in the next minor release.

Here is the associated commit -- b3f80f2

Hope this helps! Let me know, if you stumble upon any issues :)

[vvasilev-]

Closing this issue since the fix is released in Carbon Fields 3.0.1.

[speedwheel]

@vvasilev- I've updated to 3.0.1 but the problem still perists.

LE: it works with @jorostoyanov snippet code, thanks.

[Brayn7]

This may not be an issue for most people, but it was still an issue for me on 3.1.1. I updated my permalinks and it solved my issue. I was getting a 404 on the rest_route.

"If it displays a 404 error then update permalinks first"

https://stackoverflow.com/questions/34670533/wordpress-rest-api-wp-api-404-error

works on all the permalink options besides "plain". I didn't try any custom permalink configurations yet.

[tambaqui]

The problem persists in version 3.1.18, although the file is on the same hosting and even changing the permalinks, with ->set_value_type ('url') the url is saved, but the preview shows nothing.

[phamgiahung1368]

have the same problem in carbon field version 3.3.0, image which has been saved not show the preview in edit page

[fernandopro]

Same problem in version 3.3.4.
I am using Plugin Quickstart version

[morkich]

fast fix
admin js

const carbonFieldsImagesFix = (() => {

    const getImage = (imageUrl) => {
        return `<img src='${imageUrl}' class='cbImagePlug'/>`;
    }

    const insertImageBlocks = (imageBox) => {
        const inputImageBox = imageBox.querySelector('input');
        const imageUrl = inputImageBox?.value;
        const image = getImage(imageUrl);
        inputImageBox.insertAdjacentHTML('afterend', image);     
    }

    const init = () => {
        const cbImagesWraps = document.querySelectorAll('.cf-file__inner');
        cbImagesWraps.forEach(imageBox => insertImageBlocks(imageBox));
    }

    document.addEventListener("DOMContentLoaded", init);
})();

admin css

.cbImagePlug {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}