[Support request] Images not displaying after migration + post editor styling

Home Forums Support [Support request] Images not displaying after migration + post editor styling

Home Forums Support Images not displaying after migration + post editor styling

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2364803
    Bright Idiots

    Two questions:

    1. After migrating to GeneratePress + Generateblocks from another popular theme, there’s an issue with the images.

    Not all images are displayed in the frontend. This is caused by the image dimensions added at the end of the imageURL, i.e.: domain.com/wp-content/imagename-1024×600.jpg. If I manually change this in the post editor to domain.com/wp-content/imagename.jpg, they re-appear.

    Already regenerated the images, but no solution yet. Is there a way to fix this?

    2. Links aren’t visible in the post editor, probably because we’re using some manual linksstyling in-post and set the linkcolor in customize to black.

    I added the code below, so all styling is removed. If I want to edit a page for example, there’s no styling, which makes it undoable to edit the GB for example.

    add_action( 'after_setup_theme', function() {
        remove_action( 'enqueue_block_editor_assets', 'generate_enqueue_backend_block_editor_assets' );
    } );

    Is there a solution, to keep using the underlined links (via CSS) and still have the ‘styling’ active in the post editor with links visbible?

    Thanks!

    #2364814
    Fernando
    Customer Support

    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

    #2364842
    Bright Idiots

    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.

    #2364867
    Fernando
    Customer Support

    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;
    }
    #2365102
    Bright Idiots

    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 (-1024×576.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!

    #2365369
    David
    Staff
    Customer Support

    Hi there,

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

    #2365374
    Bright Idiots

    Of course, info in PI.

    #2366016
    David
    Staff
    Customer Support

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

    2022-10-07_11-03-25

    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 ?

    #2366195
    Bright Idiots

    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!

    #2366204
    David
    Staff
    Customer Support

    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.

    #2366223
    Bright Idiots

    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?

    #2366965
    David
    Staff
    Customer Support

    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 ?

    #2368624
    Bright Idiots

    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!

    #2368937
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.