Do not show images in quotes

[wolverineblues]

It becomes an issue when a post has many images or/and are too big. It looks messy. Is there a way to avoid images appearing in quotes?

[Retread]

Jul 27, 2019 13:21:06 GMT -8 wolverineblues said:

It becomes an issue when a post has many images or/and are too big. It looks messy. Is there a way to avoid images appearing in quotes?

Hi wolverineblues

I found this in a post by Brian

You can limit the size of an image in a quote if you place this in your Global Header (or Global Footer). It will affect all themes.

<style type="text/css">
.quote_body img { max-width: 200px !important; max-height: 200px !important; }
.avatar_size_quote img { max-width: 30px !important; max-height: 30px !important; }
</style>
Adjust the 200px values as desired or even reduce them to 0px to eliminate the images in quotes, entirely.

[wolverineblues]

Jul 27, 2019 17:48:09 GMT -8 Retread said:

Jul 27, 2019 13:21:06 GMT -8 wolverineblues said:

It becomes an issue when a post has many images or/and are too big. It looks messy. Is there a way to avoid images appearing in quotes?

Hi wolverineblues

I found this in a post by Brian

You can limit the size of an image in a quote if you place this in your Global Header (or Global Footer). It will affect all themes.

<style type="text/css">
.quote_body img { max-width: 200px !important; max-height: 200px !important; }
.avatar_size_quote img { max-width: 30px !important; max-height: 30px !important; }
</style>
Adjust the 200px values as desired or even reduce them to 0px to eliminate the images in quotes, entirely.

Thank you! I opted for 150px instead.


And is there a way to do it with images outside quotes too?

[Retread]

Sure. If you want to limit the size of images anywhere in the post, you could add a line like this to what I already gave you. Next line after the first line with the opening style tag would be fine. The images in quotes would still be basically thumbnails.

.message img { max-width: 600px !important; max-height: 300px !important; }

This would allow fairly wide images as long as they aren't tall. Or you can adjust the maximum width and height to whatever you like.

[wolverineblues]

Hello Retread .

It seems the code generates a few issues. First...
1)It screws up the proportions of the mini avatars in quotes in a weird way
1)It screws up the proportions of ACTUAL AVATARS in private messages in a big way

Any way to fix them? It's also making the signatures insanely big in PMs

[Retread]

wolverineblues , when I use this in the Global Header my test forum, I don't have any issues like the ones you're describing. Not even if I set the max-width and max-height for the message class to very low values.

<style type="text/css">
.message img { max-width: 600px !important; max-height: 300px !important; }
.quote_body img { max-width: 125px !important; max-height: 125px !important; }
.avatar_size_quote img { max-width: 30px !important; max-height: 30px !important; }
</style>

Could you try copying this and replacing the fix you have now in your GH with this?

If you're still having a problem, could you provide a link to your forum?

[wolverineblues]

Jul 30, 2019 7:21:49 GMT -8 Retread said:

wolverineblues , when I use this in the Global Header my test forum, I don't have any issues like the ones you're describing. Not even if I set the max-width and max-height for the message class to very low values.

<style type="text/css">
.message img { max-width: 600px !important; max-height: 300px !important; }
.quote_body img { max-width: 125px !important; max-height: 125px !important; }
.avatar_size_quote img { max-width: 30px !important; max-height: 30px !important; }
</style>

Could you try copying this and replacing the fix you have now in your GH with this?

If you're still having a problem, could you provide a link to your forum?

It's only in the private messages section so you'd have to register. I copied the code as you said.


dbmenglish.freeforums.net/

[Retread]

Only in PMs? Hmmmm. I'll do some research on my test forum to see if this is a problem for PMs there.

[Retread]

wolverineblues , I did see a problem with avatars in the mini-profile on my test forum. Try this:

<style type="text/css">
.message img { max-width: 600px !important; max-height: 300px !important; }
.quote_body img { max-width: 125px !important; max-height: 125px !important; }
.avatar-wrapper img { max-width: 150px !important; max-height: 150px !important; }    
.avatar_size_quote img { max-width: 30px !important; max-height: 30px !important; }
</style>

This is becoming more of a patch on top of a patch but if it works, we'll call it a day. If not, I'll look into targeting more than just the message class in the second line and see if I can contain that effect to only what's within the content of the post.


EDIT: Change of plan. Try this. The second line targets only the images within the content of the post (article). That should prevent creating a new issue that needs to be fixed. Let me know if this works without problems.

<style type="text/css">
article .message img { max-width: 600px !important; max-height: 300px !important; }
.quote_body img { max-width: 125px !important; max-height: 125px !important; }
.avatar_size_quote img { max-width: 30px !important; max-height: 30px !important; }
</style>


[wolverineblues]

Hello, it's now creating a problem in the quote's avatars (in threads)


Retread
Actually, it seems it doesn't work at all now inside the quotes. It's resizing the images directly in the threads but it doesn't further resize them in the quotes.

It's something affecting the size of the avatar image, only on PM's 




The old code works better but does this. However the new one just resizes all images but overrides all what happens inside the quotes.

[Retread]

wolverineblues, lets try this again and see if I can get it right...

<style type="text/css">
article .message img { max-width: 600px !important; max-height: 300px !important; }
article .quote_body img { max-width: 125px !important; max-height: 125px !important; }
article .avatar_size_quote img { max-width: 30px !important; max-height: 30px !important; }
</style>

[wolverineblues]

Jul 30, 2019 11:54:57 GMT -8 Retread said:

wolverineblues , lets try this again and see if I can get it right...

<style type="text/css">
article .message img { max-width: 600px !important; max-height: 300px !important; }
article .quote_body img { max-width: 125px !important; max-height: 125px !important; }
article .avatar_size_quote img { max-width: 30px !important; max-height: 30px !important; }
</style>

Thank you! You indeed got it right. I tested it thoroughly.

Lastly, if it's not too much of a bother, is there a way to click the images so they can turn to image original size and back, or would this require a plugin? 

[Retread]

wolverineblues

Thank you for confirming it works. I was notified of the like on my post so I figured you were testing it out.

It probably wouldn't require a plugin to use onclick to restore the image to full size, but I'm rather doubtful that can be done with pure CSS. Probably need a little snippet of JavaScript in the Global Header. I might look into that unless someone else wants to pick up the ball and run with it.

I'm fairly certain I can use hover to restore the image size, only when the cursor is over the image. But that tends to be a little unnerving if you mouse-over an image and it unexpectedly increase in size.

It might be a few days before I have time to play with a script. Hopefully someone else will give it a go.

[wolverineblues]

Jul 31, 2019 18:54:28 GMT -8 Retread said:

wolverineblues

Thank you for confirming it works. I was notified of the like on my post so I figured you were testing it out.

It probably wouldn't require a plugin to use onclick to restore the image to full size, but I'm rather doubtful that can be done with pure CSS. Probably need a little snippet of JavaScript in the Global Header. I might look into that unless someone else wants to pick up the ball and run with it.

I'm fairly certain I can use hover to restore the image size, only when the cursor is over the image. But that tends to be a little unnerving if you mouse-over an image and it unexpectedly increase in size.

It might be a few days before I have time to play with a script. Hopefully someone else will give it a go.

It is not so urgent but it definitely will be helpful in the long run and will look nice. I can wait. I understand it will probably be more complicated.

Also, probably needless to say but it'd be helpful if another click can restore the image back to small size.

[wolverineblues]

Retread

Hello, I found another issue in the code. When someone actually manually resizes the images with BB code, the auto resize bugs out on threads and shows the image at 100% size.

Example here:
dbmenglish.freeforums.net/thread/1084/chapter-budokai-royale-battle-thread?page=31&scrollTo=47687