I used Wix as my website-building platform before switching to WordPress (I’ll talk about my experience with Wix in an upcoming rant). ONE good feature of Wix—that quite frankly spoiled me—is that it allows you to drag and drop images exactly where you want them. BOOM. Done.
WordPress, to put it mildly, DOES NOT.
If you’re anything like me, you’ve figured out the basic alignment options in WordPress (no alignment, align left, align center, align right) and spent hours futzing with your Wordpress images, trying to fix the position and spacing in the editor to look right on the actual page.
Perhaps you’ve experimented with a couple (nay, five!) plugins or coding techniques that purport to solve your image positioning issues, including “responsive” photo and video galleries, table generators, etc. I was satisfied with the results of only one of the gallery plugins I tried—that is, until I realized that it didn’t let me embed page links in my images. Then I used a table generator, which allowed me to insert images into cells that could be linked to URLs—but the table wasn’t responsive and looked awful on mobile devices.
And on and on.
At last, a solution for aligning WordPress images
I am happy to say that I have FINALLY found a very satisfactory solution to the problem of aligning WordPress images with a free WordPress plugin called MCE Table Buttons (get it here). This plugin adds another toggle button to your “Edit Post” interface: click it, and you can insert a simple table into your post with the number of cells you want. Then, click inside a cell and tap your “Insert Media” button to add an image. Once you insert the image, you have the same image alignment buttons that you normally would, except that the image will be aligned within the constraints of its cell rather than the entire page. You also have the option of aligning WordPress images vertically or horizontally.
If you make the borders invisible, all your readers will see is your perfectly aligned images! If you want to add more images later, simply click on your table in the “Edit Post” interface, click on Row or Column, and you’ll have the option to insert a row (above or below the current row) or a column (to the right or left of the current column).
When aligning WordPress images gets complicated
Slightly more complicated are situations with unequal image distribution. For instance, to set up the pages for my shop, I made image collages of products to span most of the page and aligned the images with the “Buy Now” buttons (I created all images and buttons in Pixelmator) with the table function. This required merging cells so that I could insert my image collage into one big cell; I placed my “Buy Now” buttons in four separate cells beneath each image collage. To do this, I simply set up a 4 x 4 table, then clicked inside the cell into which I wanted to put my image collage and then merged the cells: table toggle→ Cell→ Merge table cells (specifying that I wanted one row that was four cells wide). You can merge cells horizontally or vertically based on how you want to display your images.
Check your final page carefully
This final bit of advice applies to your entire site: make sure to check and see how your page displays in multiple browsers. I have encountered many, many instances in which my page displayed perfectly in Google Chrome, but then looked awful/had missing images/was otherwise screwed up in Mozilla Firefox and/or Safari. For the table button, the fix can be as simple as centering your table on the page.
I am VERY sure that there’s an easier way to fix images than what I’ve described above. Image alignment, after all, seems like such a no-brainer capability for bloggers to have that I’m shocked—SHOCKED, I tell you—that WordPress hasn’t ironed this out themselves. So far, though, after much searching of the interwebs, this is the best solution I’ve found that doesn’t involve coding and all of the commensurate hairiness.
I will update you THE MINUTE I find something better.