My new web site is up and running. I’m sure there are still broken links and formatting bugs, but it’s now live. I have combined mfarris.net (climbing guidebook) and TheAltitudeExperience.com into a single site. There was simply too much maintenance involved with two sites. This means there is one blog so I may post more as I don’t have to worry about where to post.
The web has advanced tremendously since I last did a site upgrade, mainly due to mobile web browsing. The site should display well on any device. If you notice any problems send me an email (address above, in the header).
A few words about what I’ve done here, mainly to help others who face the same issues I did. If you’re not interested in the nuts and bolts of site production or image handling on the web, look at this pretty picture and ignore the rest of this post.
Trumpeter swans at Jensen Lake, Lebanon Hills Regional Park, Eagan, MN, USA.
Site Platform
First, I jumped on the WordPress bandwagon. Ten years ago I was hand coding what we call a blog (diary posts from 2004-6 are from that era), and now this blogging software has grown into a reasonable site platform, at least for smaller users. I am using a responsive premium theme (X Theme) to handle the mobile-tablet-full size formatting issues. It generally works pretty well but I had to learn/remember a lot about CSS to tweak the formatting. Luckily they have a wonderful support forum so I did a lot of searching to find code snippets that I could use.
Web Design
Personally, I dislike the new web design paradigm that emphasizes graphics and white space over content. After trying to use my institution’s website (hamline.edu), I composed a little ditty (to the tune of Row, Row, Row Your Boat) to describe my browsing experience:
Scroll, scroll, scroll your mouse
forever down the screen,
Headers, photos,
whitespace, there’s no
content to be seen!
I’ve tried to minimize that look here but there are limits due to the reformatting that happens with different screen sizes.
Photo Galleries
I purchased Envira Gallery (note: as of 5 minutes ago, the base version is now included in X Theme). Once you get it set up and the CSS tweaked it works well. They have a closed support system (unlike X Theme) so getting help without submitting a support ticket is difficult.
Photo Management and Metadata
One of the biggest problems I face was preserving the metadata (captions, copyright, etc.) embedded in my images. Here’s a summary of my workflow:
- Process photos and add all metadata in Adobe Lightroom
- Use L/R Transporter plugin to copy caption to Title and Headline metadata fields. WordPress can use your filename as a title (and caption) if that field is blank. This is a brute force approach that violates IPTC definitions but who cares.
- Export from Lightroom with these settings:
Export to: upload folder (your choice)
File naming: I add my last name to the regular file name
Format: jpg, 80% quality, sRGB color space
Resize to fit: Width and Height, W=900, H=blank, check ‘don’t enlarge’ box, resolution is irrelevant
Sharpen: sharpen for screen, standard amount (mine are mostly scans, adjust as needed)
Metadata: Include all except camera and camera raw info
Watermark: Yes
end of export settings - See my photos for the watermark. It can still be cropped off if somebody wants to steal a photo, but I didn’t want to ruin the photos for web viewing. Also, I limit the width or height to 900 pixels, so the image is too low res for most print use.
- Upload the files to WordPress, making sure the ImageMagick engine is used (not the standard GD engine). I think most WP installations will use ImageMagick by default. GD strips out all metadata, while ImageMagick does not. I installed the ImageMagick Engine plugin, though I’m not sure it’s essential.
- WordPress (and/or your theme) will make a bunch of copies of each image, each a different size. Each copy will have all of your metadata (unless GD does the resizing). The Display All Image Sizes plugin allows you to see all file sizes.
- The Media Library Assistant plugin is useful as it adds several options when viewing media and for handling metadata.
Now you can embed your images etc. as you wish. If anybody downloads a photo, all metadata are intact.
A couple of tips. If you make a mistake in image metadata (such as an error in the caption), the only way to fix it is to repair it in your editing software (e.g. Lightroom), delete the incorrect version from WordPress, and then reimport the file. This is necessary because at the time of import, WP grabs the caption etc. and stores it in the database for use later. Simply editing the caption in WP doesn’t change this database entry. You will likely have to reinsert the image in your pages/posts too.
WP handles PDFs ok, but some file types may not be supported. For example, if you have a GPS file (say in GPX format) that you want to make available, the easiest way to handle it is to compress it in .zip format. WP will accept that format, which can then be embedded in a link.
Development
I did all of my work locally on my Mac laptop using MAMP. MAMP Pro isn’t needed, you can activate ImageMagick by uncommenting a line in the MAMP files (Google it). Moving files to the live server was a pain. Back everything up. Since my URLs all changed, I installed the Better Search Replace plugin to update the paths. Only modify the posts table and don’t change the GUIDs. But any link you hand coded will not be changed so have fun tracking those down.
Other Plugins
Intuitive Custom Post Order: allows you to reorder blog posts.
Responsive Lightbox: image enlargement
All In One WP Security: what it says. Schedule weekly backup of your database, and back up you theme and do a WP export occasionally.
As You Might Expect
X Theme released a major upgrade just two hours after I wrote this. Upgrade now? No way.