Modding on the Spectrum

[imgc=1000]https://modding-on-the-spectrum.com/app.php/gallery/image/74/medium[/imgc]

[imgc=1000]https://modding-on-the-spectrum.com/app.php/gallery/image/74/source[/imgc]

[size=125]How to insert images into a post[/size]
(updated guide)


[u]Variant 1: Using imgc BBCode[/u]

If you have uploaded the image to the Spectrum's gallery for example, you can use the direct link from the first field (see second paragraph of variant 2) with the [url=https://modding-on-the-spectrum.com/viewtopic.php?p=677#p677]imgc BBCode[/url].

[i]Example [url=https://modding-on-the-spectrum.com/app.php/gallery/image/74]this image[/url] from the public Starfield gallery[/i]
Sample BBCode:
[code][imgc=1000]https://modding-on-the-spectrum.com/app.php/gallery/image/74/medium[/imgc][/code]

The number after "imgc=" stands for the maximum image width in pixels.

If you want to display the larger version of the image, replace "medium" with "source"
[code][imgc=1000]https://modding-on-the-spectrum.com/app.php/gallery/image/74/source[/imgc][/code]

The sample BBCode displays as (the source version):
[imgc=1000]https://modding-on-the-spectrum.com/app.php/gallery/image/74/source[/imgc]

The imgc BBCode works with image direct links from other servers like Nexus Mods or any image hosting service ([url=https://modding-on-the-spectrum.com/viewtopic.php?p=2#p2]more information[/url]).


[u]Variant 2: Uploading as post attachment[/u]
Switch to the Attachments tab below the Preview and Submit buttons, click on the Add files button (max. file size: 1MB*), select your screenshot and click on open. After the upload is completed, click on Place Inline, which will insert the screenshot as thumbnail.

[i]Example screenshot uploaded as attachment[/i]
[attachment=0]Photo_2023-09-12-013003.jpg[/attachment]

* If your screenshot is too large, you can reduce the file size with [url=https://riot-optimizer.com]RIOT[/url] (Radical Image Optimization Tool) for example


[u]Variant 3: Uploading to the [url=https://modding-on-the-spectrum.com/viewtopic.php?p=263#p263]Gallery[/url] and using the corresponding BBCode[/u]
Upload the screenshot to the Miscellaneous, the Starfield - Public Gallery (if it's a Starfield screenshot) or your personal user album (go to User Control Panel > "Gallery" tab).

Go to the uploaded image. There are three fields at the bottom. The first one contains the direct link, the second one and the third the image BBCode for inserting the image into the post. It doesn't matter if you choose the second or the third one - clicking on the inserted image will lead to the image's page in the gallery. If you want that the image should open in a lightbox when clicking on it, choose variant 1 or variant 2.

[quote=Selene310187 post_id=792 time=1671447526 user_id=2]
You can now open image thumbnails in a lightbox on devices that have a screen width which is less than 900 pixels. I found out that the "[url=https://www.phpbb.com/customise/db/extension/lightbox/support/topic/152426?p=812636#p812636]mobileWidth[/url]" setting in the resize.js* of the [url=https://www.phpbb.com/customise/db/extension/lightbox/]Lightbox extension[/url] controls when the image is opened in a lightbox. By default, the screen width must be wider than 900 pixels to open images in a lightbox. I changed the screen width limit to 100 pixels so the lightbox is enabled for images on devices with a screen width that is wider than 100 pixels.
[/quote]
The fix only works to a limited extend. I tested it with my mobile phone this time which has a resolution of 360x640 in portrait mode and 640x360 in landscape mode. If the maximum thumbnail width is set to 400 in the ACP, the embedded images will not open in a lightbox, if I set default image thumbnail width to 300 pixels they will open in a lightbox. I want to keep the 400 pixels setting because I find the other setting too small. But there's another way to see a bigger version of an embedded image: just turn your mobile phone so that's in landscape mode.

[quote=Altbert post_id=797 time=1671458562 user_id=59]
Looks good on my side! But, then I'm also using the Opera Browser.
[/quote]
Because I fixed it and forgot to mention it in my previous post in this thread that I've fixed it :D (I did that now ;)).

Looks good on my side! But, then I'm also using the Opera Browser.

You can now open image thumbnails in a lightbox on devices that have a screen width which is less than 900 pixels. I found out that the "[url=https://www.phpbb.com/customise/db/extension/lightbox/support/topic/152426?p=812636#p812636]mobileWidth[/url]" setting in the resize.js* of the [url=https://www.phpbb.com/customise/db/extension/lightbox/]Lightbox extension[/url] controls when the image is opened in a lightbox. By default, the screen width must be wider than 900 pixels to open images in a lightbox. I changed the screen width limit to 100 pixels so the lightbox is enabled for images on devices with a screen width that is wider than 100 pixels.

* The path to the resize.js is different in the latest version of the extension (version 2.0.4). I found the file under [i]ext\vse\lightbox\styles\all\template\js[/i] instead.


Today, I also noticed that image thumbnails only open in a lightbox if they have a width of 400 pixels or more which exactly is the default thumbnail resize setting I have chosen for the board. I don't know how to change the [url=https://modding-on-the-spectrum.com/viewtopic.php?p=706#Imgc%20BBCode]imgc BBCode[/url] to enable the lightbox for image thumbnails that have a smaller width than 400 pixels yet and if it's possible at all. You can see the whole code of the imgc BBCode [url=https://modding-on-the-spectrum.com/viewtopic.php?t=89]here[/url].

Alternatively, you could the put smaller image thumbnail inside a "url" BBCode and insert the direct link of the image after the "[url=" part.

Edit:
I see that I need to fix the CSS of the larger image thumbnails which are embedded via the imgc BBCode. If you set the width to 1000 pixels, the embedded picture will be displayed a bit smaller in the post because the maximum height is set 400 pixels. I already tested it with the inspection tools of the browser. If I disable the maximum height limit, the embedded picture will have a width of 1000 pixels if the browser window is greater than 1289 pixels (width) according to my testing with the inspection tools in the Opera browser.

Edit 2:
I fixed the imgc BBCode to display the embedded image with the specified image width, provided the browser window is large enough.

I noticed that guests cannot view attachments. This is fixed now.

Figured I give this a test with a Rainbow for good luck on the site.
[img]https://i.imgur.com/Tp66k19.png[/img]

[IMG]https://staticdelivery.nexusmods.com/images/1704/287627-1664559997.jpg[/IMG]

Update Sept 27, 2023
I added guide for [url=https://modding-on-the-spectrum.com/viewtopic.php?p=1892#p1892]inserting images into a post[/url].


[hr][/hr]



[size=150]Quantity per post and file size limit[/size]

You can attach up to 6 files per post. The maximum file size of each file is 1 MB. Yes, it's pretty small but I don't see any other way. The shared hosting service doesn't allow the operation of a download server. Thats's why I recommend using image and file hosting services instead, see "Alternatives to attachments" section below.


[size=150]Images[/size]

Maximum image dimensions: [s]1800 x 1800 px[/s] suspended
(uploaded images which have a greater image dimension will be resized automatically)

Default maximum thumbnail resolution[color=#FFFF00][b]*[/b][/color]: 400 x 400 px

Images which are embedded via attachment or IMG BBCode tag appear as thumbnails in posts. If you click on them, they open in a lightbox.

[i][indent=10][color=#FFFF00][b]*[/b] Since Dec 11, 2022, it's possible to circumvent the default maximum thumbnail dimension by embedding the direct link of an image via the [url=https://modding-on-the-spectrum.com/viewtopic.php?p=677#p677]imc BBCode[/url][/color].[/indent][/i]



[size=150]Alternatives to attachments[/size]

[u]For images:[/u]
You can upload your image to a image hosting service like [url=https://imgur.com/]Imgur[/url], [url=https://imgbb.com/]ImgBB[/url] or [url=https://imgbox.com/]Imgbox[/url]. Here's list with 25 free image hosting services: https://rigorousthemes.com/blog/25-best-free-image-hosting-sites/

After you have uploaded the image, click in the post editor on the image button and insert the direkt link to your image into the IMG BBCode tags. Example:
[code][IMG]https://staticdelivery.nexusmods.com/images/1704/287627-1664559997.jpg[/IMG][/code]
which will be displayed as follows:
[IMG]https://staticdelivery.nexusmods.com/images/1704/287627-1664559997.jpg[/IMG]


Or you just mark the direct link to your image in your post and click on the picture button in the posting actions bar (it's on the left side of the link button).



[size=120]The amount of images which are inserted via IMG BBCode tag [b][color=#BFFF00]is not[/color][/b] limited. [/size]


[s]Please note that BBCodes are only available when you reached a certain number of posts. See topic "Newly registered users group" for more information.[/s] (the newly registered users group is suspended)



[u]For other file types:[/u]
There are several file hosting services out there, for example:
[list][*][url=https://www.google.com/intl/en/drive/]Google Drive[/url]
[*][url=https://www.microsoft.com/en/microsoft-365/onedrive/online-cloud-storage]OneDrive[/url]
[*][url=https://www.dropbox.com/en/]Dropbox[/url]
[*][url=https://www.mediafire.com]Mediafire[/url]
[*][url=https://mega.io]MEGA[/url]
[*][url=https://www.4shared.com/?locale=en]4Shared[/url][/list]

Insert a link to your file into the post after you have uploaded your file.


Regarding mods, see the "[url=https://modding-on-the-spectrum.com/viewtopic.php?t=5]Mod hosting sites[/url]" topic.


[size=150]Inserting images into a post[/size]

Please follow this [url=https://modding-on-the-spectrum.com/viewtopic.php?p=1892#p1892]guide[/url].