XF 2.1 How to resize images hosted elsewhere?

[Westingham]

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?

 

[gogo]

You may use @AndyB 's add-on 'Convert image' that automatically converts all URL linked images to attachment which you can control the size in Attachment options in ACP.

 

[Westingham]

You may use @AndyB 's add-on 'Convert image' that automatically converts all URL linked images to attachment which you can control the size in Attachment options in ACP.

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.

 

[Mr Lucky]

Is there a way to automatically resize how they're displayed on the forum?

Try this in extra.less

.bbImage
{max-width:300px}

 

[Chromaniac]

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

Optimize Images

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.

 

[Mr Lucky]

above code is pretty useful but would not reduce the download size of the hotlinked image

True, but the question was

Is there a way to automatically resize how they're displayed on the forum?

Which seemed to be specifically in regard to display size - ie pixel dimensions, not file size MB.

 

[Westingham]

Try this in extra.less

.bbImage
{max-width:300px}

This worked like a charm. Thank you!

 

[mrdoitnyce]

This worked like a charm. Thank you!

where exactly in extra.less do i put this code?

 

[Mr Lucky]

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.

 

[mrdoitnyce]

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.

 

[Mr Lucky]

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?

 

[mrdoitnyce]

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

 

[Chromaniac]

I am using this and it works great on 2.2.

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

 

[mrdoitnyce]

I am using this and it works great on 2.2.

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

 

[Mr Lucky]

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

[data-url="https://URL_OF_IMAGE.jpg"]
{width:200px;height:100px}