XF 2.1 Problems on Unfurling URL's in my XF

deslocotoco

Well-known member
Hello.

I'm getting this problem with a lot of sites, basically no one is working properly.

The nice little box gets very confused when a post a link, specially with some image in the link (post 1):

194128

If the link doesn't have images, the nice little box works good (post 2).

Any help on how i solve this?

Please, ignore our brazilian language :)
 
If I had to hazard a guess, you have some custom CSS which specifically targets images in posts to make them have a fixed or minimum width.

This is likely targeting all images and therefore it is making the unfurl images huge as well.
 
To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
"YOU ARE GOOOD! YEAH YOU ARE!"

Bulls eye! 🎯

This is my codes for images in extra.less:

Code:
/* Resize Image */
@media (min-width: 680px){
.message-body img {
    max-width: 450px !important;
    max-height: 450px !important;
}
}
/* Resize Image */

/* Signature Image Size */
.message-signature
{
    .bbWrapper
    {
        .bbImage
        {
            max-width: 300px;
            max-height: 150px;
            overflow-x: auto;
            overflow-y: auto;
        }
    }
}
/* Signature Image Size */

...and i really don't remember what the Resize Image is good for.
 
Just for update:
I did remove the "@media (min-width: 680px){" from the code and the Unfurling is working fine now.

I don't know why i used this part of the code, but the rest is working good.

I use this because many of my users tend to post very big images and they resize like a thumbnail, making the threads looking good. Same for signatures.
 
Another update:

The problem is back for no reason(???)

My actual extra.less now:

HTML:
/* Resize Image */
.message-body img {
    max-width: 450px !important;
    max-height: 450px !important;
}
/* Resize Image */
/* Node Icons */
#XF{
    .node--id2 .node-icon i::before{
        content: '\f0a1';
    }
.node--id3 .node-icon i::before{
        content: '\f257';
    }
.node--id4 .node-icon i::before{
        content: '\f19c';
    }
.node--id5 .node-icon i::before{
        content: '\f19c';
    }
.node--id7 .node-icon i::before{
        content: '\f21b';
    }
.node--id10 .node-icon i::before{
        content: '\f109';
    }
.node--id9 .node-icon i::before{
        content: '\f26c';
    }
.node--id8 .node-icon i::before{
        content: '\f21e';
    }
.node--id11 .node-icon i::before{
        content: '\f0d6';
    }
.node--id12 .node-icon i::before{
        content: '\f05a';
    }
.node--id16 .node-icon i::before{
        content: '\f1ea';
    }
.node--id17 .node-icon i::before{
        content: '\f041';
    }
    .node--id18 .node-icon i::before{
        content: '\f0ac';
    }
    .node--id19 .node-icon i::before{
        content: '\f258';
    }
    .node--id20 .node-icon i::before{
        content: '\f02d';
    }
    .node--id21 .node-icon i::before{
        content: '\f11b';
    }
    .node--id22 .node-icon i::before{
        content: '\f1e3';
    }
    .node--id27 .node-icon i::before{
        content: '\f132';
    }
}
/* Node Icons */

/* Signature Image Size */
.message-signature
{
    .bbWrapper
    {
        .bbImage
        {
            max-width: 300px;
            max-height: 150px;
            overflow-x: auto;
            overflow-y: auto;
        }
    }
}
/* Signature Image Size */

/* Jump Button */
#scrolldownhere
{position:relative;top:-500px}
/* Jump Button */

/* Donations Icon */
.p-nav-list .p-navEl a.p-navEl-link[data-nav-id="doacoes"]:before { content: "\f0d6"; }
/* Donations Icon */

/*Invert Button */
.formButtonGroup .formButtonGroup-primary .button--icon--reply
{
  float: right;
  margin-left: 7px;
}
/*Invert Button */

/*Action Bar*/
.actionBar-action:before {
    margin-right: 5px;
}
.actionBar-action--edit:before {.m-faContent("\f040");}
.actionBar-action--report:before {.m-faContent("\f071");}
.actionBar-action--ip:before {.m-faContent("\f002");}
.actionBar-action--delete:before {.m-faContent("\f00d");}
.actionBar-action--spam:before {.m-faContent("\f024");}
.actionBar-action--warn:before {.m-faContent("\f12a");}
.actionBar-action--history:before {.m-faContent("\f1da");}
/*Action Bar*/
 
Top Bottom