Redux Video Background Module

Looping video backgrounds are very popular on home pages. I decided to make a homepage module so WordPress users could quickly build one on their home pages. Users only need a short video clip and some homepage module settings to complete this task. The configuration options for this module are: 

  • Select a video (mp4) from the WordPress Media Library.
  • Add any text content or basic HTML content to be overlayed over the looping video.
  • Select the overlaying text’s color.
  • Select the opacity of the video.
  • Select the height of the video.
  • Position the Video Background module on your homepage with the Redux Homepage Layout Manager. So fast!
Fullscreen Video Background settings

When you decrease video opacity, an underlying background line pattern reveals itself. Decreasing video opacity and exposing the background pattern improves the visibility and readability of the overlaying text content. There is a working example of this module at the bottom of my homepage but only temporarily.

See the Pen Basic Fullscreen Video Background by Matt Gross (@mattgrosswork) on CodePen.0

Fullscreen Video Background

Redux Parallax Module

After building a parallax in a client site, I decided that my clients might want to create or edit their own parallax. A web parallax is a vertically fluid scrolling of images and text. A parallax is easier to understand than to describe, so see this example parallax. I am using the Redux framework on the backend of a WordPress site for a content provider to easily build and configure the parallax. Here were my goals to create the parallax on a Bootstrap homepage:

  • the parallax’s position on the homepage could be changed
  • the parallax could easily be activated or removed from the homepage
  • the number and order  of parallax images needed to be adjustable and re-ordered
  • the floating parallax text blocks could be easily edited
  • the parallax could have an optional title
  • the height of parallax images could be adjusted
  • the opacity of the parallax images could be adjusted
  • there could be no client coding, only WordPress content provider skills required

What made my project really work was Redux’s slides field. This field allows the user to create any number of slides which each includes: an image, a title, and a text block, so you can create a parallax with an unlimited number of slides. The slides can also be reordered by dragging each slide to your desired sort order, the top slide displays first. I also added adjustments for the background images’ height and opacity. Making adjustments to the parallax couldn’t be easier.

Adding images and text blocks within Redux parallax module

Adding images and text blocks within the Redux homepage theme options

I was surprised how little coding was required to build a parallax. Just a little HTML/PHP, a few CSS rules and no Javascript. If you would like to learn more about the Homepage Layout Manager, I have a post that introduces the Redux homepage theme option.

See the Pen Parallax by gordo019 (@gordo019) on CodePen.

See the Pen Redux config settings by gordo019 (@gordo019) on CodePen.

Bootstrap Filtered Photo Gallery

Photos tagged “desert” and red filter buttons

This spring I embarked on a new photo gallery. I wanted to streamline and consolidate getting my photos and videos online. I didn’t want to have to create posts or even photo galleries. I wanted to use WordPress’ Media Library Uploader, tag the photo, and be done. This post gives an overview of how I created my filtered photo gallery.

The default Media Library doesn’t provide for photo tagging but a little code added to the functions file will create a tag field for each photo. Photos with the same tag can be viewed or “filtered” as a group on my thumbnails template page creating a filtered gallery page.

xxxx
Filtered Photos Theme Option, add photo tags here for Photo Page

I realized that it might be nice to control which tagged photos would be included on the thumbnails page, so I created a photos theme option panel to control which groups of tagged photos would be presented on my thumbnails page. Each photo tag on the option panel, displays the tag as a tag filter button. Clicking on these filter buttons displays only photos with the same tag. So viewers can easily filter through a large number of thumbnails which on my site I grouped/tagged by sports: skiing, climbing, kayaking, etc. If I want retire a group of images from my thumbnail page, I just remove the tag name from the Photos Option Panel. There is also a theme option to control the display of captions underneath each image.

Tag and video URL fields added to image attachment settings
Tag and video URL fields added to image attachment settings

If any thumbnail image is clicked from the thumbnails page, the viewer see an overlay hover description (image caption text) and view button. Clicking this button moves to an image slider page (my other template page). This page has the Bootstrap carousel which allows full-size viewing of the images with the same tag. Because the carousel is Bootstrapped, the images are always displayed responsively in all devices.

To consolidate all my media, I also added videos to my filtered gallery. I have a Vimeo Plus account, so my videos are streamed from Vimeo’s video servers. In order to include videos within my gallery, I needed to add a second input field to my image attachment settings where I store the Vimeo URL of each video. The uploading process is slightly different for videos: upload any pic for my video’s thumbnail image, use the tag “video”, and included the embed URL to the video (Vimeo or You Tube). Any video thumbnail tagged “video” will be routed to the video player instead of the photo carousel. This allows photos and videos to be organized together and I no longer need any video plugins installed into my WordPress site.

My current filtered gallery displays about 50 photos and 12 videos all together on one webpage. The page’s performance seems good for this much media (see Pingdom results). I wanted to have retina/4k quality photos, so I am using Jetpack’s Photon CDN (Content Delivery Network) to deliver correctly sized images per the requesting device, including devices with retina/4k screens.

Gallery thumbnail page with Pingdom performance testing
Gallery thumbnail page with Pingdom performance testing

I learned a lot from this project. Maybe the next step for me would be to package everything into a WordPress plugin. I am mostly happy to be able to upload my trip pics quickly, and know they will display responsively on all internet devices.

 

Redux Homepage Theme Options

Your site’s homepage is the most important page of your site. It is where your visitors land and the homepage needs to be interesting to keep your visitors at your site. This is an introduction to creating a WordPress homepage with the Redux options framework installed within the WordPress theme. The framework allows non-technical content providers to create and modify the layout of the homepage without ever losing its professional design. The framework allows WordPress developers to create Dashboard theme options to further enhance the look and functionality of a great homepage.

The Redux framework can integrate with any part of a WordPress website but this post only covers using the theme options to configure the homepage. WordPress’ post editor is fine for creating a post or a simple webpage. But in many cases, content providers don’t have the time or knowledge to create a quality homepage. Not only does the homepage need to look good, but it needs to be a fully responsive page that displays properly with all internet devices. The Redux framework allows content providers to quickly refresh their home pages; resulting in a homepage that is never stale.

Homepage constructed with Redux theme options.

How does all this work? A nice homepage has blocks of content that make up the page’s design. The homepage highlights various content within the website. One block of homepage content might highlight a featured post known as a Jumbotron content block. Redux calls these blocks of content modules. Inside the theme’s options panel is the Homepage Layout Manager, where homepage modules are organized. Only enabled modules are displayed on the homepage. These draggable modules can also be reorder, which changes their positions on the homepage. The content provider never writes the homepage content, they configure the modules to create a homepage design.

My WordPress theme has ten homepage modules to choose from. If you enable all 15 of them your homepage would look like this test page. Below are some module descriptions and their settings.

 
  1. Hero Content
  2. Jumbotron
  3. Page Content
  4. Portfolio
  5. Divisor 1
  6. Services
  7. Hero Post
  8. Widgets (3 column)
  9. Divisor 2
  10. Two Columns
  11. Slider
  12. Wide Slider
  13. Google Map
  14. Tabbed Panels
  15. Video Player
  16. Fullscreen Video Background
  17. Parallax
  • The Hero Content is simply a header title and header image for the top of the homepage. The content provider can easily change the title and header image in a minute.
  • The Hero Post module if enabled displays the content of the latest post published.
  • The Jumbotron allows you to highlight any other web page or post with a bit of text, an image, and a connecting link.
  • Page Content brings in content that is on your designated front page.
  • The Two Columns module displays a title followed by two blocks of text. The content provider provides the title and two blocks of text in the module’s settings.
  • The Divisor modules are used to visually separate other modules. The overlay text and text color can be changed,  and the background image can easily be changed; its height and image opacity can be adjusted within the module settings.
  • The Portfolio module displays a thumbnail image (and link) to your latest three projects. The module’s settings allows you to change the number of displayed portfolio projects on the homepage.
  • If you like to work with WordPress widgets (Appearance>Widgets), you can enable the Widgets module to display widget content in a three column layout on the homepage.
  • The Services module displays text blocks of each service you offer. You decide how many to display and if you want to include an icon image from Font Awesome’s icon library.
  • The Slider module allows you create a Media Library gallery which slides each selected gallery image across the homepage. The Wide Slider gives you a full page width gallery.
  • With the Google Map module, you just enter your latitude and longitude values in the homepage theme options, then, drag the map module to its homepage position. This seems incredibly easy for clients to insert fully responsive Google maps into their WordPress site. You can also embed Google My Maps if you want customized maps with an advanced map editor.
  • The tabbed panel module is very similar to the standard tabbed panels you find on many sites.
  • The video player module embeds videos from Vimeo or uTube. Just enter the URL to your movie.
  • This where you use a looping video (no video player) as a background to some text content.
  • The parallax module creates a fluid scrolling effect over a number of images and inserted text.

Configuring the homepage is easy with the Layout Manager in the Theme Options. Just enable the modules you want, order the module layout, and set any module settings that may exist. Content providers can quickly create a perfect responsive homepage layout without any coding or even messing with the WordPress editor.

modules
Homepage Layout Manager. Each button is a draggable homepage module

Creating a WordPress Retina Photo Gallery

WordPress tiled gallery
JetPack square tiled gallery

Recently I decided to improve my WordPress photo gallery. The goal was to improve my pictures when viewed with the new high-end retina or 4K displays. This post covers some of the challenges I encountered and image technology improvements that WordPress now offers.

A 4K screen means 4000 pixels across and now there are even 5K displays available. Apple’s retina iMac display has 5220 pixels. The upper end of TVs now boast 4K as the new hi-def plateau in picture resolution. If you have professional photography or artwork that you want to present visually at the highest quality, then, you may need to upload higher resolution images to display optimally on these new retina/4K/5K displays. Retina images (so called 2x images) double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and inserting the 2x image into half of that space (100 x 100 pixels). In many ways using web images has become more complex and having the optimal images delivered to the many different types of internet devices has become tricky. Internet devices come in many sizes now, some displays are retina quality and others are not. So what size of image is going to work with such a wide range of internet devices/displays? The answer is no image size will work effectively for all the possible devices and display resolutions.

Read More