New WP Version breaks Grid

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #69383
    Thomas Ulbricht
    Participant

      Hi Olly,

      after updating to the newest WP Version the grid is broken … and in a really strange way. The Grid is implemented with the following shortcode:

      [wppizza category=”traditionell” noheader=”1″ exclude=”106,108″ elements = “thumbnail, title, content, prices”]

      It looks like this :

      https://lockruf.com/wp-content/uploads/Screenshot-2024-12-06-155006.png

      And when rolling back to the old WP version everything is fine again …

      Any Idea what can cause this or can you fix this ?

      Thx
      Thomas

      #69384
      Thomas Ulbricht
      Participant
        This reply has been marked as private.
        #69385
        Thomas Ulbricht
        Participant
          This reply has been marked as private.
          #69387
          Olly
          Admin & Mod

            Has nothing to do with wppizza. WPPizza does not set image sizes like that.
            it only ever gets the thumbnail depending on what’s set as thumbnail sizes
            and generates and outputs something like this:

            <img width="64" height="64" src="http://[somedomain]/wp-content/uploads/2022/08/pizza-64.png" class="wppizza-article-image-thumb wp-post-image" alt="" title="Special Pizza" />

            your theme – or some plugin – generates this:

            
            <img loading="lazy" decoding="async" width="768" height="768" 
            src="https://[somedomain]/wp-content/uploads/2024/10/pizza_pomodori.png" 
            class="wppizza-article-image-thumb wp-post-image" 
            alt="" 
            title="Pizza POMODORI" 
            srcset="https://[somedomain]/wp-content/uploads/2024/10/pizza_pomodori.png 300w, https:/[somedomain]e/wp-content/uploads/2024/10/pizza_pomodori-150x150.png 150w, https://[somedomain]/wp-content/uploads/2024/10/pizza_pomodori.png 768w, https://[somedomain]/wp-content/uploads/2024/10/pizza_pomodori.png 1024w, https://[somedomain]/wp-content/uploads/2024/10/pizza_pomodori.png 800w" 
            sizes="auto, (max-width: 768px) 100vw, 768px">
            

            you will also find that where your images look the right size the last declaration is

            sizes="(max-width: 768px) 100vw, 768px"
            instead of
            sizes="auto, (max-width: 768px) 100vw, 768px"

            i.e whatever generates the “auto” is your culprit. Only you will know whether that’s a theme or plugin. I can guarantee you though it’s not wppizza

            #69388
            Umut
            Participant

              I experienced the same problem.

              My solution:
              In the custom CSS section, I added the following code:

              /* Article Images */
              .wppizza-article-default .wppizza-article-image .wppizza-article-image-thumb {
              width: 100px; /* Sets the width of all images to 100px */
              height: auto; /* Adjusts the height proportionally */
              max-width: 50% !important; /* Sets a maximum width limit */
              }
              /* end of article images */

              Thanks Umut

              #69394
              Thomas Ulbricht
              Participant

                HEy Olly, thanks for checking out … I disabled everything exept the WP Pizza PLugin and set it to the Twenty Twenty-Fout Standard Team and it still look like s$%t …

                I DOn’T say it is the WP Pizza PLugin – but it seems it does not work correctly with WP 6.7.1.

                As soon as I do a rollback to the older WP Version everything is fine again …

                So yeah … it seems to be the core WP but WP-Pizza should work fine with it… SO mayber you can check again please ?

                I can also give you an admin login to the site if you want…

                #69396
                Thomas Ulbricht
                Participant

                  Args… Sorry… it seems to be this plugin : https://wordpress.org/plugins/exmage-wp-image-links/

                  Damn … Sorry again. If I upload the pictures directly it seems to work.
                  The CSS SOlution from Umut doesn_t work for me … bur maybe I find another way…

                  🙁

                  #69398
                  Olly
                  Admin & Mod

                    Just out of curiosity, I had a dig around. So below some comments which may (or may not) be helpful
                    Not exhaustive research though. Maybe it helps someone somewhere.

                    >If I upload the pictures directly it seems to work.
                    Yup. If you upload pics the regular way with wordpress, it generates 4 distinct separate images scaled and/or cropped.
                    exmage-wp-image-links (other/similar plugins may do the same) simply uses the image you added which then gets resized via css and image attributes. No actual resizing/cropping is taking place.
                    Since WP 6.7 WP adds the ‘auto’ attribute – if it’s missing and in certain circumstances – to the image sizes attribute.
                    So if the actual (thumbnail) image is meant to be square – but the actual image is not – it will simply be distorted to make it square.

                    As it turns out, you can actually turn this off with the filter below, but this might have implications elsewhere.
                    I did not want disappear all the way down that rabbit hole – so if you do that , make sure to check all your images / pages .
                    Perhaps it works or perhaps it’s just a starting point . All depends on your particular site setup and many other factors. Suffice to say, it’s out of my (wppizza) hands and evidently something that WP introduced to the detriment of these kind of plugins…

                    
                    //remove auto from image sizes attribute (if set to lazy) 
                    add_filter('wp_img_tag_add_auto_sizes', 'myprefix_img_tag_remove_auto_sizes');
                    function myprefix_img_tag_remove_auto_sizes(){
                    return false;
                    }
                    
                    #69400
                    Thomas Ulbricht
                    Participant

                      Wow Olly… thanks so much!!! That helped and now it works again 🙂 Thank you!!!

                    Viewing 9 posts - 1 through 9 (of 9 total)
                    • You must be logged in to reply to this topic.