Using Wordpress Offline to Inventory Your Miniature Collection

[Auberon]

• Read Me First: This got really long. Keep reading if you want a searchable image gallery of all of your minis. It will seem complicated because I took a lot of screenshots, but I learned everything here in 1 day. If you jump to the end there is a summary of everything WPAA+ will let you do.

 

If you are like me you may have started off being able to keep track of all the minis you owned in your head, but it probably didn't take too long before you needed some help.  Enter the spreadsheet.  This worked for awhile, but after years of retail purchases, Kickstarters, and Patreons, trying to cross reference everything became nearly impossible.  Do you have a female dual wielding ranger for the game next week, or don't you?  And if you did where did you put her...  What I'm about to go through won't help with the boxes in your closet but it will at least give you a visual way to see what you own.  Even if you can't find it.

 

The plan is to make things easy and free. 

 

Now when you think of a web page you likely think of something that is hosted on a server somewhere.  And while this is true, it would be crazy to edit a page live and break it while customers are using it.  As such there are offline tools to create, experiment, and learn what you are doing.  We will be using one of these to create our inventory.  Could you make this live and show the world your collection?  After all is said and done you could if you want.

 

So first things first, we need to be able to run our offline page.  There are a couple of free options.

• XAMPP will make you feel like an IT guy.  It straight up warns you that it has no security and is only for offline development.  Unfortunately it conflicted with my PCs raid software. On to option 2.
• Local is designed specifically to run offline WP sites and should be straightforward for novice users. It had the same conflict for me, but has a built in workaround.

 

Download and install Local, sign up if you want or not, and run it. You will get a screen that looks like this, minus the tutorial.  That was something I made to learn what I was doing.  In the lower left corner is a plus to "Add Local Site."

 

 

Create a new site.

 

 

Name it whatever you want. I expanded the advanced options, but you don't need to touch those.

 

 

Accept preferred.

 

 

Go with whatever you want. Just remember it since you will need it to log into your offline site.

 

 

And done. You could "Open site" but there won't be much there yet. Instead go for "WP Admin."

 

 

At some point around here it should automatically install Wordpress. After logging in it will take you to the dashboard.

 

 

Basic WP is basic.  Of course by now, someone has made a plugin to do exactly what we want.  The trick locating a free one. Select Plugins and "Add New".

 

 

Search for "wp photo album plus", install and activate it.

 

 

There it is.

 

 

You may need to refresh your screen, but "Photo Album" should appear at the bottom of the list on the lower left hand side as well as above.

 

 

Now we need to change a few settings.  Feel free to play around if you want. I'll be going from left to right on the Basic settings.  First, under layout, increase the thumbnail font size.  I went with 15, but YMMV.

 

 

Eventually I'll be using "Photo of the day".  I increased the frequency so I get a new photo every time I visit the page.

 

 

For the thumbnails I find 100 pixels to be a little on the small side.  Feel free to do whatever, but I doubled everything.  Too small can't see/too big can't see many images at once.

 

 

Here are the search settings.  We can't do much yet since there is nothing to search, but at least make sure "include tags" is ticked.

 

 

Before we upload any images, we need somewhere to put them.  Under Album Admin "Add New."

 

 

I created "Reaper Miniatures" and can now upload photos to it. You'll have some limits shown on how much you can upload at once.

 

 

After uploading them you can "Moderate" them. First make sure the image has a proper name.  Then this is where the magic happens. Whatever tags you add can be used later to search for them.  Add as many as seem useful. In the example below I have an SKU as a tag, but later realized it would be better in the description. At first you will have to type in all your tags, but if you navigate away and come back they will be added to the drop down menu. Afterwords you can just select the old ones, though you'll have to keep adding new ones as they come up.

 

 

I tagged 12 Reaper Minis I own and then created another album for Dark Sword so we would have two to work with.

 

 

Now that we have a couple of albums we need somewhere to put them and a way to search them. WP runs on themes, which can be found under "Appearance". It comes with three but there are literally thousands to chose from.  Of course, most of them you have to pay for if you want them to actually be useful.  For now we will use "Twenty Twenty-One" as our demo since everyone will have it.  If it is not active hover over it and select "Activate".

 

 

Next go to "Pages". You will see two default pages.  Feel free to delete them then "Add New".

 

 

You will see something like this. 

 

 

It needs a name so we can keep track of it. Hit "Publish" twice to active the page.

 

 

Repeat a few more times and we now have Home, Dark Sword, Reaper, and The Eagle.  The WPAA+ search function says it wants a landing page so that is what the last one is for.

 

 

Now that you have some pages you can create a menu if you want.  The option is found under "Appearances". Unfortunately it appears nice menus is something developers use to get you to upgrade to paid themes. I won't be making use of them.

 

 

And there it is. By the time I'm done my menu will reach down to the floor.

 

 

Before we set up any searches let's designate our landing page. "Edit" it.  In the upper left hand corner of the WP edit screen is a blue plus.  It will open a sidebar with all of your widgets in it.

 

 

There they are.  An an example I have placed a button on the page, though it isn't really necessary. The WPAA+ results will have navigation built in.

 

 

Look around until you find the "shortcode" widget.  It allows for simple commands without the possibility of inserting malicious code. In this case we are just pasting what WPAA+ says should be used to designate it's landing page. Just cut and paste [wppa type="landing"]

 

 

Now that we have a landing screen we can go back to the WPAA+ options and set it. Once again, make sure tags are searchable.

 

 

We have made a couple of galleries but they need some place to live. Edit the Reaper tab and go alllll the way down on the widget menu to find "WPAA Gallery"

 

 

Here are the options I used.

 

 

If you now "Preview" the page you can see what it looks like.   Really narrow, but that is due to the theme.  You can see each image displays its name and the SKU I put in the description.  The "Delete" option you can make go away back in the WPAA+ options. You will see it's gone later.

 

 

To our home screen! You can see there is a basic search option, but we don't want to chose that one.  We will be using the WPAA one.

 

 

Here you see the default search bar is still here (don't install) as well as the WPAA search bar. I'll show the options for that in a second, but first add three columns below it.

 

 

There is a bit of a jump here because GIMP crashed and I lost some screenshots.  In the first column I placed the "Pages" widget so I have a list of all my pages (rather than using the menu), in the center I inserted the shortcode for the WPAA Picture of the day - [wppa type="mphoto" photo="#potd" size="0.5" align="center"], and in the left column I inserted the WPAA tagcloud. 

 

For both WPAA Search and WPAA tagcloud the first step is to add a WPAA gallery just like we did before.  Then you need to select "A search/selection box" as shown below.

 

 

Then for a search box select "A search box" or for a tagcloud select "A tagcloud box."

 

 

For search you can set the landing page again, though we have already designated it.

 

 

Now let's take a look in preview! We have a search, a page list, a tagcloud, and a photo of the day.  This theme doesn't look very good though, so let's work on that.

 

 

Go to Appearance - Themes.

 

 

Since we're keeping this simple and free let's add "Hello Elementor" to see how that changes things. Go to Appearances and "Add New" theme. (Elementor is a Free/Paid step up from the basic WP editor. Hello is their super basic intro page). Activate it.

 

 

Now that "Hello" is active we can "Customize" it.

 

 

In the preview you can see how the page we built looks different with the new theme.  It is wider and whiter.  Now if you clicked "Home" at any point on one of the albums, you may have noticed you ended up somewhere strange.  This is because WP defaults to taking you back to your most recent post.  We want to change that.  Go to "Homepage Settings."

 

 

and set the homepage to "Home". Now you will always come back to the page you see below.

 

 

OK, we've built it and we know we can browse it, so let's try searching it.  First search, "Male".

 

 

This brings up every image that I have tagged as "male". We see their name (you did give your pic a good name didn't you), description (SKU), manufacturer (because that's how I named their album), and what they look like. 

 

 

But I can already do that using the tagcloud.  Let's try something more specific, "male monster"

 

 

Here are all the images I tagged with both male and monster.

 

 

At this point you have a functional offline website.  If you go back to Local, you can now select "Open site" to go directly to your site.

 

 

And there you have it.  We now have the ability to:

• Use the page list to visually browse by manufacturer.
• Use the tagcloud to search by a single tag, i.e "archer" or "bugbear"
• Use search to narrow it down even further using multiple tags.

 

Obviously at this point you can play around to make it look nicer, install different themes, upgrade the editor, hide the page names, etc, but your WPAA+ based organization is underway.