Sunday, February 12, 2017

Enabling Infinite Scrolling / Ajax Loading on Wordpress Baskerville Theme (Anders Norén)

Baskerville Infinite Scrolling With Plugin

I recently built a website using Anders Norén's free Wordpress theme, Baskerville. This is probably one of the best free themes out there, and definitely the best free theme for sites that are trying to emulate the pinterest / masonry grid style of sites, where individual products are laid out in a re-sizable grid layout.

My only complaint with this theme is that it is just begging to be used with an Ajax infinite scrolling feature, but it does not support it out of the box. I have seen multiple forum posts asking for the author to add it, but it looks like no progress has been made (and I don't blame Anders - he is a very busy and amazingly talented author who deserves to spend his time on more pressing projects).

I didn't want to give up on this theme, but infinite scrolling became a requirement for my new site, so I set out to somehow add the feature to this theme. In the end, it actually didn't take that long to figure out and was not nearly as complicated as I thought.

Initially I was going to take a backend approach and try to rewrite a bunch of PHP, but I quickly realized it would be far easier to use a pre-built plugin to provide the backend support for AJAX loading, and write some Javascript myself to get it working with the theme.

How I added infinite scrolling to the Baskerville Wordpress Theme:

Step 1: Install the "Ajax Load More - Infinite Scroll" Plugin

Sunday, January 22, 2017

Batch Set Image Metadata (Title, Description) To/From Filename

This is a guide on how to bulk change multiple images and set automatically set their metadata "title" and "description" fields to match the filename. For example, if you have a JPG file that has the filename "Family Vacation Group Picture.jpg", after this batch procedure, the image metadata field "title" would contain "Family Vacation Group Picture".

I'm posting this because I was having trouble finding guides on how to do this when Googling them myself. After an hour of searching, there was only one tool that I could find that could read from the filename and put it in the metadata - ExifTool. Every other program out there seems to allow reading from the metadata and using it to rename the file (setting the filename), but that is the opposite of what I was looking for!

Here is how to automatically fill image metadata from filenames. The command used here will set both Description and Title metadata based on filename, without the extension:

I wanted a GUI to do this, so I could visually select files and check metadata. The way to do this on Windows is with ExifTool + ExifToolGUI

  1. Download ExifTool GUI and ExifTool exe and follow directions to place files in same directory
  2. Run ExifTool GUI and navigate inside the program to the files you want to set the metadata for
  3. Click the "ExifTool Direct" button - this allows you input commands for ExifTool that get executed on the files in the selected directory
  4. Copy and paste the following command. You can then either press enter to execute, or, as I did, also save it as a preset so that you can easily execute it again in the future.
    • *.jpg *.jpeg "-Description<${filename;s/\..*?$//}" "-Title<${filename;s/\..*?$//}"

    ExifToolGui - Command to Set Metadata Based on Filename

If you are comfortable with ExifTool without a GUI:

  • I haven't tried this, but the command should be the same as above, but should call exiftool first, like this:
    exiftool *.jpg *.jpeg "-Description<${filename;s/\..*?$//}" "-Title<${filename;s/\..*?$//}"

Sunday, December 18, 2016

FlexSlider - Setting maximum height and prevent content from reflowing / shifting

I'm making a website right now (actually more like remaking an old one) and a free wordpress theme I am using has the jQuery "FlexSlider" plugin built in for displaying wordpress galleries. However, I hated how the sliders were acting by default when loaded with images of varying height; the height of the slider dynamically changes to match the active img element, which means that content below it gets pushed down or up when the slider animates. This is actually terrible for UI, because an element can move unexpectedly right as a user is about to click on it.

How I wanted the Flexslider to act was to have a fixed size container, and then resize the images, not the container, to match my height constraint. If you are having trouble understanding what I mean, perhaps an example of default vs desired behavior is the best way to illustrate my issue:

Flexslider images

  • Image 1: 300 x 200 px
  • Image 2: 300 x 400 px
  • Image 3: 300 x 200 px
  • Image 4: 300 x 200 px
Default behavior:
  • The slider starts with a height of 200px, based on the first slide. When it gets to slide 2, it dynamically changes the container (<div class="flex-container">) to have a height of 400px, which shoves/bumps all the content below the slider down by 200px from where it just was.
  • Here is a demo of this default behavior:
Desired behavior:
  • The slider container is constrained to a height of my choosing, in this example, I might pick a max-height of 200px, since that lets 3 out of the 4 images display at full size, and only negatively affects 1 image. On slide 2, the container should stay the same height, but instead of cropping (e.g. overflow:none) or squishing (e.g. setting img height to match container and disregarding aspect ratio), it should keep the aspect ratio and downscale the image to fit.
Unfortunately, I spent a while searching across forums, as well as the official github repo for the FlexSlider plugin, and I couldn't really find any easy solutions. Most of the solutions I saw either cropped images, or did something like set the height of the slider to the largest image, instead of allowing for a custom max-height to be used across all images (it looks like this is actually what the newer versions of the plugin do). Another common suggestion was just to ensure that all slider images have the same height by manually cropping them, but that is a pain and not really a solution. In the end, I gave up on finding someone else's solution and decided to take a stab at it myself.

CSS is definitely not one of my strengths, but I managed to find an excellent solution, mostly by trial and error. This solution allows for a custom height, to which the slider and all internal images will be constrained. Images that are larger than the maximum height will be automatically downscaled, while preserving aspect ratio, and they are both horizontally and vertically centered. I would highly suggest having separate maximum heights for mobile vs desktop screen sizes, which is in my example CSS by way of media-queries. In my example, the mobile size is 200px high, while larger screens get a slider with a height of 300px. Super simple fix, but I couldn't find anything that accomplished it when I was search, so I figured I would post it to share with others. Here is my CSS solution - both the CSS combined with a live demo (hit the "result" tab to see the fix in action):

Tuesday, August 9, 2016

Best fonts for eBooks

The Best Fonts for Ebook Readers, According to Book and Typeface Designers

Friday, August 5, 2016

LastPass JS Exploit

Yet another event that vindicates my paranoia and persistence in sticking with offline KeePass
LastPass Happily Forfeits Passwords to Simple Javascript

Thursday, July 14, 2016

Advice for night owls in dealing with the normal work grind

There is actually really good advice in this!

Six Ways Night Owls Can Thrive in a Nine-to-Five Work World

Sunday, June 26, 2016

Explore investment opportunities

SeedInvest: Explore investment opportunities

 (public equity crowdfounding)

Found via Wikipedia - looks interesting