Jump to content

Using Wordpress Offline to Inventory Your Miniature Collection


Auberon
 Share

Recommended Posts

  • 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."

 

WP3.png.78fc5ef54a1338a7ade360318dac3f8c.png

 

Create a new site.

 

WP4.png.c9ef25cd0d2d12476b840188fe8052c0.png

 

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

 

WP5.png.35b9b8795b897948aa061a9c39604135.png

 

Accept preferred.

 

WP6.png.77c197325ff2bf80334c23495dcd1f25.png

 

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

 

WP7.png.b7cf095014fc77d6b65d156e482f558d.png

 

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

 

WP8.png.e2ed1308fc02a69680f8b97d1a27ded1.png

 

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

 

WP9.png.9d15ed58d987f53a1755fade8668ace2.png

 

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".

 

WP10.png.db4345a54f1015bd69612b6f619c59c7.png

 

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

 

WP11.png.09c23d03194d45b9d2e24abb17964a23.png

 

There it is.

 

WP12.png.88941437e333e34b86d86f314cfd5c5f.png

 

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.

 

WP13.png.d034de25e9d29b82c49d3d1b9d8c17fd.png

 

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.

 

WP17.png.4b985e7721ac56d0ff15de7134471d2f.png

 

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.

 

WP14.png.c1e6a8bc69b76dc44d611cce80857ba4.png

 

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.

 

WP15.png.c5c40d3cf4936cfd84931d4c38108441.png

 

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.

 

WP16.png.babfe978a2d2c0da4381d834691c616b.png

 

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

 

WP18.png.236554c722013141df82056e8ffee6fc.png

 

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.

 

WP19.png.6659f68d1572fba1a197a0024ba39570.png

 

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.

 

WP20.png.3e93317cc5f34325e70aad82d4625ec0.png

WP21.png.e4b4216337530d5721475c3cb1c222e1.png

 

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

 

WP54.png.eb2ec0e031f80c473b77240c7fb38926.png

 

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".

 

WP23.png.b94c1604b30016e8866af255fdbf5976.png

 

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

 

WP25.png.b2a2533503694dd0e9176ddf7bb62812.png

 

You will see something like this. 

 

WP26.png.eecf10a1c881267f73ff6ff6e2f79045.png

 

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

 

WP27.png.ecf9002ac3b6fa3ad700228b3b5611aa.png

 

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.

 

WP28.png.43deb1a10222ea3afb9e336610f6eaf4.png

 

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.

 

WP29.png.f98b4a11e145c6850f0734acac85f88d.png

 

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

 

WP30.png.efbf97612133277499e03ee37a8a448e.png

 

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.

 

WP31.png.3688dd491433bd726badd95d0fae2f44.png

 

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.

 

WP32.png.391f7c0d6b7c8e6fcd4b7efbbca31e8d.png

 

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"]

 

WP33.png.5bab324382a7291fc4b72e8c1bfa65da.png

 

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.

 

WP35.png.bc0aace9638b033e7608a8b5c7ea0931.png

 

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"

 

WP36.png.6c62709a1a4a373d41fbfbb0d9c36dd1.png

 

Here are the options I used.

 

WP37.png.942fb716ec0f077df54b8aa207955dfc.png

 

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.

 

WP38.png.553dd509d3e3f88b44c9631a229ee205.png

 

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.

 

WP34.thumb.png.649881d3973903b64551d6fc377861e3.png

 

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.

 

WP39.png.39712635170eae1a130c48085221b0b0.png

 

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.

 

WP40AC.png.92c339172384f851e5d3c6aaeff768d4.png

 

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

 

WP41.png.40ec8f09b4578c7381bf1d7e5b15e73e.png

 

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

 

WP42.png.a1f48e9c38a536c3e6b7169928416d1f.png

 

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.

 

WP43.png.af4b619aed8efe0da6e8ec5ccb6d0012.png

 

Go to Appearance - Themes.

 

WP44.png.eb93dce5b829c1ccb86f2408279c2235.png

 

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.

 

WP45.png.3b7c780acb1eab651a70034dc656d4ab.png

 

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

 

WP46.png.26298017bab3ef4d8dd3e5d7cdc13531.png

 

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."

 

WP47.png.6acee6697da5c6ff64c13a756004a521.png

 

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

 

WP48.png.0663f622c81a64ec830b71fd207bbf0f.png

 

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

 

WP49.png.8614d6404bb2ba8e319275c522ec9f06.png

 

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. 

 

WP50.png.0bb45f9e4e0d0ac59bd2c2f748b2f9b6.png

 

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

 

WP51.png.1dad76de693be3a36e7d1e4ba6f09cbd.png

 

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

 

WP52.png.67c51f2ac909349406b6544c676d84ec.png

 

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.

 

WP53.png.fe7bd1dcbbb9b56d1236168b36710138.png

 

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.

 

 

  • Like 4
  • Thanks 2
Link to comment
Share on other sites

  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...