Announcement

Collapse
No announcement yet.

How to fix the blank thumbnail on URL Preview in vB 5.7.2

Collapse
This is a sticky topic.
X
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Free Mod How to fix the blank thumbnail on URL Preview in vB 5.7.2

    Starting vB 5.7.2, a new feature called "URL Preview" was implemented. If you place a URL on its own line in a post, it will display a thumbnail, title and description from the linked page after posting. The thumbnail is pulled from the first image on the linked page. In cases where a linked page does not have an image or if vB could not pull the image for some reason, vB 5.7.2 displays a "blank" thumbnail which doesn't look good.

    Click image for larger version

Name:	image.png
Views:	2681
Size:	14.7 KB
ID:	25962

    Fortunately, there is a way to display a generic thumbnail icon by simply adding this custom CSS in css_additional template:

    Code:
    .b-bbcode__url--preview img[src=''] {
        display: block;
        box-sizing: border-box;
        background: url(path/to/the/image.png) no-repeat; /* Replace path/to/the/image.png with the appropriate 90x90 image URL */
        width: var(--thumb-size);
        height: var(--thumb-size);
        padding-left: var(--thumb-size);
        background-size: contain;
    }


    You must have a 90px by 90px thumbnail icon to use as the generic icon. Upload it to your server and then specify the path in the background url in the CSS code above.

    Click image for larger version

Name:	image.png
Views:	1336
Size:	16.1 KB
ID:	25963


    That's much better than a blank image.​
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Certainly better than a broken/blank image.

    Simple install and working well.
    Good work Glenn!

    Comment


      #3
      To fix Access denied errors and other errors that prevent showing the correct URL preview information, please follow the below link for the solution.

      Starting vB 5.7.2, a new feature called "URL Preview" was implemented. If you place a URL on its own line in a post, it will display a thumbnail, title and description from the linked page after posting. However, some sites (e.g. Shopify) display a broken image and "Access denied" as page title. Some sites


      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


      • glennrocksvb
        glennrocksvb commented
        Editing a comment
        Unfortunately, yes. I will open a bug ticket so that vB can officially fix it on their end.

      • Mitch
        Mitch commented
        Editing a comment
        Thank you for all your expertise on this. Without your help VB would be a broken product in so many areas. Coffee will be forthcoming

      • Mitch
        Mitch commented
        Editing a comment
        Can you link the bug ticket here, we need to all vote

      • glennrocksvb
        glennrocksvb commented
        Editing a comment
        But even if they officially fixed the Access denied issue, you still need the CSS fix unless they also fix the blank/broken image which is a separate issue that may still occur for linked sites that have no image content or if vB failed to extract an image for some other reasons.

      • glennrocksvb
        glennrocksvb commented
        Editing a comment
        Bug ticket posted in the other post.

      #4
      For issue on non-square thumbnails showing just part of the image, please see this solution:

      https://vbmods.rocks/forum/vbulletin...t-of-the-image
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #5
        Please also vote for this bug ticket.



        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #6
          Your CSS mods worked great for those annoying issues. Unfortunately we had to turn the feature off because of slow upload time when posting a URL preview (cloud if it matters), and when editing a post with a preview it breaks the code

          Comment


            #7
            I also experienced slowness even on a fresh install with very few posts. They cache the URL Preview information so it's only fetched remotely once but even then it's still slow on subsequent loads of a topic.

            When I upgrade to 5.7.2, I'm also going to turn it off.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


            • Mitch
              Mitch commented
              Editing a comment
              That is good to know, I’m not being picky. I did make a bug report for those issues.

            #8
            Here it is



            Comment


            • glennrocksvb
              glennrocksvb commented
              Editing a comment
              Voted!

            #9
            This isn't working for me. The grey outline box disappears and the URL specified .png image (90x90) doesn't show.

            This is the code I used (copied from above, and the background URL to the image given:
            Code:
            /* Fix blank thumbnail on URL Preview - START */
            .b-bbcode__url--preview img[src=''] {
                display: block;
                box-sizing: border-box;
                background: /srv/www/kubuntuforums.net/public_html/core/images/bbcode/NIA.png no-repeat; /* Replace path/to/the/image.png with the appropriate 90x90 image URL */
                width: var(--thumb-size);
                height: var(--thumb-size);
                padding-left: var(--thumb-size);
                background-size: contain;
            }
            /* Fix blank thumbnail on URL Preview - END */​
            This is the .png image I created:

            Click image for larger version

Name:	NIA.png
Views:	146
Size:	1.7 KB
ID:	26166
            The Linux Community has given me much. I do what I can to return the favor!

            Comment


              #10
              The path to the image is incorrect. It's a URL not server path which is not accessible publicly.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #11
                And the image URL path should be inside url(path here)
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #12
                  Originally posted by glennrocksvb View Post
                  And the image URL path should be inside url(path here)
                  Meaning the image to be specified is one saved on an external site; not on our server?
                  The Linux Community has given me much. I do what I can to return the favor!

                  Comment


                    #13
                    Originally posted by glennrocksvb View Post
                    Upload it to your server and then specify the path in the background url in the CSS code above.
                    So how should the background: url() be written for us?
                    The Linux Community has given me much. I do what I can to return the favor!

                    Comment


                      #14
                      Figured it out.
                      Code:
                      /* Fix blank thumbnail on URL Preview - START */
                      .b-bbcode__url--preview img[src=''] {
                          display: block;
                          box-sizing: border-box;
                          background: url(core/images/bbcode/INA.png) no-repeat; /* Replace path/to/the/image.png with the appropriate 90x90 image URL */
                          width: var(--thumb-size);
                          height: var(--thumb-size);
                          padding-left: var(--thumb-size);
                          background-size: contain;
                      }
                      /* Fix blank thumbnail on URL Preview - END */
                      ​
                      Click image for larger version

Name:	Screen Shot 2023-02-12 at 11.56.26 AM.png
Views:	93
Size:	124.2 KB
ID:	26173
                      Attached Files
                      The Linux Community has given me much. I do what I can to return the favor!

                      Comment


                        #15
                        Code:
                         background: url(/core/images/bbcode/NIA.png) no-repeat;
                        ​​​
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


                        • glennrocksvb
                          glennrocksvb commented
                          Editing a comment
                          Didn't see your previous post.

                      Users Viewing This Page

                      Collapse

                      There is 1 user viewing this forum topic.

                      • Guest Guest

                      Latest Posts

                      Collapse

                      Working...
                      X
                      Searching...Please wait.
                      An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                      Please push the back button and reload the previous window.'
                      An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                      Please push the back button and reload the previous window.'
                      An internal error has occurred and the module cannot be displayed.
                      There are no results that meet this criteria.
                      Search Result for "|||"