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!
 

Responsive image

 

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.

Responsive image

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.

 

Responsive image

 

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.

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.

 

Responsive image

 

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. 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.

 

Responsive image

 

Homepage Layout Manager. Each button is a draggable homepage module

Creating a WordPress Retina Photo Gallery

WordPress 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

Images and Widgets in WordPress 3.9

The last time I wrote an article about WordPress it was at version 3.5 and having a WordPress site that was responsive to all the new internet devices was the upgrade goal for many WordPress sites. This post focuses on working with images and widgets including some new features of WordPress 3.9 and a couple of the newer plugins available within the Jetpack set of WordPress plugins.

Read More

Embedding Google Maps in WordPress

This is a tutorial to get your custom Google Maps embedded into WordPress. Your custom Google Maps from My Places can be embedded easily into a WordPress post. First, create a My Places custom map, you are basically creating the overlay content for your Google map. After saving your map, click the link button (chain icon). This brings up the Customize preview panel (shown below). At this point you can:

  • size your map including specific width and height
  • position your map by drag it around
  • set the zoom level you desire
  • select one of four map types to initially display (Standard, Satelite, Terrain, Google Earth)

When you have your desired preview of your map, copy the generated HTML and paste into your WordPress post in text mode. Keep in mind that there are two Google map engines: classic maps (v_1.0) and a newer map API (v_2.0). My example is from the classic engine. The toolsets for the two engines are not equivalent at this time.

customize_embed_code2

The actual Google Map…

Getting iPhone HD Video Online

I recently upgraded my iPhone to the 4S model, where Apple has upgraded the camera chip and lens design for improved photography including; being able to capture HD 1080p video. This post attempts to cover the process of getting the iPhone’s new HD 1080p video to a WordPress site. Related to this topic, I wrote a similar post called Getting Good Video with Vimeo.

Getting video online and into WordPress is more involved than moving iPhone images to a WordPress site. Firstly, you should realize that source video content should not be uploaded directly to your WordPress Media Library. Video content is data heavy and especially with HD quality video, you need a streaming video server, a standard Apache server with a WordPress installation can’t serve that much video data to your viewers. The server limitation is addressed by setting up a video stream service from You Tube or Vimeo. The solution is to embed the video’s URL into your WordPress post and a video player will pull optimized video content from the streaming server. Optimized video can have many parameters, compressed MP4 video would be a video format that allows for compression and is optimized to stream efficiently from a steaming server. You Tube or Vimeo will provide video streaming for free, but if you plan on providing HD quality video to your viewers, then you will need to upgrade to a paid streaming account. I purchased a Vimeo Plus account for $60 a year. With the Plus upgrade, Vimeo provides me with better video rendering and the capability to upload 1080p source video. Without a Plus account, Vimeo limits free-accounts to only limited HD 720p uploads. Don’t mess with the a free account if your goal is HD content on your site. All the quality HD content I have viewed on Vimeo have been contributed by authors with “Plus” status.

iMovie’s video cam import options

Getting your iPhone video clips to your video editing application, in my case; iMovie, requires connecting your iPhone with a USB cable, and importing the clips with the video cam import button. There is also a wireless method of sending an iMessage to yourself with the desired video clip attached. Note: iCloud syncs only photos, not video, so iCloud is not an importing option to your Mac. Importing a lot of video into iMovie can be time consuming because iMovie must first generate thumbnail images of the imported video. I use the QuickTime player to do an initial edit of the poor clips, importing only video with potential into iMovie.

Uploading your finalized project within iMovie to Vimeo is easy just select Vimeo from the  Sharing Menu. Generally, you want to upload the best source video to Vimeo that you have, so click the  HD 720p or HD 1080p format. Then, from your Vimeo Plus account, you should review and select all your video settings to create your custom defaults. Take the time and create a preset theme for your video player, this will keep all instances of the video player looking and operating consistently within your WordPress site. Vimeo Plus users have additional video settings that basic accounts do not have, including; which domains can show your videos, as well as, hiding them from the Vimeo.com site. Many additional HD options with Vimeo are covered on their FAQ page.

The last step in getting your video online and into your WordPress post is the embedding step. I have not found a good WordPress plugin for importing Vimeo content yet, so you need to copy the necessary code snippet into your post editor in HTML mode. There are three ways to do this:

  1. Paste the Vimeo URL into your post.
  2. Use the Vimeo shortcode and an associated WordPress plugin.
  3. Copy and paste the Vimeo iframe embed code into your post editor.
Universal embed player on iPhone WordPress post

Don’t use the first two, because they may not include the universal embed code and they may fail to scale your videos properly in mobile devices and tablet devices like an iPad. It will also ensure that the proper size and format (Flash vs. HTML5) is streamed to your device, letting Vimeo deal with the various sizes, devices, and formats required on the Internet. The iframe embedding HTML code is found in the embedding panel (Get Embed Code link) of your video’s settings when logged into your Vimeo.com account. You can reuse this code snippet for future video posts replacing the Vimeo id number and adjusting the width and height if desired.

OK, now the reality check from Vimeo:

“Note while 1080p is higher resolution, please be aware that it can take significant resources on your viewers’ computer and may cause choppy playback.”

You’ve got this awesome HD 1080 video content online but your viewers may not have the internet bandwidth, computer horsepower, or monitor resolution to see the video’s HD quality. HD 1080p video has twice as much data as HD 720p video. From my tests, it is very difficult to see the difference in quality between 720p and 1080p, unless your viewers enlarge your video to full screen mode and my guess is that most viewers don’t know about this option unless they are specifically reminded to view in full screen mode. It may make sense to provide just HD 720 video to your audience unless they are from South Korea and can pull down 50MB/sec. On the flip side, 1080p seems to be a standard resolution for many large screen electronics, so you might want to get your video content ready for the future.

[responsive_vimeo 36972963]

Genesis Framework

I am trying a new theme/framework called Genesis. In an effort to avoid having older posts be buried by newer posts, this theme design tries to emulate a magazine layout. By configuring, the homepage with a feature slider widget, I can direct the browser to older posts that might not be displayed on the homepage anymore. There are also two feature lists (under the feature slider) that serve the same purpose; linking readers to hidden content. Hopefully this new design will make better use of valuable home page real estate and let users quickly discover what my web site is all about. Let me know what you think. In the future post, I am going to write about my migration from WordPress’ default Twenty Eleven theme to the Genesis framework.

iPhoto Photography to WordPress Photo Gallery

iPhone camera to WordPress photo gallery

The best photography happens for me when I carry a small camera in my pocket at all times. The camera chip on my older iPhone was horrible and I deemed it unacceptable. The new camera chip (5 mega pixel) included within the iPhone 4 motivated me to upgrade from my older iPhone. A secondary goal was to eliminate my point and shoot Canon Powershot camera and carry just one camera; in my phone. I have always liked my Powershot, but having a decent camera integrated into a smart phone is just so much more practical and convenient when you want to travel simple and light. The whole process of getting pictures online can be accomplished with one device now. This post covers how I take iPhone pictures and upload them into a WordPress site with a NextGen photo gallery.

Here are the challenges: You have a bunch of trip pics that need to be uploaded, possibly image enhanced, resolution corrected, add a text image description, and finally, thumb-nailed and sorted within a photo gallery on a WordPress post or page. You might not have a computer or a wifi connection, and maybe you want to upload additional pics to your photo gallery as your trip progresses. The following process is how I get my photos online into my WordPress trip post.

Before I leave on a trip, I create a standard WordPress post for my trip. I also create a Nextgen photo gallery for my trip. Next, I embed the NextGen photo gallery into my WordPress post. Initially, I might not have any images for my photo gallery. As I start accumulating  photos of my trip, I upload my desired images to my WordPress server and FTP them into the desired NextGen gallery folder (yourdomain.com/wp-content/gallery/mytripfolder/). The only step I need to do in the WordPress/NextGen admin is to have the NextGen plugin scan for any new images uploaded recently. NextGen will scan my gallery folder for new pictures; resizing them, and creating the necessary gallery thumbnail images.

Below is a NextGen photo gallery of pics all taken with the iPhone 4 camera. If I need a wide angle shot, I use the Pano iPhone application. Pano can stitched together multiple pictures to create the wide panorama pictures you see in the gallery. The iPhone’s camera lens is flat and not optically adjustable, so the zooming function is created digitally; which usually results in poor image quality.

With the iPhone’s high resolution retina technology it is actually possible to do some image correction functions from the iPhone’s small but very crisp display. If I have an image that needs some tonal adjustment, cropping, or sharping, I can make those adjustments with my finger with Adobe’s Photoshop Mobile application. I have found that many of my iPhone’s images do not need much digital correction.

My images were uploaded from my iPhone’s camera roll with an application called FTP on the Go. This was the best uploading application with many FTP functions; including the ability to change image sizes and adjust server file permissions. It also works over Wifi, 3G, and Edge networks.

There are other options to get your iPhone pictures to your WordPress site. WordPress for iOS is an iPhone app that allows posting and uploading of pictures to a post. But the WordPress for iOS app can’t match NextGen when it comes to organizing and displaying multiple photos within a blog post.

Note: The pictures below were taken with iOS 4.01. Since then Apple has released version 4.1 which includes the HDR photography feature. HDR supposedly deals with pictures with varying light intensities and takes three pictures and combines the best areas of each of those adjusted shots. Ever taken a shot with a washed-out sky? This technology deals with those kind of challenging shots. I will experiment with HDR as soon as my jail broken phone allows me to update to iOS 4.1.