We currently have an issue where some users are linking to images on Imgur in their statuses and these images are monstrously huge. Is there a way to automatically resize how they're displayed on the forum?
XF 2.1 How to resize images hosted elsewhere?
- Thread starter Westingham
- Start date
I had looked at that but I didn't want to end up locally storing every hot-linked image that a player posts in their status.
above code is pretty useful but would not reduce the download size of the hotlinked image 
there are server based solutions available for this. cloudflare has a paid product (mirage and polish). or if you are self managing your server, you can look into implementing something like
Another cool thing about Imgur... They actually have multiple size versions of the images. So if a user posts something like:
there are server based solutions available for this. cloudflare has a paid product (mirage and polish). or if you are self managing your server, you can look into implementing something like
Another cool thing about Imgur... They actually have multiple size versions of the images. So if a user posts something like:
https://i.imgur.com/Fj0iyPL.png, you can basically just rename the file to https://i.imgur.com/Fj0iyPLh.png (added h at the end of file name). you can also replace png with jpg to further reduce the file size. i imagine one can create a regex powered file and replace command that could potentially rename all imgur image links to smaller sized versions. that part is out of my expertise.
above code is pretty useful but would not reduce the download size of the hotlinked image
True, but the question was
Which seemed to be specifically in regard to display size - ie pixel dimensions, not file size MB.
Last edited:
This worked like a charm. Thank you!
where exactly in extra.less do i put this code?
Anywhere you like as long as you don't break any other code that is in there. If in doubt put it at the top or the bottom.
yeah, added the code at the bottom, but it didnt resize the the url img i posted.
Can you post a URL so we can see what is going wrong?
I think it may be due to the fact that im on XF 2.2, not 2.1 , https://www.clubfsport.com/threads/...-rohana-rfc10-rims-how-does-it-look.4/#post-4
I am using this and it works great on 2.2.
do make sure you are modifying the extra.less file in the style you are checking on. you can have different files for different themes.
CSS:
.bbImage {
max-width: 400px;
max-height: 600px;
object-fit: contain;
border: solid 1px #bbb;
padding: 4px;
}do make sure you are modifying the extra.less file in the style you are checking on. you can have different files for different themes.
worked like a charm. Thank you.
I believe that will affect all images everywhere whether attached or hot linked. I may be wrong but I would check.
The foolproof way for hotlinked images (eg from Imgur) is probably only feasible if you do it per image.
So you need to check the url of the image and put this in extra.less
Code:
[data-url="https://URL_OF_IMAGE.jpg"]
{width:200px;height:100px}
Last edited:
