Convert Your Images and Lists To Something Pretty!

Lets say you have a list of bands you want to add to your profile page to show off your musical preferences or a bunch of gifs and images you want to add to your profile to give it some flair. You take all those items, slap them in their own sections, and then you look at your profile and all the images are varying sizes, the text is all over the place, and everything goes to hell on mobile.

Good news! I made a tool that will give you everything you need to make your text or images fit perfectly in their sections AND it'll resize perfectly for mobile based on exactly how you want it to look! All you need is your list of text / images and you're good to go!

Here is the link to the page on Codepen

Here it is in action converting a list of 26 gifs in to a 4 column formatted flexbox that resizes with the window and is optimized for mobile:

Before I begin I want to give my recommendation of a website to use for your gifs/images: imgbb.com. You can upload all your images to their site via urls or from your computer then generate a list of direct (this is important) links, then just copy and paste them all. Super useful. As far as text lists go (favoite bands, movies, etc.) I'd just use Google Docs or Pastebin. ¯\_(ツ)_/¯

Also, just a heads up, I want to get in to customizing these things to make them more unique for your use case. So, this is going to be a two-parter. This blog will just cover using the tool. TL;DR copy and paste your list of text or images in the box on the left, choose a couple options, click submit, take your HTML and run for the hills.

Okay, lets talk about this thing.

First thing you have to do is decide what you want. This can generate four different types of layouts: Grid with text, grid with images, flex with text, flex with images. But, what's the difference between grid and flex? you might be asking me. Well, I'll tell you, my curious friend:

Grid: a display of rows and columns that are all evenly spaced out based on the content of the grid. Each item has equal space around/within it unless extensive HTML/CSS is done to change the settings. Grids are best for when you want your text or images to be displayed perfectly evenly across rows and columns. Think Excel. It's kinda like that.
Flex: this has nothing in common with a grid, but it does provide some easy to use properties that make displaying lists of items that resize very well and make changing your layout in the future much more pain-free. If you don't want your items evenly spaced out in a row-column format, then a flexbox will be perfect for you.

Now, which option you choose is entirely up to you. If you are doing images/gifs I would HIGHLY recommend using Flex over Grid. It'll make your page look much, much better. If you are wanting to use a grid for your text then I would be cautious about using it in smaller sections or thin profile layouts. It may not turn out exactly how you'd like, but you can always test this out if you'd like. As previously mentioned, a Flexbox has nothing in common with a Grid, so choosing Flex then entering a number of columns for non-image lists does nothing. This will display as a large body of text. The benefit being the ability for the flexbox to resize much more nicely for mobile than a normal display would. But, this does create "columns" for images because this does serve a nice benefit and is the core reason why I made this tool in the first place (it is possible to take code from the image-flex combination and make columns for the text-flex combination, but it looks terrible. Don't waste your time.)

Okay, I think that's it. I'll be making a part two on another day to break down how to stylize everything and make it a bit more unique, but I think you'll be happy with the way everything looks by default. Let me know if you have any questions or issues and I'll get back to you as soon as I can!

Cheers!