Limit 'link' image sizes

[billybatz9]

Right now, there is an option to resize images when they are 'uploaded'. But I guess it doesn't apply to those images they are being submitted through a link like photobucket. Is there a way I can implement the image resizing for both? If not, this should be added.

Thanks

 

[Jeremy]

Linked images if they are too large are resized and can be viewed in a full size by clicking on it.

Technically, the only way to 'resize' these images the same way XenForo resizes attachments is to download them from the remote host and store them on your local server.

 

[Paul B]

Limit which size?

Resize in what way?

Hotlinked images don't exist on the server.

 

[billybatz9]

Limit which size?

Resize in what way?

Hotlinked images don't exist on the server.

So what you guys are saying is that when a person adds a photo using the image button and having to insert a website url like photobucket or flickr or anything, it doesnt get hosted on my server? Therefore my memory wont increase?

 

[billybatz9]

and for example....
any images being "uploaded from their computer" turns out to be within the dimensions 400x400 because that's what I have it set to.
However, if a person clicks on the image button to post an image using a photobucket link or something, the image(s) take up the whole screen. They do not stay within the 400x400 dimensions.
I was just wondering if there was a way to re-size THOSE photos. The ones that people upload using a "link"

Thanks guys

 

[Paul B]

So what you guys are saying is that when a person adds a photo using the image button and having to insert a website url like photobucket or flickr or anything, it doesnt get hosted on my server? Therefore my memory wont increase?

Correct.
The images are hosted elsewhere so don't use any disk space on your server.

If you want to limit the size of embedded images, add this to EXTRA.css:

.message .messageContent .messageText img {
max-width: 400px;
}

If you don't want images to click zoom, add this instead:

.message .messageContent .messageText img {
max-width: 400px !important;
}

I shall move this thread from suggestions as it's not a valid suggestion.

 

[billybatz9]

Thank you

 

[digitalrage]

Hello,

i've tryed to edit the extra.css with the code posted above but it doesn't work as a responsive, i.e. on my mac retina it's ok, on my desktop pc it's ok but when i switch to a Galaxy S5 smartphone or a standard resolution tablet the image is cropped. There is a way to get a workaround about this issue?
Thanks in advance.

 

[Sunka]

If you want to limit the size of embedded images, add this to EXTRA.css:

.message .messageContent .messageText img {
max-width: 400px;
}

@Brogan, is it possible to add to this code also variable max-height: 400px?
So if picture is 800px widht and 1600 hight, it will be in post 200px widht and 400px height?

 

[Paul B]

Add max-height: 400px.

 

[Sunka]

So I could use both?

.message .messageContent .messageText img {
max-width: 400px;
max-height: 400px;
}

 

[Paul B]

Yes.

 

[EDCP]

Is this still a viable solution to limiting the size of linked image URL's?

 

[picom]

Correct.
The images are hosted elsewhere so don't use any disk space on your server.

If you want to limit the size of embedded images, add this to EXTRA.css:

.message .messageContent .messageText img {
max-width: 400px;
}

If you don't want images to click zoom, add this instead:

.message .messageContent .messageText img {
max-width: 400px !important;
}

I shall move this thread from suggestions as it's not a valid suggestion.

Hi all, sorry for digging up an old thread but I was following the guide above and it worked perfectly for me when shinking the size of images posted onto my site from elsewhere.

However when someone tried to make a poster they got a server error message, so I had to delete the code again to fix the problem.

Im using 1.56, is there any option to fix this or something else I need to do?

Thanks

 

[Paul B]

I would be surprised if that CSS triggered a server error.

 

[Madhouse]

Correct.
The images are hosted elsewhere so don't use any disk space on your server.

If you want to limit the size of embedded images, add this to EXTRA.css:

.message .messageContent .messageText img {
max-width: 400px;
}

If you don't want images to click zoom, add this instead:

.message .messageContent .messageText img {
max-width: 400px !important;
}

I shall move this thread from suggestions as it's not a valid suggestion.

Can I use the same code to limit attached images in a custom page?

 

[Paul B]

If the same classes are used, yes.

 

[Madhouse]

I figured it out:

#pageNodeContent .bbCodeImage {
max-width: 200px;
max-height: 200px;
}

 

[Madhouse]

For reference, in XenForo2, its a bit different:

.p-body-pageContent img {
max-width: 200px;
max-height: 200px;
}

@Brogan in xf2, the above code works but unlike xf1, when you click on the smaller image, it doesn't show the larger version.
Any idea how to fix this?

 

[Sunka]

.message-body img
{
    max-width: 200px;
    max-height: 200px;
}