• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Image Resizer

Smooth

Active member
#1
Hey all,

Have been searching to no avail to try and find a Xen image resizer that will automatically resize any attached on linked images to a set size?

It is a photography forum we are setting up so it is a fairly crucial element.

Many thanks in advance for your replies.
 

Brogan

XenForo moderator
Staff member
#2
Just so you are aware, all images over a certain size will be resized down to the maximum size set in the ACP.

Smaller images won't be increased in size though.
 

Brogan

XenForo moderator
Staff member
#4
Linked images will automatically fit the post body width, but this can be changed to a percentage or fixed size by adding this to EXTRA.css
Code:
.bbCodeImage {
max-width: 100%;
}
Change the max-width attribute to suit.
 

Mike

XenForo developer
Staff member
#6
There was a "." missed out, and I'd add important just to be sure:

Code:
.bbCodeImage {
max-width: 20% !important;
}
Change the percent or size to fit.
 

Brogan

XenForo moderator
Staff member
#7
It seems to be working for me, changing the value in Firebug.

If the images are smaller than the max-width, then they won't be affected.

Edit: Do'h! Just seen Mike's post - bad code from me.
 

Smooth

Active member
#10
Still absolutely in love with Xen... everything... just works! No 3 hours of coding just to make one change, and you guys have clearly built with cleanliness and layout in mind.

Thanks again!
 

Zynektic

Well-known member
#16
Sorry for bumping but is there a way to adjust this for the threads and the signatures as different sizes? Our conversations window on smaller screens has the signatures going over the sidebar whereas threads it is fine.

If I use points 22 and 23 to limit signature sizes such as 23 being 500w x 250h on point 22 in your FAQ Brogan can I adjust that to fit the signature images right?
 

Martok

Well-known member
#18
@Zynaphix if it helps, this is basically what I am using to display signature images at different sizes based on the screen width (ie so it works with tablets and mobiles):

Code:
<xen:comment>Limiting image sizes in signatures</xen:comment>
<xen:if is="@enableResponsive">
    @media (min-width:700px) {
        .signature.messageText img {
        max-height: 125px !important;
        max-width: 550px !important;
        }
    }
    @media (min-width:481px) {
         .signature.messageText img {
        max-height: 125px;
        }
    }
</xen:if>
The first part ensures that signatures conform with the max sizes I have specified on my site. The second part it so that images will shrink at smaller screen widths.

Below 481px is narrowResponsiveWidth (as defined in the Responsive section of the ACP) and signatures aren't displayed at all - this is for mobile phone sized screens.

Adjust the sizes and the min-widths as appropriate for your forum.
 

Zynektic

Well-known member
#19
@Zynaphix if it helps, this is basically what I am using to display signature images at different sizes based on the screen width (ie so it works with tablets and mobiles):

Code:
<xen:comment>Limiting image sizes in signatures</xen:comment>
<xen:if is="@enableResponsive">
    @media (min-width:700px) {
        .signature.messageText img {
        max-height: 125px !important;
        max-width: 550px !important;
        }
    }
    @media (min-width:481px) {
         .signature.messageText img {
        max-height: 125px;
        }
    }
</xen:if>
The first part ensures that signatures conform with the max sizes I have specified on my site. The second part it so that images will shrink at smaller screen widths.

Below 481px is narrowResponsiveWidth (as defined in the Responsive section of the ACP) and signatures aren't displayed at all - this is for mobile phone sized screens.

Adjust the sizes and the min-widths as appropriate for your forum.
Thanks for this but is it for EXTRA.css? I have added it and adjusted the values a few times and it does not seem to resize the widths, thanks.