Technology

Hugo static site generator

As already for the previous incarnation of my portfolio, my decision was to use a static site generator such that I can avoid any dynamic parts on the server side. This prevents many security issues and also results in fast loading times. So far, I had used Jekyll for this site and Middleman for my tech blog. From a technological point of view I am more in favor of Middleman because of its greater flexibility. However, what both frameworks lack is good support for managing photos, which is one of the main aspects of a photography portfolio. Therefore, I searched for alternatives and finally selected Hugo as the basis for the new portfolio. With page resources photos and other assets can nicely be bundled with the page they belong to and Hugo’s image processing features make it really easy to crop or resize images automatically.

Theme

When starting this project I had the hope that I could speed up the process by building onto an existing theme. Therefore, I took some (longer) time to browse through the available Hugo themes. However, not many of them were suitable for the kind of site I was envisioning with a portfolio, photo stories, and a blog section. Many visually appealing themes are limited to single page designs, which doesn’t work for this structure. One of the closest candidates was Massively, which is also used by Urs Zihlmann for his portfolio. However, I didn’t like all aspects and also I didn’t want to end up with a completely similar page. Therefore, I finally decided to build something on my own, however, based on the CSS framework Bulma as the means to speed up the process.

Responsiveness and lazy-loading

Bulma is already mobile-first and all Bulma elements easily work on mobile platforms. However, photos are the main content on this site and I also wanted them to be responsive such that for each device the photos are downloaded in a suitable resolution. This especially avoids excessive downloads on mobile devices. Fortunately, the web has matured enough to finally provide native HTML solutions for this problem and hence every large image on this site (apart from the gallery overview) now uses either img tags with the srcset attribute or - depending on the situation and the surrounding containers - picture elements with multiple sources. In addition, most images are tagged with loading="lazy". Modern browsers only download these images when they become visible through scrolling (or shortly before). This again saves bandwidth.

Structure

So, what does the new site look like and what were my decisions regarding the layout?

Home page

My main idea with the home page (as already with the previous site) was to make my best images the most prominent feature. Therefore, they are presented using a fullscreen carousel.

New on this page is the brief “about me” section and a “recently published” section to put some emphasis on new posts and especially photo stories.

For the carousel, I am using Flickity, which has support for responsive images and a fullscreen plugin. These were the reasons for selecting Flickity instead of the Bulma Carousel extension.

Galleries

Instead of relying on a carousel/slider as on my previous site, I have this time decided to use a Justified Gallery with a fullscreen lightbox (lightGallery) for showcasing my work. This gives a better initial overview of each collection of photos while still providing the elegant fullscreen display if desired. Both selected tools support responsive images, although Justified Gallery only with JavaScript support. lightGallery is also used for a fullscreen display of images inside blog posts and photo stories, such as the one below.

Photo stories

A new element of my site is the photo story section where I display series of related images. I have been using Exposure and Behance for such content. Exposure creates wonderfully styled stories and resonance is quite nice, however, pricing soon gets heavy. Behance, on the other hand, is free but resonance and layout possibilities are quite limited. Also, the situation with other social sharing sites is currently relatively unclear and big players are losing popularity. Therefore, I decided to create my own space for such photo stories and series with a style comparable to Exposure. This is the result:

Stories use text blocks, hero images in full width and justified galleries as the main presentation formats. All images can also be viewed in fullscreen using a lightbox. The same elements are also available to normal blog posts.

I hope that this gives a good platform for my images and serves as reasonable basis for the next few years.

Please visit the following galleries for the photos:

• 500px Gallery
• flickr (extended)

Especially for the Vietnam trip there is a Flickr Album with a larger collection of images documenting three weeks in this country.

These plans have now become reality and the jigsaw puzzle is available at Teddy Toys in Bielefeld.

Westfalen-Blatt, a local newspaper, reported about the first Ravensburger jigsaw of Bielefeld on Wednesday:

There is only a limited amount of these jigsaws available. So go ahead and buy them. ;)

For the layout, I emphasized the focus on the photos by making them the main content of the site and displaying them in full size without any user action required. This way, the photos hopefully get a lot more attentions and just look nicer.

Technically, the site now has a much improved responsive design which should make mobile viewing much better and faster. Images are now also delivered in the appropriate size for the viewing device, so that mobile loading times and bandwidth are reduced. The responsive image solution is completely realized using CSS as explained in this article.

From a backend perspective I moved away from Wordpress and dynamically generated content to a completely static site, by using the Jekyll static site generator. No more Wordpress security nightmares…

After this experience I wanted to examine this more closely and created a simple test setup to compare the colors of the four different speedlights I own. To do this, I placed a greycard in front of the camera and fired each flash onto this greycard with different output levels dialed in. For each output level I took 3 subsequent shots so that I could also get an insight on the consistency between shots. First things first: For each output level all tested speedlights are very consistent. So I will only focus on the remaining aspects now. This is an overview of the collected photos:

As visible from the photo grid, the two Yongnuo speedlights are quite consistent with respect to color temperature. However, the Nikon and Metz ones are a bit warmer. Moreover, it looks a bit as if their color varies with output levels. This somehow contradicts what David Hobby said…

To be at least a bit more precise about the differences in color, I also include the histograms for the first photo of each speedlight. The measurement point in all cases (for the percent values Lightroom displays) was chosen in the center of the image.

At least now I know which speedlights to combine in case of a comparable product shot.

The general idea was to have kind of a classic corporate headshot that is easily reproducible as members come and go. Moreover, I wanted to incorporate a few aspects of our new research building. The resulting setup was quite easy in the end. One of the long hallways, softbox on one side, reflector on the other and the flash gelled to increase the green color of the fluorescent lights in that hallway, as green is the signature color of the university. I had to use the fluorescents as I could not light the whole hallway artificially without annoying all colleagues working there. So I had to balance the flash power with the available light, which resulted in some green color casts on the heads. I fixed these in post.

The “suboptimal” way

This solution works as soon as you have a flash where the head can be turned around by 180 degrees. In that position the flash trigger extends to the back of the softbox mount and doesn’t collide anymore. However, flash controls are basically blocked and often the head is too short to actually enter the opening of the softbox, wasting a bit of light. Even for the monster-sized Yongnuo YN560-II…

The “right” way

Many of the flash softboxes, especially the cheaper (Chinese?) ones from Walimex, Delamax, Alzo or whatever names exist, use a mounting system where the flash bracket is attached to the ring using a single screw. Hence, in this case the ring can be turned to point slightly off-axis from the vertical mounting bar:

This allows us to mount the flash perpendicular to the axis of the softbox with the flash head turned around to one side so that the controls are easily accessible:

Without twisting the ring, this usually doesn’t work for modern flashes as the flash head most often doesn’t rotate directly on the axis of the hot shoe and hence the flash head wouldn’t enter the ring correctly.

Some of the aforementioned issues can be addressed by using a tripod for shooting macro photos. But even with a tripod, touching the camera for fiddling around with the menus easily results in slight movements and hence out of focus photos.

This is the time where tethered shooting can greatly improve the situation. The idea behind tethered shooting is that you connect your camera to an external device like a laptop, tablet or smartphone and then use this device for some of the camera’s functionality, e.g. pressing the shutter and reviewing the resulting photo on a much bigger screen. Usually, setting up the camera, laptop and the wired connection and then being limited by the cable length is not an option with the resulting setup time and inflexibility but as taking macro photos is usually a slow business at the same place, this is not a real issue here.

During the last years many options for tethered shooting have emerged but the available functionality differs considerably and some solutions are more useful for macro photography than others. To my mind the following features are required for providing a real help with macro photography:

1. Live view: Live view of the camera image on the tethering device for composing and defining the focus.
2. LV 100% zoom: 100% zoom in live view for accurate focusing.
3. Zoom position: Free position of the zoomed view in the whole live view image. Usually the subject is not in the center of the image…
4. Camera control: Control of common camera parameters like aperture and shutter speed to avoid touching the cameras as much as possible.
5. Focus: Setting the focus automatically and manually inside the tethering software.
6. Review: Instant review of captured images with full size to review focus and DOF.

Considering these requirements I have evaluated a few available tools for my personal use. In the following paragraphs I will share my experience with these tools. As I currently own a Macbook and an Android tablet as portable tethering devices the selection of tools is limited to these platforms.

Adobe Lightroom

Link - Commercial

Lightroom provides tethering support since some time and has support for a wide variety of cameras. Many photographers would probably prefer using Lightroom as a “one size fits all” solutions so that no additional software needs to be used. Unfortunately, only a minority of the requirements for macro photography are fulfilled.

1. Live view: no
2. LV 100% zoom: no
3. Zoom positions: no
4. Camera control: minimally, only shutter
5. Focus: no
6. Review: yes

Sofortbild

Link - Free

A Mac application for tethered shooting. It basically provides the same operational mode to tethered shooting as Lightroom does but for free.

1. Live view: yes, but basically unusable, i.e. no control of the camera like auto focus works when in live view.
2. LV 100% zoom: yes
3. Zoom positions: no
4. Camera control: no
5. Focus: no
6. Review: yes

Helicon Remote

Link - Commercial with limited free version

An Android application. Helicon seems to be one of the state of the art providers of technology for focus stacking, a kind of special use case for macro photography. Helicon Remote is the Android application to control the capturing of images for focus stacking they provide. Naturally it also meets some of the requirements for usual macro photography.

1. Live view: yes
2. LV 100% zoom: yes
3. Zoom positions: yes
4. Camera control: mostly. Camera mode needs to be selected on the camera, basic settings like aperture and ISO can then be adjusted inside the app.
5. Focus: yes
6. Review: yes

Notes:

• Helicon remote is not entirely free. For shooting in RAW format a license needs to be purchased.
• When the camera is in manual mode I experienced several bugs when changing settings like aperture on the tablet, which required a restart of the app.

DslrDashboard

Link - Free (GPLv3)

An open source Android application for tethered shooting with a lot of functionality. Unfortunately, with the amount of available features the interface is quite cluttered and its sometimes not easy to understand how to achieve what you need. Moreover, I have observed some crashes in the past but not with the most recent version.

1. Live view: yes
2. LV 100% zoom: yes
3. Zoom positions: yes
4. Camera control: yes
5. Focus: yes
6. Review: yes, sometimes automatic launch is buggy but can be manually triggered after the shot

Notes:

• The review feature only works reliably if JPEG files are used (in conjunction with RAW files). This is not a problem for me as I can easily shoot both RAW and JPEG in parallel.
• DslrDashboard also supports shooting focus stacks.

Verdict

Lightroom and Sofortbild implement a tethered shooting mode that basically replaces the screen of the camera for review with the computer screen in addition to directly downloading the photos to the computer. Besides having a bigger screen for reviewing purposes this does not help very much with the macro shooting process. Much better suited are Helicon Remote and DslrDashboard. Both satisfy nearly all requirements with their fine grained camera control and live view capabilities (and additionally, a table is more portable than a laptop). Personally, I decided to use DslrDashboard. It is entirely free and doesn’t require a license > 40$ for shooting in RAW format as Helicon Remote does. Also, it offers more controls and features than Helicon Remote already does with the price of a more cluttered user interface. Finally, I had less annoying bugs and crashed in the most recent version of DslrDashboard than with Helicon Remote.

In one of the next posts I will try to come up with a short tutorial how to use DslrDashboard for macro purposes and how to understand the user interface. ;)

(Lighting diagrams and pull back shots for the two product shots can be found in the flickr comments for the two photos)

Here are some initial experiences with the lens.

First of all, I am quite happy with it so far. It’s already a heavy lens given that it has a fixed focal length in the medium range and the fact that the front element looks tiny compared to the diameter of the whole lens.

The sharpness looks good as expected from a prime lens and event a FX lens on a crop sensor.

What might be a surprise to some people is that the lens actually isn’t F2.8 all the time. Starting from approx. 0.5 meters to near focusing distance the minimum aperture goes gradually up to F4.8. However, this is really no problem for these distances as the depth of field would be unbelievably narrow and focusing nearly impossible at F2.8.

As others have already pointed out, the lens hood is quite large and might get in the way for close macro work so that you have to remove it in this kind of situation.

Another nice feature is that is has a rubber at the lens mount for weather sealing.

Of course I followed the advice to avoid strong light falling directly on the screen, but it seems that even the remaining ambient light in the room from a windows with closed curtains is too much, at least for the Spyder 4. So what I did was putting a thick black cloth on the screen (and the Spyder device) during the calibration run to shield it from all ambient light. And voilà, results are much more reasonable and consistent.

So, don’t underestimate the effect of ambient light on the monitor calibration. This seems to be especially true for glossy display types. In case of doubt, use a dark room or put a thick black cloth on the monitor during calibration.

The solution I came up with is to us a transparent sheet protector (punched pocket) for carrying around the cardboard wrapped in aluminum foil. This way the reflector hopefully last longer. Along with the cardboard I also put a white paper into the sheet protector to have a second reflector type for some variation. Here is a short photo walk-through of the creation process:

The resulting reflector fits easily into the pocket of my photo bag (Vanguard Up-Rise 33).

Here is a test shot I did with the reflector to show the effect of the two sides.

This was the setup used for the photos:

Of course it would have been much sharper and with less noise at lower ISO and I wouldn’t print this on a big canvas, but for internet use it works.

In addition to the ND filters I also bought a new polarizer. This time a bit more expensive: Hoya HD circular polarizer.

Now I only need good weather for the landscape work to start again. ;)