Icon table generator feedback post

[chlorophylls]

Public comments/suggestions/bug reports/etc. feedback post for my Icon Table Generator, hosted on GitHub.

Source code is on GitHub If you have a GitHub account, you can also post an issue directly. The repo has been privated now.

About the Icon Table Generator
Webapp that instantly generates HTML that you can copy and paste to display your avatars/graphics in a nice, neat, numbered table on Dreamwidth (or anywhere that accepts HTML).

Uses HTML, CSS (Bootstrap), and Javascript (jQuery).

Features

• Adding image links one at a time
• Adding multiple image links at a time, separated by new lines, but also allows for custom separators
• Adding all images from an Imgur album thanks to integrating the Imgur API
• Table style customization
• Icon cell (spacing, background color) customization
• Numbering (big or small or regular font size, color) customization
• Ability to preview table
• Can automatically extract direct image URLs from HTML code pasted in the "Add multiple links" text area. Primarily developed the feature for imgbb but should work on any image host that allows users to copypaste mass embed codes that contain direct image URLs.

Notes

• The table is centered by default. Use the table alignment buttons to align accordingly.
• This webapp only makes GET requests, not POST requests.
• The Imgur API rate limit is described here as follows:

The Imgur API uses a credit allocation system to ensure fair distribution of capacity. Each application can allow approximately 1,250 uploads per day or approximately 12,500 requests per day. If the daily limit is hit five times in a month, then the app will be blocked for the rest of the month. (...) We also limit each user (via their IP Address) for each application, this is to ensure that no single user is able to spam an application.

• What this means is that, for each day, this application allows for up to 500 different users to to process 25 Imgur albums each. Or, 1 obsessive user to process 12,500 Imgur albums. Or 125 users to process 100 albums. Do the math, etc.
• Either way, based on current usage statistics, the application will probably never hit this daily 12,500 request limit, so don't worry about it too much.

Credit

• Minty Bootstrap 4 layout at Bootswatch

Changelog

• 12/13/19 - Implemented table alignment options.
• 1/26/21 - Updated multi-link adding to split input by new lines, instead of semicolons. Users can choose their custom separator with new input field (activated by check box).
• 2/19/22 - Some refactoring on the back end, and some cosmetic changes for wording. Apparently people on IJ and LJ are also using this generator too. Thanks for all the support, everyone 🙂
• 2/24/23 - More refactoring and frontend updates. The "add multiple links" area should now be able to clean up and extract direct image URLs from HTML code pasted in, with instructions on how to do so when the "Help" button is clicked. Also added some cosmetic changes like a shiny new favicon. Changed Imgur API application client ID and privated the repo for the sake of, well, privacy.

Comments

[bats]

you are my hero

[aurora_amethyst]

Thank you for this!

I just have one suggestion: I was wondering if you could add an option to left align the table.

[chlorophylls]

Hello, reporting back! Table alignment options have been implemented (or well, technically revived since I had plans for it before but never got around to them so I scrapped it before). Check out the generator now; the options should be in the "Table styling" section on the left, under "Images per row".

[aurora_amethyst]

Thank you so much! ^^ I really appreciate it!

[webzip]

Thank you so much for the hard work you put into this. Will definitely be my go-to for icon table generators: yours is so organized and easy to work with! A bonus is the generator itself is really nice on the eyes and pretty :)

[dumblove]

Just wanted to say I highly appreciate that you made this. I've just started iconning again recently and this has been tremendously helpful in cutting down time for uploading and arranging them in a post. Thank you for the hard work!

[green]

omg just found this THANK YOU! You have made my life so much easier and no longer will I dread posting the icons I've made!

[internes]

i know this is an old post but would it be at all possible to have a way to use an imgbb album along with/instead of imgur? if not, then no worries!! this is the nicest table generator i've seen in years so i'm glad that i won't have to paste links one at a time either way 😅

[chlorophylls]

I took a look at imgbb's API docs, and suffice it to say, they are lacking and sparse, with little information on how to work with it. It says it should be able to be called with GET requests, but zero info on how to actually do that. I don't see album as a field in the API response either, so it might not be possible.

However, I think I can come up with a workaround if you're willing to go to "Embed codes" and go to the "HTML Full Linked" option in the dropdown for an album. I might be able to whip something up to automatically strip the irrelevant code tags and get the direct image link, which can then be put in. Would that work?

[internes]

that would absolutely work if you're able to do that! thanks so much for the response :)

[chlorophylls]

Returning with some updates to the generator, you should be able to now just copypaste as instructed (I wrote instructions that pop up when the help button is clicked) and the multi links field should be automatically cleaned. Then you can just click the "Add multiple links" button as usual.

Let me know if this breaks anything or something isn't working as expected/intended.

[internes]

works like a charm!! thank you so much 💖

[barbaratp]

Gods bless you amen, you saved lives with this code 😁

[chiming]

Suggestion: display:flex + display:grid instead of table

It's a little more code, but should be easy to update the generator, and it's much more mobile-friendly. :)

<raw-code> <div style="width:100%; max-width:calc((100px + (2px * 2)) * 5 + (4px * 4)); margin:auto;"> <div style="font-weight:bold; padding:4px; text-align:center;">Header!</div> <div style="display:flex; flex-wrap:wrap; gap:4px; justify-content:start;"> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic1</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic2</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic3</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic4</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic5</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic6</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic7</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic8</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic9</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic10</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic11</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> <div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic12</small></div> <div style="background:#eee; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block;"></div> </div> </div> </div> </raw-code> This does expect all icons to have an intrinsic height and width of 100px; to enforce even blocks where icons might be different sizes, you'd want the following to replace each icon (basically: height:100px; width:100px; on the DIV parent of the IMG, and margin:auto; on the icon itself):
<div style="display:grid; gap:4px;"> <div style="color:#000; background-color:#ddd; padding:2px; text-align:center;"><small>pic12</small></div> <div style="background:#eee; height:100px; width:100px; padding:2px;"><img src="https://v.dreamwidth.org/1935752/647347" style="display:block; margin:auto;"></div> </div> (Setting images to display:block removes the tiny gap below images that otherwise shows up in both tables and divs; they're natively an inline element.)

These settings are the equivalent of:
- 5 images per row, 2px padding on icons, 4px between cells
-- max-width:calc((100px + (2px * 2)) * 5 + (4px * 4)): 5 columns of 100px with 2px padding on either side, plus 5-minus-1 * 4px for the gutter between cells.
- Icon border color: #eee, table background color: left blank, number color: #000, number background color: #ddd, text before number: pic

[motherfuckers]

hi hi! i'm not sure if you're still checking this post - i'm having a lil issue using the uploading imgr album option in that ... it is not working. just checking if there is a fix i can do?

[chlorophylls]

What do you mean that it's not working? What is the link for the album you're trying to upload?

[motherfuckers]

basically when i add the album, it doesn’t do anything, both on chrome and safari - here’s a screen recording for visuals https://imgur.com/a/jBb82hz

and this is the album: https://imgur.com/a/85kTCAf

i was wondering if it was taking a bit due to the number of icons in the album, but even leaving it for a bit it’s not doing anything

[chlorophylls]

When I go directly to the album you linked, it 404s for me. Is it a private album or something?

[motherfuckers]

ah AHHHH it was 🫠 incredible observation on my part

[vorpalsnickersnack]

Hello! I seem to be having an issue.

When I link this album https://imgur.com/a/cookie-run-kingdom-Y04E4vN in the album adder, nothing happens and just keeps showing zero. If I add the images individually, it works just fine, though.

[chlorophylls]

The generator doesn't play nice with having the album name in the link; it assumes that whatever follows /a/ is the album ID. You need to strip out "cookie-run-kingdom" so it's like https://imgur.com/a/Y04E4vN and input that in the generator Add album field instead. Then it should work, as I tested that out just now and it did.

[picnicnic]

It's so weird, because up until today I never had this issue, or any issues with uploading from private albums! Glad you have this open channel where you provide solutions, thank you! And thanks for creating this, it is immensely helpful.

[disasterhearts]

thank u for my life