Images not displaying after migration + post editor styling

Hi Bright,

1. How did you migrate the images?

2.For better understanding, can you provide screenshots of the issue?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

1. Via the standard Wordpress export/import

2. The main issue is: links aren't hightlighted/colored in the post editor. Can't really screenshot that. The links look like regular text.

1. To clarify, is it the image names that changed when you migrated or is it the URL in the Image Blocks?

2. You can do so by enqueueing your own style in the Block Editor if you're using a Child theme.

For instance, in your Child Theme directory, you create a new file called my-editor-style.css

Then, add this PHP in functions.php:

add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/my-editor-style.css", false,'1.0', 'all' );
} );

Your my-editor-style.css should have this code for instance to differentiate it:

a {
	color: #ff0000; !important;
}

Thanks for your reply!

1. I'll try to explain:

On the OLD and NEW site, the image block looks like:

<!-- wp:image {"id":XXX,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://domain.com/wp-content/uploads/2022/09/imagename-1024x576.jpg" alt="XXXXXXX" class="wp-image-6947"/>
<!-- /wp:image -->

On the old site, the image is displayed. On the new site, it's not. When I remove the size from the image URL (-1024x576.jpg) it re-appears.

2. Tried adding the code to functions + added the CSS file with the suggested CSS-code, both to child. Doesn't seem work.

Edit: it does work, but not in the 'content area' of the post editor. It works in the sidebar of the post editor.

Thanks!

Hi there,

is it possible to see page where some of the images are broken ?

Of course, info in PI.

Very odd, if i look at the first broken image ie. Chromecast Bluetooth - JBL Speaker and check the HTML on the frontend

https://www.screencast.com/t/zLfc7ygSOA0

This shows the size-large class, and the -1024×576 string - both of which would only get added to the HTML if a Large image size was selected in the Editor.

But if i check that Image in the Media Library its Original ( Full ) size is 1024px, so there is NO large image as WP would not have generated one as the Full size image is the same size as the large image.
If i edit that page and select that image, i can also see that only the Thumbnail, Medium and Full Size options are available.

Its odd, as i cannot see how WP is outputting a Large image when none exists. Unless the other theme was specifically creating its own image attachment sizes.

How many images are like this ?

Thanks for researching! On this particular site, it's about 30 images. Adjusted manually for now. On another site there are about 600?! images.

Just realized, maybe this has something to do with Litespeed's image optimization? Thet add specific widht's and heights to images? Not really sure if this can cause this issue?

Did you also have a chance to look into the post editor links as mentioned above?

Thanks!

How are the link styles added ?

If its is via CSS in the Customizer > Additional CSS then you can use this snippet:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

If its loaded via a child theme style sheet:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'your-editor-style.css';

    return $editor_styles;
} );

change the your-editor-style.css to the name of your stylesheet.

Not really sure if I completely understand, what I did for now:

Made a CSS-file in generatepress-child: my-editor-style.css

I added the red links CSS

a {
	color: #ff0000; !important;
}

I added this to snippets

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'my-editor-style.css';

    return $editor_styles;
} );

But the links are still 'black' in the post editor. Am I missing something?

Ok, so simple link colors should automatically apply from what you have set in the Customizer > Colors > Body > Link or Content > Link - are you not using those settings ?

Just added the link color in the customizer and changed the link-color for articles and some others via CSS (for the frontend).Thanks for the support!

Glad to be of help