url-gallery: Make Wordpress gallery with image URLs

url-gallery is an easy shortcode plugin for making Wordpress galleries using their images (rather than using their ids as normal).

The project is hosted on GitHub, and is, as usual, open to contribution.

Installation:

For now, it is best to clone the GitHub repository into your wp-admin/plugins directory. Links for cloning are as follows:

[email protected]:ajsalkeld/url-gallery.git       # SSH power users
https://github.com/ajsalkeld/url-gallery.git   # HTTPS 

If you aren’t up for that, just download the latest release’s source code in a zip, and put the folder in wp-admin/plugins, or upload as a zip to your wordpress site in Add New under plugins.

I’m working on getting it listed in the Wordpress plugin directory.

Usage:

url-gallery works as a shortcode in a post.

Standard usage:

[url-gallery imgs="https://example.org/wp-content/uploads/2017/08/P1029350.jpg, https://example.org/wp-content/uploads/2017/08/P1029351.jpg, etc..."]

It may be better to remove the first part of the URL, especially if you have changed domain or the path to your WP site recently:

[url-gallery imgs="/2017/08/P1029350.jpg, /2017/08/P1029351.jpg, etc..."]

If all your images have unique file names (e.g. they may be generated by a camera with their date), you may then use:

[url-gallery imgs="P1029350, P1029351, etc..."]

The script simply looks for a likeness in the guid (global unique identifier), which Wordpress sets to its upload URL, and takes that image’s id and plugs it into the standard [gallery] shortcode. Thus provided your input only matches one image’s guid, everything is ok.

Feedback/Issues:

Please raise issues through the standard GitHub issues page of the url-gallery repository.

Alternatively DM me on Twitter (I’m @AJSalkeld), email me, or shout really loudly.

How To Use UFW to whitelist CloudFlare

This guide will help you use UFW (uncomplicated firewall) to block all traffic other than traffic coming via CloudFlare.

Why do this?

Why not? CloudFlare will protect your site from attacks, when routed through your hostname. It will not protect you from direct attacks. By closing ports down to everyone but CloudFlare, you will hopefully protect yourself further.

How can I do this?

First, you’ll need to be running Debian or Ubuntu. Cheeky plug: if you fancy a new VPS, I’d recommend (and use) DigitalOcean, as their speeds are above all others, and prices below. For $10 free credit (2 months on the cheapest tier), sign up using this link (I get $25 when you have spent $25).

Cheeky plug over.

Now, if UFW isn’t installed (it should be), install it. Obviously.

sudo apt-get install ufw 

There’s no harm in running that anyway to check you’re running the latest version.

Now run this:

sudo ufw status 

It likely returns Inactive. If it doesn’t, you’ll likely know what you’re doing.

If you don’t know what you’re doing, and it looks like this:

Status: active To Action From -- ------ ---- 22 ALLOW Anywhere 

Don’t panic! This means your UFW is set up and running. Make a note of the ports on the left. They may include 22, or your SSH port, and ports for FTP and other thingamabobs you are running.

Don’t note down ports 80 or 443 - these are the web ports, and we are going to fiddle with these ones.

First things first, disable the UFW and reset it, if it’s already got rules for ports 80 and 443:

sudo ufw disable sudo ufw reset 

The Massively Important Bit

Now before anything else, make sure you won’t lock yourself out...

The nginx-modsite Tool for Nginx

I often wondered, whilst typing the full phrase, ln -s /etc/nginx/sites… to enable a site and undoubtedly getting them the wrong way around, “Surely there must be a better way?”

Of course, Apache has a2ensite, which can be quite easily replicated in a bash script.

After a quick Google to a Server Fault question (like Stack Overflow, but for server-peeps), I stumbled across a script that goes one better.

Called nginx-modsite, it provides a full suite of tools to list enabled sites, available sites, and enable/disable those sites.

Installation

First, download the version you need from GitHub:

• ubuntu is for Ubuntu and Debian-based distros.
• homebrew is for macOS pros.
• main is for everything else (based on Linux) that might work.

Installation is fairly straightforward on *nix (Linux and Unix-type, including macOS) machines. The bash script simply needs to be saved in /usr/local/bin, as nginx-modsite, or anything easier for you to remember (provided the name doesn’t clash with an existing command).

The file then needs to be made executable, with sudo chmod +=x.

Usage

Using the command nginx-modsite, or whatever you named the script file on install, you have a few options:

• -l lists all available and enabled sites.
• -e SITE enables the site SITE.
• -d SITE disables the site SITE
• -r reloads the Nginx server, for when you have manually edited config files.
• -h displays help.

If you miss out the SITE, you will be presented with a number of options:

[email protected]:/etc/nginx# nginx-modsite -e SELECT A WEBSITE: 0: example 1: another-example Enter number for website: 

Then, just hit the number of the one you want, and enter.

After enabling/disabling a site, the script will ask you if you want to...

Redesigning the Tools Website

In line with me redesiging the blog, I decided to revamp an old tool, namely, the Nginx Server Block Generator, to suit the new site.

The old page was fairly ugly, so it was a welcome change to refresh the design, using the same minimal feel as the blog.

The header and footer were copied over from the blog, along with FlowType.JS for the typography, the Bootstrap grid system for the footer, and the Prime Box cookie bar to not get sent to EU jail.

Now, the subdomain www.ajsalkeld.com/tools points to a new landing page, which makes more sense as it provides the capacity for more tools to be added later, when I come up with them.

As with the old script, everything is available on GitHub in the Nginx Server Block Generator repo, under the MIT License.

The tools site uses the same scripts as on the Blog. It does not, however, use Jekyll to build the site, since the repos containing the site and the Nginx Server Block Genrator are seperate, so it cannot be considered a page by Jekyll.

As ever, if you feel the need to improve/fix anything on the site, please create a fork and make a pull request.

Redesigning the website

Doesn’t Wordpress get up your goat? Do you also find it too bulky for a simple blog, yet too simple for a complex website? Do you not feel it’s cheating, when you call yourself a web developer, and then use someone else’s work to display your own? The solution? Use Jekyll.

Jekyll allows you to build up a static, HTML blog, with minimal effort, though, unlike Wordpress, you’re left on your own with the code. No fancy UI, no magic plugin to drag and drop. No cheating.

Having drawn up the minimalist design on Sketch, I set to work, building the layouts, included HTML snippets, and CSS to style the website.

The results worked fairly well, if I may say so myself. The site uses scripts from FlowType.JS to make the typography look good, a teeny bit of Bootstrap (just the grid system), to make the footer work, and of course Font Awesome, for the icons. The cookie law compliance bar at the top is by Prime Box, which is ironic since it sets one of the only two cookies used on the site (the other is for CloudFlare.

If you’re interested, the font for the main body is Montserrat, and the site title, footer and meta is Inconsolata.

The colour scheming helped. The site title is straight black (#000), H1s are slightly more grey (#111), and the main body grey (#333). The accent colour, for icons, links and the footer is a nice blue (#477DCA)....

Nginx Server Block Generator

I don’t know about you, but I find it very tiresome to have to type out the entire config, or copy and paste a template to edit, so I found some spare time and made a Javascript-based generator. Thanks to this, I no longer have to debug the entire config file when Nginx fails to start.

Use here!

So, what does it do?

Currently, the script allows you to:

• Set port to listen on
• Set server_name
• Set root directory
• Set index file
• Enable php-fpm and change socket
• Enable SSL and set certificate and key locations
• Block image leeching (or hotlinking)
• Allow Wordpress pretty permalinks

Essentially everything I use, and probably most of what you do too.

ToDo:

• Make the thing look pretty - at the mo it’s a bit ‘90sish
• Add more advanced options. Dunno what these might be.
• Anything else that I decide to use and can’t be bothered to type.

Known Issues

The code is messy, and the webpage is ugly, but hey-ho, it works fine. If you do find problems, please put them here on GitHub.

Contributing

Feel free to add code and fix my messiness, and then make a pull request. Big shoutout to jartaud for doing just so.

Use here!