The New NixMash Spring MultiPhoto Post Format

We added a new post display type in NixMash Spring Posts, the MultiPhoto Post. The MultiPhoto Post is a default post with multiple images added in a set format when displayed. Here’s what a MultiPhoto Post looks like on its permalink page. Here’s the live version of the screenshot below on the Demo Site.

That display is rendered in Thymeleaf.

We’re using Duncan McDougall’s Responsive-Lightbox plugin which displays the images when clicked on the Post Permalink Page. It’s a very clean plugin compared to a lot of other lightboxes.

Here is the MultiPhoto Post displayed in the Posts Stream.

That is rendered with a MULTIPHOTO_POST Velocity Template, as each post display type has its own display template. (Sidebar here: Notice the first line. The vtlvariable definition enables Intellisense for our post object in IntelliJ IDEA on the template. In Velocity! AWESOME!)

Image Storage

Image data is contained in a PostImage Entity Model and stored in the post_images MySQL table.

The image files are given a UUID as filenames and are stored on the server in a location listed in an external properties file and referenced as a property in our ApplicationSettings bean.

Adding and Editing MultiPhoto Post Images

We’re using the BlueImp FileUpload Plugin to upload and manage post images. You can read all about our Spring MVC and Thymeleaf implementation of BlueImp FileUpload in this NixMash Post. Below is a Post Edit form screenshot which will explain a few essential points about uploading images.

First notice the bottom right two buttons, “Save Draft” and “Publish” where previously there was a single “Submit” button. Drafts are now supported and only Published posts are displayed on Post Streams as you would expect. The reason it was a good time to add Draft/Published support is because the Post Images needed to be associated with a PostId. “Save Draft” saves the post initially and returns a PostId required by the various Image upload functions. After a PostId is created with “Save Draft”, the “Add Images” button displays the BlueImp FileUpload block, otherwise the Dialog reminder appears.

Source Code Notes for this Post

All source code discussed in this post can be found in my NixMash Spring GitHub repo and viewed online here.