Here is another new experimenting in porting a Creative Commons licensed HTML5 Up template into a WordPress theme, say hello to WP-Lens.
You could have a site like this!
This joins my three previous HTML5 Up to WordPress themes, I was thinking recently of what other templates might be useful inside a WordPress site. The static html site Lens really puts images out there, with an easy to navigate way to move through a set of images, a button that moves it to full screen.
Having done a few of these, last week I decided to see how quickly I could do this- I had a working version in about 3 hours
A preview of a new WordPress Theme I am making based on an HTML5Up template – WP-Lens for luscious image collections https://t.co/TAAUnwKOdX
— Alan Levine (@cogdog) September 20, 2018
but as these go, I spent a chunk of time since then refining, and adding features.
What I aim for these themes is to make them available to people who probably would not hand code the original HTML templates. I so love the HTML5 Up collection because of their elegant design, responsiveness, and also, that they are openly licensed.
But also, as a WordPress theme, I am able to extend it’s capabilities.
For example, in the original theme, they have hard coded 12 images. In my version, you can keep piling on the images, and use WordPress pagination to group them into sets of 10, 12, etc. I added code to handle pagination.
In addition, I added a widget enabled sidebar to the right side, and archive templates to allow grouping by category, tag, or date.
I also added a download option for the main display.
Each “photo” is just a plan old blog post- it’s the featured image where the picture goes (which should be larger than 1200×750 px). I have it set to use a 100 word excerpt from the body of the post for the bottom caption; possibly for future that could be a setting in the Customizer, perhaps too whether to display the caption only on a click or mouseover.
And I just noticed when I did the screenshots that I had forgotten to include the social media links menu, so you can modify yours as needed via the WordPress menus (using the Font Awesome 4 Menus plugin).
Get your own icons via the WordPress menus
Please give it a spin, and if you make a site using this theme, send me a link here or via the repo issues, and I will add it to the theme site.
<beg>I’d love to do more of these, you can help via the sponsor links below.</beg> I’ll keep making them regardless…
Featured image: I modified my own 2014/365/1 Looking Backwards, Seeing Forward flickr photo by cogdogblog shared under a Creative Commons (BY) license by inserting a screenshot of the WP-Lens demo site.
Comments