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 :)
 

Chris D

XenForo developer
Staff member
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.
 

deslocotoco

Well-known member
"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.
 

deslocotoco

Well-known member
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.
 

deslocotoco

Well-known member
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