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

    Official - Free 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:	206
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:	65
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.

      https://vbmods.rocks/forum/vbulletin...re-in-vb-5-7-2

      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.

        https://tracker.vbulletin.com/vbulle...sues/VBV-21448

        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

            https://tracker.vbulletin.com/vbulle...sues/VBV-21462

            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:	24
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:	20
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.

                      Latest Topics

                      Collapse

                      • eliavstriker
                        Hello
                        by eliavstriker
                        Hello everyone!...
                        Yesterday, 01:56 PM
                      • Eolesen
                        Howdy from Trainsim.com
                        by Eolesen
                        I'm a new owner of a legacy 4.2.5 forum hosted at Trainsim.com , and totally drinking from a firehose on vBulletin and its quirks.

                        Hoping...
                        03-21-2023, 09:31 AM
                      • alex
                        hello from France
                        by alex
                        Hello,

                        Thanks for welcoming me on the vbmods.rocks website, I have a vb forum since many years (2007).

                        I left the administration...
                        03-19-2023, 05:51 AM
                      • RSA
                        Hello
                        by RSA
                        Hello, my name is Ronny and I come from Germany. I have vbulletin v5.6.9


                        I'm trying to get used to it and I hope to find some tips...
                        03-17-2023, 11:28 AM
                      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 "|||"