Image Resizer

[Smooth]

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]

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.

 

[Smooth]

does that include linked images Brogan?

 

[Brogan]

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

.bbCodeImage {
max-width: 100%;
}

Change the max-width attribute to suit.

 

[Smooth]

Thanks Brogan,

Have dropped that into the EXTRA.css but it doesnt seem to be having any effect on the image size? Have tried dropping it as far as 20%!

http://www.smoothforum.com/index.php?threads/test-thread.10/

Thanks once again for the help

 

[Mike]

There was a "." missed out, and I'd add important just to be sure:

.bbCodeImage {
max-width: 20% !important;
}

Change the percent or size to fit.

 

[Brogan]

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]

Thanks to the pair of you

Is it ok to define using px size? ie 700... or will that cause issues?

 

[Brogan]

That's fine

 

[Smooth]

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!

 

[Commander]

I do this, but now img is not clickable, how to make it clickable when clik on img to open in full size?

 

[Brogan]

See point 22 here: https://xenforo.com/community/threads/frequently-asked-questions.5183/#post-181037

 

[Commander]

Wow tnx for fast answer

One more question, is there chance maybe to open that linked img like uploaded img in default fancy lightbox gallery!?

 

[Brogan]

The lightbox is only triggered by a thumbnail.

 

[Commander]

OK, tnx for support.

Regards

 

[Zynektic]

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?

 

[Brogan]

You should be able to by using the different classes for message text and signature content.

 

[Martok]

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

<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]

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

<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.

 

[Martok]

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.

Yes, for EXTRA.css.

You may need to add an !important after the max-width in the 481px bit.