+- Makestation (https://makestation.net)
+-- Forum: Technical Arts (https://makestation.net/forumdisplay.php?fid=45)
+--- Forum: Web Design & Internet (https://makestation.net/forumdisplay.php?fid=62)
+---- Forum: MyBB Related (https://makestation.net/forumdisplay.php?fid=120)
+---- Thread: Shoutbox and Imgcode (/showthread.php?tid=2982)
Shoutbox and Imgcode - tc4me - May 5th, 2020
Hy forum professionals, I installed the same Shoutbox, runs great, I changed the 'allow_imgcode' => 0 to 1 in the dvz_shoutbox.php, that pictures can also be displayed via bbcode, works, but unfortunately I fail at the css to reduce the pictures, could you help me?
lg Tc4me
RE: Shoutbox and Imgcode - Lain - May 5th, 2020
Note: You're better off asking DVZ himself on his support thread over at the MyBB Community Forums.
All this is unofficial.
Not as simple as that.
The shoutbox uses the regular MyBB MyCode/BBCode parser. The default parser parses images normally, as you would see in a thread. That's why your images look really big in the shoutbox.
The problem is that if you were to make a change to it to make all images look small, then all images that people upload to their threads with [img] tags would also look small.
Another point is that CSS doesn't really apply to <img> tags. If you want to resize an image on a page, you need to do so with width/height properties of the element, not the style property.
E.g.
This works:
<img width="30px" height="30px" src="x" />
This doesn't work:
<img style="width: 30px; height: 30px;" src="x" />
I think max-width/max-height might work for CSS, but I don't think the image scales down and it might overflow.
The fix is relatively simple, but it involves a lot of steps. I can outline generally what you'd need to do.
Code:
1. Create a copy of the file 'inc/class_parser.php' and name it something like 'class_parser_shoutbox.php'
2. In the copied file, you need to change two things:
--> a) The name of the postParser class (something like postParserShoutbox maybe) (Line 25)
--> b) Modify lines 1216 to 1221
3. For modding 1216-1221, you have two and a half options:
--> a) Force a fixed size
--> b) Allow custom sizes
--> c) A mix of the two (more coding needed)
4. For 3.a), all you need to do is delete lines 1216-1218 and 1221. Then, change {$dimensions[0]} to your desired width in pixels. Do the same for {dimensions[1]} but for the desired height to force. This will either make everything look big, or everything look small.
5. For 3.b), copy/paste lines 1219-1220 to 1216 (the if statement will be on line 1218). Then change {$dimensions[0]} and {dimensions[1]} like above for lines 1216 and 1217. If someone chooses a custom size, it will parse the custom size, and if they don't, then the image will automatically be resized. Note: People can manually specify really big sizes to break things anyway.
6. For 3.c) You'll need more programming. Not writing it out because I haven't written any PHP in the last four years or so, but basically you have the fallback from 3.b) but if the custom size is set, the conditional on 1218 fires. Inside the conditional, all you need to do is check if {dimensions[0]} and {dimensions[1]} are bigger than your 'maximum allowed size'. Shouldn't be too hard. I'll leave it to you as a learning experience, I think you could do it in about 8 lines, even though there are probably much shorter solutions as well.
7. Save the file, go back to dvz_shoutbox.php.
8. On line 1354, change inc/class_parser.php to the name of the file you made in step 1.
9. On line 1356, change postParser to whatever you made the new class name in step 2.a)
10. Save + Exit.RE: Shoutbox and Imgcode - tc4me - May 5th, 2020
Thank you very much Lain. I create my own shoutclass_parser.php or x-name for the shoutbox so that only the pictures in the shoutbox and not the whole forum are reduced! Try that is perfect. Big thanks Lain
RE: Shoutbox and Imgcode - tc4me - May 5th, 2020
Hy Lain, so after I try the easy way, it works with the CSS
Code:
#shoutbox .entry img { max-width: 200px; height: auto; }RE: Shoutbox and Imgcode - Lain - May 5th, 2020
(May 5th, 2020 at 9:02 AM)tc4me Wrote: Hy Lain, so after I try the easy way, it works with the CSS
Code:#shoutbox .entry img { max-width: 200px; height: auto; }
Oh cool, it does scale.
Yeah figured the main difference lied in max-width/max-height instead of just width/height properties.
RE: Shoutbox and Imgcode - tc4me - May 5th, 2020
(May 5th, 2020 at 9:14 AM)Lain Wrote:(May 5th, 2020 at 9:02 AM)tc4me Wrote: Hy Lain, so after I try the easy way, it works with the CSS
Code:#shoutbox .entry img { max-width: 200px; height: auto; }
Oh cool, it does scale.
Yeah figured the main difference lied in max-width/max-height instead of just width/height properties.
But thanks for your instructions anyway, I'll try that too, my brain won't let me rest until I have it as I imagine it. I am concerned with parse.php, I really have to try that :-)
