Forum images max-width

Joined
Nov 18, 2017
Messages
353
Location
Phx, AZ
#1
I've noticed that when very large images are posted in the threads, it blows the width of the the parent <tr> element way out, making it necessary to scroll horizontally and vertically to read the thread. Tested in all browsers - example thread:

https://forums.radioreference.com/r...ion-forum/369372-2018-ford-f-350-install.html

Can I suggest adding a "max-width: 100%" property to any img in a post_message div? There are still some additional style related issues when very large images are posted, but this would be a quick and easy fix to make the forums a bit more navigable.
 

fxdscon

Member
Premium Subscriber
Joined
Jan 15, 2007
Messages
3,788
#2
I've noticed that when very large images are posted in the threads, it blows the width of the the parent <tr> element way out, making it necessary to scroll horizontally and vertically to read the thread. Tested in all browsers - example thread:

https://forums.radioreference.com/r...ion-forum/369372-2018-ford-f-350-install.html

Can I suggest adding a "max-width: 100%" property to any img in a post_message div? There are still some additional style related issues when very large images are posted, but this would be a quick and easy fix to make the forums a bit more navigable.
Changes to the entire forum structure may be coming soon:

https://forums.radioreference.com/f...n-posting-messages-elsewhere.html#post2914339

.
 

mciupa

Database Administrator
Moderator
Joined
Nov 5, 2002
Messages
6,657
Location
M9W
#3
I find that situation annoying in the forums I moderate. I hate to scroll all over the page. Post #2 in that referenced thread is the worst I've seen.

My remedy is to edit the post and remove the
codes from the post which will render it as a https: link to be clicked on.
 
Joined
Jul 27, 2005
Messages
9,718
Location
WTVLCA01DS0
#4
That's my post, and I edited the first one to the option I had that would fit. The sizing seems to be an Imgur thing that I need to play with.

The second one is just because I forgot to downsize it. I'll fix it now.

It's always OK to PM me directly with stuff like this and I'll be happy to address it.
 

mikewazowski

Forums Manager/Global DB Admin
Staff member
Joined
Jun 26, 2001
Messages
10,578
Location
Central Ontario
#5
It's easiest if the poster resizes the image to something more suitable for the forums.

Unfortunately, most don't so we change the picture to a link.
 
Joined
Nov 18, 2017
Messages
353
Location
Phx, AZ
#6
My inquiry wasn't necessarily about that particular post - it just happened to be the most recent example that exposes this issue. A user should not have to worry about image size when posting a direct image link - that should be handled by the site via proper styling. In a perfect world, users would be cognizant of this and post appropriately sized images, but as MikeOxlong mentioned, this is not always the case. Applying a max-width property so an <img> element fits the width of its parent should be a straightforward fix.

edit:

To demonstrate, here's how the page displays when I apply "max-width: 100%" globally to all <img> elements - no change to the original images is necessary:

before:



after:




 
Last edited:
Joined
Jul 27, 2005
Messages
9,718
Location
WTVLCA01DS0
#7
I reposted and fixed the image size to something more reasonable, half the size of what they were before. I tagged the original posts for moderate deletion, if one of you would be so kind. Everything is now on one post.

Also,
I searched the site using the FAQ search for something regarding suggested image size, but I couldn't find it. If there's a page that addresses that, It'd be helpful for someone to point me at it so I can make sure my future photos are the recommended size.
 

fxdscon

Member
Premium Subscriber
Joined
Jan 15, 2007
Messages
3,788
#8
Also,
I searched the site using the FAQ search for something regarding suggested image size, but I couldn't find it. If there's a page that addresses that, It'd be helpful for someone to point me at it so I can make sure my future photos are the recommended size.
Don't know if these are hard-coded limitations, or suggestions. This is from the pop-up window when you click the "Attachments" icon (the paper clip) when replying to a post....


limit.jpg
 
Joined
Nov 18, 2017
Messages
353
Location
Phx, AZ
#9
Don't know if these are hard-coded limitations, or suggestions. This is from the pop-up window when you click the "Attachments" icon (the paper clip) when replying to a post....
This applies to images that are attached by the user and uploaded to RR's storage. The issue here is when images from an external host are displayed in the forums. There is no limit on the size of these images, as radioreference is not hosting or processing them on their servers.
 

fxdscon

Member
Premium Subscriber
Joined
Jan 15, 2007
Messages
3,788
#10
This applies to images that are attached by the user and uploaded to RR's storage. The issue here is when images from an external host are displayed in the forums. There is no limit on the size of these images, as radioreference is not hosting or processing them on their servers.
I am aware of the difference between attached images and those hosted externally. Perhaps following the max height and width sizes suggested here would prevent the post from expanding beyond it's normal width.

(Which was the question asked in post #7).

.
 
Joined
Nov 18, 2017
Messages
353
Location
Phx, AZ
#11
Perhaps following the max height and width sizes suggested here would prevent the post from expanding beyond it's normal width.
Ah, gotcha. Ideally yes, users should be aware of the size of images they are posting. But in all practically, they aren't aware and/or don't care. I would strongly urge the site admins/devs to implement one line of CSS and fix the root cause of this issue, rather than relying on users to post images of a certain size, or relying on admins to spot these issues and edit the post to change the <img> element to a link..
 
Joined
Jul 27, 2005
Messages
9,718
Location
WTVLCA01DS0
#12
Ah, gotcha. Ideally yes, users should be aware of the size of images they are posting. But in all practically, they aren't aware and/or don't care.
I was aware and did fix the first post. It was the following one where I just plum forgot. However some may not or don't.

I would strongly urge the site admins/devs to implement one line of CSS and fix the root cause of this issue, rather than relying on users to post images of a certain size,
Which seems like a much better solution than:

...relying on admins to spot these issues and edit the post to change the <img> element to a link..
Removing the <img> would require viewers to click on each individual link, which takes a lot of convenience out of this board. I don't like clicking on unknown links all the time, either.

But sounds like a fix is in the works. We can wait and see what the solution is.
 

fxdscon

Member
Premium Subscriber
Joined
Jan 15, 2007
Messages
3,788
#13
Ah, gotcha. Ideally yes, users should be aware of the size of images they are posting. But in all practically, they aren't aware and/or don't care. I would strongly urge the site admins/devs to implement one line of CSS and fix the root cause of this issue, rather than relying on users to post images of a certain size, or relying on admins to spot these issues and edit the post to change the <img> element to a link..
Perhaps when the upcoming new forum software is deployed it will address that issue. I agree, it is annoying when the current software allows that to happen.

.
 
Joined
Nov 18, 2017
Messages
353
Location
Phx, AZ
#14
For any Stylish users out there, I made a really simple custom theme that will fix the image width problem:

RadioReference Forums - userstyles.org

Stylish is a cool browser extension for Chrome and Firefox which allows a user to apply a custom style to a website, modifying the way the content like text and images are displayed within their browser. The theme I created will prevent an image in a post reply from exceeding the default width and eliminate the need for horizontal scrolling to view replies.

The actual CSS change I make to fix image dispaly is the following:

Code:
div[id^='post_message'] img
{
    max-width: 100%
}
 
Last edited:
Joined
Nov 18, 2017
Messages
353
Location
Phx, AZ
#15
I recently learned that the Stylish browser extension I recommended above was found to now contain spyware that can track your web browsing behaviors:

https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/

If you you currently use the Stylish extensions/add-on form Chrome or Firefox, it is recommended you remove it immediately! Here is some information on how to render custom CSS for a site in Firefox and achieve the same result without the need for the Stylish add-on:

https://superuser.com/questions/318...css-of-a-site-in-firefox-with-usercontent-css
 
Top