The Ultimate Mega Guide to Using Video With WordPress

Go to source

Featuring video on your site can be a powerful way to show – and not just tell – visitors what your site is all about.

According to Simply Measured, videos have the highest shares and engagement right up there beside photos. In the first quarter of 2015 alone, video engagement increased by 43% on Facebook.

On top of that, 64% are more likely to buy a product on an online retail site after watching a video, and 70% of marketing professionals report that video converts better than any other medium.

But if you have a fantastic idea for a video, or you’ve got one already, how do you go about adding it to your site? In this definitive guide, we go through everything you need to know about video, from technical details on aspect ratios and codecs, though to self-hosted versus hosted videos, encoding videos for multiple devices, and getting started uploading videos to your WordPress site.

This is part one of a two-part series. In tomorrow’s post, we’ll review the most popular services for hosting video.

Let’s get started.

  1. Common Video Terms Defined
  2. Uploading and Adding Video File Types to WordPress
  3. What Settings Should You Use?
  4. Self Hosted vs Hosted Videos
  5. Uploading Videos to WordPress
  6. Uploading Videos to the Media Library
  7. Advice From Our In-House Video Expert Joshua Dailey
  8. Encoding Your Videos for Multiple Devices
  9. Displaying Responsive Videos in WordPress
  10. The Top Hosted Video Options
  11. Summary

Common Video Terms Defined

Before we dive right into how videos work with WordPress, it might be helpful to first go through the common definitions when it comes to videos. In particular, understanding the terms used when uploading and displaying videos on your site can help eliminate confusion.

And if you think you already know video terms inside out, the definitions below may be a helpful reminder.

For professional videos on your site, the 16:9 aspect ratio is usually best.
For professional videos on your site, the 16:9 aspect ratio is usually best.

Aspect Ratio – This term is used most commonly for photos, TVs, and video.

It refers to the proportional size of the image or screen in width, then length in the form of a ratio.

For example, a common aspect ratio is 16:9, where 16 units is for the width of the video or image and nine units is the length.

Resolution – It’s another word for the quality of the video image and can be measured in pixels per inch (PPI) or more commonly, dots per inch (DPI). These units are used to explain how many dots of color (for printed images) or how many pixels of color (for digital content) per square inch are displayed within an image or video. A higher DPI or PPI means a higher resolution and better quality. The standard for high quality (HQ) video is 300 PPI.

When it comes to displaying video, resolution is usually written in the form of width x height where width refers to the number of horizontal pixels displayed and height is the number of vertical pixels displayed on the screen.

When written in short form, it looks like height p, or to use a common example, 1080p.

Standard Definition (SD) – A common video resolution is 640×480 or 480p and is considered standard definition. A video in standard definition appears the size of an older, mostly square TV.

High Definition (HD) – Most TVs and computer monitors made today are in 1920×1080 or also known as 1080p. The picture is clear and crisp because the monitors and screen are made for videos that have a high resolution.

There are also other resolutions that are considered high definition such as 1920×720. This also includes the aspect ratios of 2.39:1 and 1.85:1 which are considered super widescreen and are commonly used for films that you can check out at your favorite movie theater.

Interlaced – An older way for video signals to display video on a screen. Signals send horizontal lines of the video to the screen which together form the moving images. Interlaced videos display every other horizontal line and switch between odd and even numbered lines.

If you still have a big box TV you bought in the 90s, videos on it will be displayed as interlaced. It was the old standard for videos.

Remember the big, old TVs?
Remember the big, old TVs?

Progressive Scan – This is the new standard for videos. Video signals display each horizontal line for a richer and more high quality picture, unlike the interlaced alternate which displays every other line.

If you bought a flat screen TV or monitor since they have been first made, then you’ll own a screen that displays videos with a progressive scan.

Frame Rate – This is the speed at which a sensor captures video in a second. A single frame looks like a photograph. When you string each frame together, you get a moving picture or in other words, a video.

Frames Per Second (FPS) – This term is used to describe the number of frames used per second of a video. Common FPS include 24, 25, 29.97, 30 and 50. When you have a video that’s 30 FPS or more, it’s considered HD.

Bitrate – This indicates the amount of data that’s transferred per second when a video is being uploaded, usually measured in megabits per second (mbps) or kilobits per second (kbps).

If you find a video host that uploads videos with a bitrate of less than 1000 kbps, it’s best to search for another host since the upload process will be too slow for most people.

Compression – While this term can apply to more than just videos, in this case, it means decreasing the amount of data a video file holds.

It’s a great idea to compress your videos because they will upload to your site or your video hosting quicker. If you choose to let users download your video, this will also be a lot faster.

Each video hosting service may have different compression guidelines and suggestions so it may be worth looking into if you choose to host your videos outside of your WordPress site.

Lossy – When you are compressing a video file, a lossy compression means the quality of the video decreases when compared to the original file. Despite the lesser quality, a lossy compression usually results in a smaller file size.

Lossless – This would be the opposite of lossy when you are compressing a video file. While lossless compression means the original file and compressed file have the same video quality, this usually results in a larger file size when compared to lossy compressed files.

Lossy compression is lower in quality and smaller in file size than lossless compression.
Lossy compression is lower in quality and smaller in file size than lossless compression.

Codec – This is most commonly a method of compressing and decompressing videos. It’s also known as a container.

A software that compresses videos is also often referred to as a codec if it can both compress and decompress videos. If it can only compress videos is commonly referred to as an encoder and a software that only decompresses is usually called a decoder.

Common codecs include H.264/MPEG-4, VP6 and WMV.

Encoding – This describes the process of taking an original (source) video file and converting it from one extension to another for viewing on different devices and browsers.

For example, converting a video file called myvideo.mov to myvideo.mp4 allows the video to be uploaded and played on a WordPress site.

Since different browsers and mobile devices accept different kinds of video file formats, encoding your videos can help ensure your videos are viewable to all your visitors no matter how they choose to view your video.

Uploading and Adding Video File Types to WordPress

Speaking of encoding, there are certain video file extensions that WordPress lets you upload by default.

  • .MP4, .M4V (MPEG-4)
  • .MOV (QuickTime)
  • .WMV (Windows Media Video)
  • .AVI
  • .MPG
  • .OGV (Ogg)
  • .3GP (3GPP)
  • .3G2 (3GPP2)

There are many files types which aren’t accepted by default for security reasons. If you don’t need a file type that’s not accepted by WordPress, it’s best just to not use it.

Error message in WordPress: File type not permitted.
If you try uploading a file type that’s not already programmed into WordPress, you get an error.

If you would still like to let you and your users upload more file types that aren’t allowed by default, you can do so by adding some code to the bottom of your theme’s functions.php file under wp-content > themes > your-theme.

Just remember that any changes you make to your theme’s functions.php file get erased after you install an update to your theme.

To prevent this from happening, you can create a child theme. If you need pointers on how to do this, check out our post How to Create a WordPress Child Theme.

Here’s the code you would need to add to include additional file types:

To add the file extension of your choice, change the word extension on line four to the actual file extension you would like to add, then replace mime/type with the correct mime type which you can find on the MIME Type List from FreeFormatter.com.

To add a second file extension, change doc and application/msword to your desired extension and type on line six. You can also delete this line if you only wish to add one file type.

If you would like to remove a file type from the list of accepted file types, while adding others, add this code instead:

You would add it to the same place, to the bottom of the functions.php file found under wp-content > themes > your-theme.

Just be sure to edit line eight to reflect the extension you want to remove. In this example, you would change exe to the file type you want eliminated.

Upload File Types setting in WordPress super admin > Network Settings
If you skip this step in the Network Settings after adding the code to your theme’s functions.php file, it results in an error when you try to upload the file type you wanted to add.

For Multisite installs, once you have added the code above to your theme, you need to add the file extension through the super admin dashboard > Settings > Network Settings. Under Upload File Type, enter the extension of the file you wish to add, being sure that each file type is separated with a single space.

Once you’re done adding the extensions to the list, click Save Changes at the bottom of the page.

You and your users can now upload the file types you added.

If you would prefer to avoid adding code to your theme, you can still add the file extensions you want with the WP Add Mime Types plugin or Media Library Assistant plugins.

What Settings Should You Use?

Before you start uploading your videos, you might be wondering what kind of settings you should choose to ensure they display well. At the end of the day, this may look different for everyone, especially if you decide to upload to a video hosting service since each one usually has its own recommended settings.

On the other hand, if you’re self-hosting your videos, a general rule of thumb can be helpful in deciding what your settings should look like for your particular project.

These recommended from Video4Change should get you off to a good start:

Format: MP4

Video

  • Codec: H264 (High profile)
  • Frame Rate: 24, 25 or 30 (Constant)
  • Frame Size / Resolution: 1280 x 720 (720p)
  • Fields: Progressive
  • Bitrate: 5000 – 10000 kbps

Audio

  • Codec: AAC-LC
  • Bitrate: 320 kbit/s
  • Sample Rate: 44.100 OR 48,000 kHz (retain original sample rate)

Just keep in mind that a higher bitrate will result in a larger file size so if your goal is to keep things neat and tight, choose a bitrate closer to 5000 kilobits per second.

Now you’re almost ready to upload your videos.

Self Hosted vs Hosted Videos

Before diving into the ins and outs of adding videos to your site, it’s important to first understand where your videos should be stored. To that end, there are two options: self-hosted and hosted.

Self-hosted your videos means that they’re stored on your server with your WordPress site.

Hosted option means your videos are stored elsewhere and linked or embedded to your site.

There are many reasons why you would choose one over the other and here are some pointers to help you determine which option is right for you:

  • Do you plan on displaying many videos that are high-quality or high definition? If so, your server’s storage limit can fill up fast and it may be appropriate to host your videos elsewhere.
  • The kind of hosting you have set up is important:
    • Shared hosting – If you’re able to load even one high-quality video with a large file size, consider yourself lucky. Definitely consider hosting your videos somewhere else.
    • VPS hosting – You may have enough room to store quite a few videos as long as you don’t plan on continuously adding more as time goes on.
    • Dedicated hosting – You should be good to go and have quite a lot of room for many videos, although, depending on your set up and if you would like to add many videos over time, you may need to upgrade later on.
  • To host videos well, you should make sure your site and server are optimized for speed – Be sure that your server has an ample amount of RAM and a fairly generous processor speed. The amount you need depends on how many videos you plan on self-hosting. As a general rule of thumb, a video that’s 1GB in size should comfortably fit into a hosting plan that has two and a half gigabytes of RAM, a minimum of a dual-core processor and 1500 MB of storage space.
  • Make sure you have enough bandwidth allotted to your hosting package – How many visitors are you expecting? If you think your site will blow up with popularity, you should consider how much bandwidth your site is allowed to use up. The more visitors you’re expecting, the more bandwidth you’re going to need. To give you an idea of how much bandwidth you might need, a one-gigabyte video played or downloaded 1000 times needs one terabyte of bandwidth (that’s 1000 GB). If you’re planning to display many high-quality videos with tons of visits to your site, you should consider hosting your site somewhere other than your own server.

If your server doesn’t have a lot of storage space, speed and bandwidth, definitely consider hosting your videos outside of your server. If you have lots of room on your server as well as tons of speed and allotted bandwidth, but want to host heaps of videos with thousands of visitors, also consider hosting your videos somewhere other than your server.

On the other hand, if you have a server with tons of storage space, a few fast processors and lots of bandwidth giving you breathing room, you should be able to host at least quite few high resolution videos with no problems.

If you’re still not sure if you have enough resources to host your own videos, but want to, it’s a great idea to ask your hosting provider’s customer service team. They can best help you sort out the best option for your specific needs.

If you would like to look at some other reasons why you may want to host your videos elsewhere, take a look at one of our other articles called 5 Scenarios Where You Need To Ditch The WordPress Video Player.

Uploading Videos to WordPress

Since the most recent WordPress updates, it hasn’t been easier to upload and showcase your videos. Now all it takes is just a few clicks and you’re ready to go.

If you have decided to self host your videos, here’s how to add them to your WordPress site.

Adding Videos to Your Post or Page

In a post or page, click the Add Media button, then click the Upload Media tab at the top if you are not already on that tab when the inline pop-up opens.

Adding media in a post
Uploading a video directly to a post is easy.

Then, click the Select Files button that appears in the middle of the page.

Selecting files to upload
You can alternatively choose an already uploaded file by selecting the Media Library tab.

Choose the video file you would like to upload and follow your computer’s prompt.

Attachment display settings
There are other options available if you don’t want to embed your video.

Once the file uploads, enter a title, caption and description as desired on the right-hand side and be sure that the Embed Media Player option is selected from the Embed or Link drop down box under the Attachment Display Settings. It should be selected by default.

Finally, click the Insert into post button and your video will be added to your post or page, complete with a thumbnail.

Adding a Video Playlist to a Post or Page

If you have uploaded two or more videos, you can create a playlist.

Create video playlist menu item
Creating a video playlist is as easy as selecting videos from the list in your media library.

To do this, click the Add Media button again, select Create Video Playlist from the menu on the left hand side of the pop-up, then click on the icons for the videos you want to add.

If you make a mistake, just click the the check mark on the top, right-hand corner of the icon for the video you want to remove.

You can also click the Clear link at the bottom of the window to unselect all your choices.

Once you are done making your selections, click each video to add the title, caption and description you want on the right for each of your videos, then click the Create a new video playlist button at the bottom of the Attachment Details section.

At this point, you can edit the titles of the videos you selected, add more videos by clicking the Add to Video Playlist menu item on the left and reverse the order of your selected videos by clicking the Reverse order button beside the Playlist Settings on the right.

Under the settings, there are two checkboxes:

  • Show Video List – This option displays your videos with a thumbnail.
  • Show Images – Checking the box for this setting displays a text list of your videos.

When you’re done making your selections, click the Insert video playlist button on the bottom-right.

Last, but not least of all, be sure to click the Publish or Update button on your post or page to save your changes.

Uploading Videos to the Media Library

If you would like to upload videos, but don’t want to insert them into a post right away, then you can do so by going to Media > Add New in your admin dashboard and clicking the Select Files button. Follow your computer’s prompts to select and upload a video.

Media library > Add New page
Uploading a file directly to the media library.

Once the upload has been completed, click on the file’s icon which appears on the page after the loading bar appears to complete. On the Attachment Details inline pop-up that appears, click on the  Edit More Details link at the bottom.

Once the Edit Media page loads, you can easily customize your videos settings by editing the title, adding a caption and description.

Set featured image link on the edit media page.
You can change many settings on the Edit Media page including setting the featured image of your video.

On this page, you should also see an preview image displayed in the player preview. If you would like to change the image that appears and set your own to display, click the Set featured image link on the bottom, right-hand side of the page.

The media uploader pop-up window should appear where you can select an image from your media library.

You can also upload a new one by clicking Upload files > Select Files, then following your computer’s prompt.

Add the title, caption, alt text and description you want, then click the Set featured image button at the button, right-hand corner.

Finally, click the Update button and your new featured image and other changes should save. Your video is now ready to be added to a post or page at your convenience.

Just remember that in order for your videos to have the option to be embedded into your posts and pages and actually be playable with the default WordPress player, your video files will need to be encoded with the MPEG-4 codec or in other words, have the .mp4 extension.

If you would like to choose a different video player, other than the default one WordPress comes with, check out our post 5 Beautiful WordPress Video Players.

Advice From Our In-House Video Expert Joshua Dailey

Video guy Joshua Dailey.
Video guy Joshua Dailey.

I asked our videographer Joshua Dailey his advice when working with video, and in particular what advice he would give to businesses working with video.

Joshua directs, writes and scripts the product videos here at WPMU DEV and has help from other talented videographers on our team.

“We are working to give users a better understanding of WPMU DEV products and WordPress so they can make quicker, informed decisions about what products will best fit their needs.” – Joshua Dailey

“With our tutorials, we are trying to help people get started as quickly as possible.” – Joshua Dailey

Here’s Joshua’s top 10 list for UI and UX best practices, in no particular order:

1. Find the Right Host

It’s important to find one that can accommodate all of your needs before you upload over 100 videos. Whether that’s self-hosting, free hosting or premium hosting, make sure your host not only meets your current needs, but can and is willing to grow to meet your future needs.

Moving WPMU DEV from Vimeo to Wistia was a lot of work. It was worth it, but it would have saved a lot of time and money had we found them first. You can learn more about the transitioning process in our article Why We Moved From Vimeo Pro to Wistia – And Why You Should Too.

2. Videos Need to be Encoded

Make sure you videos are encoded correctly. First, for the best results, but second, for playback on all types of devices. This is something you may not initially think about if you’re self-hosting your videos.

If you have only ever used YouTube, Vimeo or Wistia, they reencode your media so your videos work on all types of devices – in all types of browsers. When self-hosting you may need to store multiple versions of the same video in different formats or you may not be able to view your video depending on the browser or device they are using.

3. A World-Wide Audience Should Have Equal Access

If your site targets users from around the world, remember that internet speeds can make it near impossible for some of your users to access heavy video content. This is improving all the time, but we are far from having equal access, globally.

This doesn’t mean you shouldn’t use video since it’s a powerful form of communication, but it does mean you should be aware of who your audience is when sharing. It’s also important to make sure you’re using an appropriate player and compression method.

4. Presentation Matters

It’s easy for your users to skip clicking on a video based on the thumbnail alone. Remember, video thumbnails matter.

Always test the performance of your videos.
Always test the performance of your videos.

5. Test Your Videos for Performance

Try your crazy ideas but know when they are working and when they’re not. We spend a lot of time creating videos, sharing them internally and adjusting content before pushing them live. This is an important step in ensuring each member in your audience has equal and full access to your videos.

6. Know Your Audience

Once a video is published, we spend time watching how users interact with our content and make even more adjustments if needed. For example, we did some long, in-depth video tutorials about our plugins, but found short setup guides to be more accessible to more viewers.

Thanks to tracking viewer engagement with analytics, we were able to determine what our audience prefers, especially since it’s not the same across all businesses.

7. Keep a Close Eye On Quality

Audio done well often goes unnoticed and audio done poorly tricks viewers into believing the whole video is trash. Be careful when using video as a sales tool because the quality of your videos reflects on the quality of your product or service.

8. Plan Your Video Marketing Thoroughly

Customers and end users equate the quality of your marketing to the quality of your product even if it’s not an accurate reflection. Having a solid marketing strategy helps keep your end user happy with your business.

9. Videos Should be Accessible to Everyone

According to preliminary research from the 2012 National Health Interview Survey an estimated 20.6 million adult Americans have been reported as having trouble seeing, even with the aid of glasses and contacts or are legally blind.

Gallaudet University in Washington, DC has also reported that an anywhere from nine to 22 out of every 1000 Americans have a severe hearing impairment or are legally deaf.With these numbers in mind, it’s important to make sure your videos are accessible to individuals who can identify as having these impairments.

Uploading closed captioning documents to your videos helps those who are hearing impaired to view your videos with ease. Similarly, including a transcript of your videos assists those who are visually impaired to access your videos.

Have you ever wondered how easy it is for people with disabilities to access your site and then navigate around it?
Have you ever wondered how easy it is for people with disabilities to access your site and then navigate around it?

Making sure your video player includes keyboard navigation and support for screen readers are also important. All videos should play only when the play button is clicked or otherwise accessed with a keyboard to be considered accessible.

If your videos play automatically on page load, they aren’t accessible and you should adjust your settings.

Not to mention the plain idea that videos that play automatically can often be startling, especially when your users aren’t aware of where the sound is suddenly coming from or if the volume is set to be high.It’s also a drain on most end user’s internet bill since they need to pay for streaming videos.

It may not be a huge concern for desktop users at home or in the office, but mobile users often have a much smaller and limited data plan with their carrier and each played video ends up costing them. This is why you should consider leaving out your video backgrounds, if only for mobile themes, as well as eliminate videos which play automatically.

10. Responsive Design and Style

Part of keeping your videos accessible to all your users is making sure that they’re responsive on screens of different sizes from browsers to mobile devices. This can be easily achieved with a responsive player, a video host or some CSS.

With these tips in mind, let’s look at how you can embed videos that are encoded across multiple devices and how to make your videos responsive for self-hosted videos.

Encoding Your Videos for Multiple Devices

As Josh has mentioned, it’s easy to forget that self-hosted videos require you to encode them yourself since it’s not done automatically, such as with the many video hosting options out there. Browsers and mobile devices often have different requirements when it comes to the video compression methods that are able to be displayed.

Before we dive into the code you can customize to display your videos properly across multiple devices and browsers, let’s take a look at which compression methods work best for the different options out there.

Here’s an overview of the top browsers and mobile devices, and the types of best supported video compression:

Browser

Supported Codec

Since Version…

Alternate for Older Browsers

Google Chrome

MP4, WebM

4.0, 6.0

N/A

Firefox

MP4, WebM

2.1, 4.0

FLV

Internet Explorer

MP4

9.0

FLV

Safari

MP4

3.2

MOV, AVI

iOS

MP4

3.2

N/A

Android

MP4

2.1

N/A

Opera logo

WebM

10.6

OGV

Once you upload your videos to your WordPress site, you can use the video shortcode to display them on a post or page. You can also add parameters so certain video files play depending on the device your visitors use to view the page.

Here’s what the shortcode looks like with a single video attached:

To use this shortcode, you would just need to change myvideo.mp4 to the source video in your media library. You can even type in a URL to an external source if you still want to use the WordPress video player without self-hosting your videos.

To add alternate video file options to play on different devices, this is the shortcode with the parameters included that you would use:

You don’t need to spend a lot of time to define the different devices you want to support. Just enter in your video file source just like the previous example, while also including the correct file type.

Once your visitor starts loading the page, WordPress detects what file type the visitor’s device supports and automatically loads that video file on the page based on that shortcode. Pretty cool, don’t you think?

For example, if you wanted to add a flash (.flv) video to the list, you would enter a space after the last parameter, then add flv="myvideo.flv" and save the page or post. Don’t forget to change myvideo.flv to your actual video file listed in your media library or URL to the external source.

The file types you can use with the video shortcode are: .MP4, .M4v, .WEBM, .OGV, .WMV, .FLV

There are also other options you could include other than the source file.

Adding any of the options below before or after src in the above examples adds different functionalities to the WordPress player.

  • poster – Adds a specific feature image to the video player. By default, this is set to none.
  • loop – Adds the functionality of automatically replaying the video on a loop. To do this, set it to “on” instead of its default setting which is “off.”
  • autoplay – If set to “on,” your video can autoplay when the page loads. By default, this setting is set to “off” which is also our recommendation to remain fully accessible to the hearing and visually impaired.
  • preload – Sets the data that’s loaded automatically. The default is “metadata” which loads only the video’s metadata, but you could choose “auto” to load everything or “none” to not load the video at all.
  • height – If you want to display a different height of the video other than the default size of the uploaded video.
  • width – You can also change the width in the same way if you want a different size than the original source video in your media library.

If you’re a developer and want to experiment with the code for this shortcode, you can find it in the media.php file under the wp-includes folder.

Once you have added your custom video shortcode and saved your changes, you’re all ready to go. That’s all you need to do to ensure your videos play across devices and browsers. Really, that’s it!

Displaying Responsive Videos in WordPress

With Google’s new algorithm, your search ranking can tank quickly if your site isn’t fully responsive. Google also doesn’t consider sites that need you to scroll horizontally to be responsive.

Videos can be a huge offender for this if you’re not careful so it’s important to test out your site to make sure it works well in both desktop browsers as well as mobile ones.

Luckily, if you use the default WordPress player, your videos should be fully responsive. If you use one of the top video hosting services to display your videos, you’re likely good to go as well.

This can sometimes be a problem if you are using an untested player or an iframe to display your videos. If you choose to use a different player, make sure to thoroughly test it out for responsiveness.

If you decide to display your videos with an iframe, it’s important to add some extra code to ensure its responsiveness. It’s important to remember that many video hosts such as YouTube and Vimeo give you the option to embed your videos with an iframe.

The first step to ensuring your iframes are responsive for your videos is to download a copy of the FluidVids.js script by Todd Motto on GitHub.

Next, upload a copy to your media library, then head over to your WordPress files. On each page file you use for your particular theme – or at least the type of page where you want to display videos. For example, you can add this script to your /wp-content/themes/your-theme/page.php file to be able to display responsive videos embeded with iframes on your WordPress pages.

Edit the file and call the script toward the top of the page, after all the initial page notes.

You can call the script like this:

Save your file and that’s all you need to do. This isn’t necessarily the best solution since your videos aren’t guaranteed to look great.

It can also be a problem if your visitor’s browser fails to load the script. This is why using a player or embed option you know is fully responsive is often the safest option.

The Top Hosted Video Options

If you have decided to host your videos outside of your server, there are many options to consider. I put some of the top video hosting services to the test and thoroughly checked out every nook and cranny from their hosting capabilities to customer service.

Check back tomorrow for our full reviews of Wistia, Vimeo, YouTube, Dailymotion, Sproutvideo and Vidyard.

Summary

We have explored the ins and outs of adding videos to your WordPress site, whether you decide to self-host your videos or use a video hosting service.

To learn interesting ways to integrate video into your site check out some of our other posts: Using Appointments + to Setup and Streamline Client Consultations, How to Add a Video Background to Your WordPress Site in 4 Easy Steps and Best WordPress Video Chat Plugins – Based on Your Needs.

Do you use video on your site? Hosted or self-hosted? We’d love to hear about your experiences using video with WordPress in the comments below.

Related posts:

  1. Best WordPress Video Chat Plugins – Based on Your Needs There are many amazing video chat plugins for WordPress, but…
  2. How to Add a Video Background to Your WordPress Site in 4 Easy Steps Looking for a way to jazz up your site without…
  3. Using Appointments + to Setup and Streamline Client Consultations If you’re a freelancer or run a business that provides…

Sponsor: imgix — Real-time Image Resizing as a Service

Go to Source

Looking to take advantage of the srcset attribute or <picture> element, but don’t want to store the different versions of each image? Looking to apply blurs to images that don’t peg the browser? imgix can help.

imgix is a real-time image resizing service and CDN. Resize, crop, and process images simply by changing their URLs. Mix and match over 90 URL parameters for unlimited different ways to process images.

It’s free to sign up, and every new account gets $10 in credit. Don’t let engineering constraints affect your design decisions.

Direct Link to ArticlePermalink


Sponsor: imgix — Real-time Image Resizing as a Service is a post from CSS-Tricks

Go to Source

How We Designed And Built Our First Apple Watch App

Go to Source


  

One sunny morning in the summer of 2014, I was sitting in a café having just finished an hour-long call with my remote team. Scheduling that call had been a messy exercise: we live in different time zones and it was hard to find a time that worked for everyone. I wanted to make dealing with time zone differences less painful.

How We Designed And Built Our First Apple Watch App

I had some free time on my hands, so I pulled my notebook out and started playing around with an iWatch app idea. Yeah, you read that right — 2014 and iWatch, before a watch had ever been announced.

The post How We Designed And Built Our First Apple Watch App appeared first on Smashing Magazine.

Go to Source

Animated SVG Image Slider

Go to Source
animated-svg-image-slider

A simple, responsive carousel with animated SVG paths used as transition effects.

Last week we’ve been experimenting with SVG paths to animate the content of a full-page hero slider. Today we use the same technique to create a responsive carousel. This time, though, we used SVG paths to directly clip the slide images, with no need to show an intermediate layer.

Images: Unsplash

Creating the structure

The HTML structure is composed by an unordered list (ul.cd-slider), containing the slides, and two additional list elements ( ul.cd-slider-navigation and ol.cd-slider-controls) for the slider navigations.

Each list item inside the ul.cd-slider is composed by an svg containing a <clipPath> element (used to change the clipping area of the slide image) and an <image> element (whose clip-path url attribute is the <clipPath> id).

<div class="cd-slider-wrapper">
	<ul class="cd-slider" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z">
		<li class="visible">
			<div class="cd-svg-wrapper">
				<svg viewBox="0 0 1400 800">
                    <title>Aimated SVG</title>
					<defs>
						<clipPath id="cd-image-1">
							<path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/>
						</clipPath>
					</defs>
					
					<image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
				</svg>
			</div> <!-- .cd-svg-wrapper -->
		</li>

		<li>
			<div class="cd-svg-wrapper">
				<svg viewBox="0 0 1400 800">
					<!-- svg content here -->
				</svg>
			</div> <!-- .cd-svg-wrapper -->
		</li>

		<!-- other list items here -->
		
	</ul> <!-- .cd-slider -->

	<ul class="cd-slider-navigation">
		<li><a href="#0" class="next-slide">Next</a></li>
		<li><a href="#0" class="prev-slide">Prev</a></li>
	</ul> <!-- .cd-slider-navigation -->

	<ol class="cd-slider-controls">
		<li class="selected"><a href="#0"><em>Item 1</em></a></li>
		<li><a href="#0"><em>Item 2</em></a></li>
		<!-- other list items here -->
	</ol> <!-- .cd-slider-controls -->
</div> <!-- .cd-slider-wrapper -->

Adding style

The slider structure is quite basic: all slides have an opacity: 0, are in absolute position and are placed one on top of the other (top: 0 and left:0). The .visible class is added to the selected slide (at the end of the clipping animation) to make it visible, while the .is-animating class is added to the list item during the clipping animation (z-index: 3 so that it is over the li.visible item).

Note: we had to use the Padding Hack to make the svg responsive (IE assumes svg height to be 150px if you don’t explicitly define it). Basically, we set the div.cd-svg-wrapper height to 0 and its padding-bottom to 57.15% (to preserve svg proportion, in our case 800/1400), and set the svg height and width to 100%.

.cd-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.cd-slider > li.visible {
  position: relative;
  z-index: 2;
  opacity: 1;
}
.cd-slider > li.is-animating {
  z-index: 3;
  opacity: 1;
}
.cd-slider .cd-svg-wrapper {
  /* using padding Hack to fix bug on IE - svg height not properly calculated */
  height: 0;
  padding-bottom: 57.15%;
}
.cd-slider svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Events handling

To animate the slide image clipping area, we animated the 'd' attribute of the <path> element inside the <clipPath>.
First of all, we had to define the different steps of our animation: we used the same process described in the Animated SVG Hero Slider article (Events handling section); but in this case, we needed only 6 steps (3 steps to animate from a slide to the next one and 3 more steps to animate from a slide to the previous one).

Once defined the paths, we added to the .cd-slider a data-stepn attribute (one for each step) equal to the 'd' attribute of the defined path (to easily retrieve it with JavaScript).

We then used the animate() method provided by Snap.svg to animate the path element.

clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){
	clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){
		oldSlide.removeClass('visible');
		newSlide.addClass('visible').removeClass('is-animating');
	});
});

Besides, we implemented a basic slider for the image gallery (with keyboard and touch swipe navigation, previous/next and dots navigation).
Go to Source

27 Productivity Tips and Hacks Every Slack User Should Know

Go to source

Did you know most people only use 10% of Slack?

While it’s marketed as “a messaging app for teams,” it’s so much more than that. Of course, the idea behind Slack is that it saves you time and increases your productivity. But if you’re using it, you probably don’t have a whole lot of time to spend learning how to use it.

These simple tips will help you discover Slack’s hidden features.

Here's what the WordPress Slack account looks like.
Here’s what the WordPress Slack account looks like.
  • 1. Keyboard Shortcuts

    shortcuts

      Keyboard shortcuts are undoubtedly one of the fastest ways to speed up using a piece of software. Slack is no exception.

      You can replace <ctrl> with <⌘> if you’re using Mac OS in the following list of the best few.

      • Pull up Quick Switch to jump between or search for multiple channels and people using 
      • See all your Recent Menus using  + + 
      • Set a message as unread using 
      • Reuse your most recent command input using
      • Switch channels using  + <←> and + <→> (<⌘> + <[> and <⌘> + <]> on Mac)
      • Display keyboard shortcuts using  + </>

      You might also want to take a look at the additional options available to turn certain shortcuts on in your Slack menu at Preferences > Advanced Options > Other Options. You can, for instance, make  +  bring up Slack’s search box rather than your browser’s.

      If you want to find any more, there’s a helpful guide to Slack keyboard shortcuts on its ZenDesk Knowledge Base. To bring up the keyboard shortcuts screen, type /keys in any channel.

    • 2. Integrate Google Drive

      Integrate with Google Drive?

        One thing that makes Slack really great is how well it works with a huge number of other tools, integrating to bring your workflow into one place.

        Google Drive is used by many people and organizations for file sharing and collaborative editing, so Slack helpfully enables files to be integrated into its channels and messages.

        To connect, simply paste a link to a Google Drive file and Slackbot will give you options to connect – permanently, or as a one-off. Permissions can be revoked at any time if necessary, but this particular integration is an incredibly useful one for anyone already using Google’s advanced file collaboration tools.

        Alternatively, you can connect under the Configure Integrations menu.

      • 3. Triggers: Highlight Words and Slackbot Responses

        highlight

          There are two particularly useful features in Slack that act as a result of certain triggers.

          The first is highlight words. You can find it in your Slack menu under You > Preferences > Notifications > Highlight Words. By default, you’ll be sent a sound notification when someone submits your Slack username. Using Highlight Words means you can choose to be notified when any other word is mentioned too. If you have an interest in a company blog, for example, you could ask Slack to notify you whenever someone writes the words “post” or “blog”. It means you’ll always be kept up to date on any discussions pertinent to your role.

          As a Slack Team Administrator, you can also set up Slackbot to deliver useful information when someone types certain key phrases. This works similarly to the default response when typing “help” in a private chat with Slackbot, which triggers the following:

          Hi [username]. I can help you with many different parts of Slack. For example, things like files, channels, search, starring, mobile, or keyboard shortcuts. You can click on those terms or type “/help” followed by any term you want help with (e.g., “/help files” or “/help search”). Or, if you just want to tell us what you think about Slack, you can type “/feedback” followed by whatever you’d like to say to the team at Slack.

          You can configure additional phrases under Team Settings > Customize > Slackbot Responses. One idea might be to send a reminder to remain focused on work when someone mentions the phrases “Facebook” or “YouTube” – if you think that might be something that occasionally slips your team members’ minds!

        • 4. Text Formatting Shortcuts

          formatting

            Slack has a variety of different ways to format the writing you submit using a number of symbols in the text.

            Here are the ways you can use them to make your messages clearer.

            • To make content bold, place *asterisks around it*.
            • To italicize content, place _underscores around it_.
            • To format content as code, place `backticks around it`.
            • To make content preformatted, place ```three backticks around it```.
            • To quote content, place a less than sign (<) in front of it.

            Hint: If you can’t remember these, type the format you want and a guide will appear on the right beneath your message box.

          • 5. Starred Chats and Channels

            starred-channels

              Although it’s easy to star messages to save them for later, it’s not particularly obvious that specific direct message and channel streams can be starred, placing them in a handy favorites-style list at the top of the sidebar.

              To make the most of this feature, simply hover over the name of the direct message / channel when viewing it (in the top left) and a star will appear. Click it, and you’ll have selected it as a starred stream.

              Do bear in mind that starring a stream will remove it from the ordinary menu on the Slack sidebar; it’s sometimes easy to forget and get confused about where it has disappeared to!

              You can view all individually bookmarked items by clicking the star icon in the top right-hand corner of each screen. It’s a handy tool, making things easier to find for future reference.

            • 6. Reminder Tools

              reminders

                Reminders are a pretty important feature of Slack so you’ll probably have discovered how to set them quite quickly – by typing /remind me [at/in] [some time] to [do something] into any stream for slackbot.

                There are a few less obvious /remind features too, and these make reminders much easier to manage.

                Firstly, you can ask for a list of all your pending reminders with /remind list. Slackbot will show you what it will remind you of and when, also listing the ID of the reminder.

                In case you suddenly realize you don’t care about getting coffee for your colleague (or whatever else you’ve ill-advisedly reminded yourself to do in the future), the ID provided on the list can also be used to remove a reminder. Just type /remind cancel [id] to avoid being bothered for it.

              • 7. Slack Apps

                slack-apps

                  Slack has apps available for a variety of platforms, desktop (except Linux – sorry) and mobile (a Windows Phone version is on the way).

                  On mobile, this brings the obvious advantage of keeping users connected more easily than a browser might be able to. It’s clearly useful to keep in touch if the team is communicating online through Slack all the time, regardless of the device. The apps actually have similar functionality to the browser version, they just work better on mobile.

                  Using the desktop version of Slack (as opposed to the browser version) is useful particularly if you’re part of multiple Slack teams as it enables you to be logged into, and switch between, all of them very rapidly. They will also deliver notifications if your browser doesn’t already. Speaking of desktop notifications…

                • 8. Desktop Notifications

                  notifications

                    If you do choose to use the desktop version, you should definitely enable Slack’s Desktop Notifications under You > Preferences > Notifications > Desktop Notifications.

                    These will send you clickable messages to draw your attention to any mentions or highlighted words so that, whatever you’re doing, you’ll be kept up to date with what’s happening on your organization’s Slack.

                    You may need to grant special permissions for your browser to display them – in case you’re concerned,  be assured that it’s perfectly safe to do so.

                  • 9. Earn Credits

                    Password Set - Credits Offer

                      Despite even its most expensive, most feature-rich plan costing only $12.50 per user per month (at the time of writing), Slack offers some fairly generous opportunities to earn credits, thus save money on bills.

                      Some will be given to you without extra input on your part – for instance, some credits may be rewarded when a new user account is added to your Slack team – while other opportunities may be offered. $50 off billing for a quick survey is quite significant, especially for any teams on the smaller side. It’s well worth taking up these opportunities.

                    • 10. Google Calendar Integration

                      Stack's Google Calendar Integration Options

                        A relatively new feature, Google Calendar integration looks set to be one of the most useful features in Slack (if you use Google Calendar, of course). While Slack is great for personal reminders, it doesn’t coordinate team reminders at the moment, but Google Calendar fulfils that need.

                        Integrating Google Calendar opens up a number of options, mostly posting reminders to specific channels. Slack themselves suggest departmental channels and reminders or, sweetly, using it to send happy birthday wishes to employees automatically – others can then, of course, join in with their personalized ones.

                        To integrate Slack with any or all of your calendars, go to Configure Integrations, select the Google Calendar option and follow the easy steps. As with Drive, it can be un-integrated again if necessary – but that probably won’t be likely, given how useful it’s bound to be.

                      • 11. There’s a /shrug Shortcut

                        slack-shrug

                          Because let’s be honest, why would you not want to append ¯\_(ツ)_/¯ to, like, every message?

                          You’re welcome.

                        • 12. Add Your Own Custom Emojis

                          custom-slack-emoji

                            Head across to Customize > Emoji to add your own custom emojis. This can be a fun thing to do, obviously, but more pertinently you can add a set of custom symbols to enable quick image responses to messages.

                            Add a tick icon to show a task is complete or develop a whole set of quick-reference images to send through the emoji system. Team communication has never been so slick!

                          • 13. React to Messages With Emoticons

                            respond

                              Especially useful if combined with customized emojis, the add a reaction tool can be useful to show a quick acknowledgement or actioned response.

                              For instance, different colored circles could be used to mark progress on a task posted; each user can react to each message as many times as they like, so progress can be seen quickly and visually.

                            • 14. Change Your Team URL

                              slack-url

                                For obvious reasons, this is not something you’re going to want to be doing the whole time, but it’s good to know that if you ever need to, it’s incredibly easy to move your whole Slack to a new subdomain.

                                Simply head across to Team Settings > Change Team Name where you will also be able to alter the URL.

                              • 15. Advanced Search

                                slack-search-modifiers

                                  There’s no need to despair if you haven’t starred an important message. If you can remember any detail like when, to whom or where it was sent, you can narrow down your search using Slack’s search modifiers.

                                  Search parameters include:

                                  • from:[username]
                                  • to:[channel or username]
                                  • in:[channel or username]
                                  • after:[date]
                                  • before:[date]
                                  • on:[date]
                                  • during:[month/year]
                                  • has:[star]

                                • 15. Skype Integration

                                  slack-app-team-directory

                                    In case you don’t get enough chance to communicate with Slack, your colleagues can add Skype to their Slack profiles, and you’ll be able to call them. Just open up the Team Directory from within Slack and it’ll display their role within the organization and Skype details.

                                  • 16. Track Logins

                                    slack-logins

                                      In the unlikely and unfortunate event that someone gains unauthorized access to your Slack account, you can see exactly how and where they accessed it.

                                      Under Account & Profile > Access Logs, you can find a comprehensive list of when and how your account has been accessed. Although you can’t see it in the photo above (I removed it for obvious reasons), you can also see the IP address of the user – meaning you should know roughly where anyone who shouldn’t have been in your account came from.

                                    • 17. Email Integration

                                      slack-email-integration

                                        Although Slack should reduce the amount of email your staff are sending intra-organization, chances are you might well still need to be dealing with a ton of email. Lots of handy alerts on other services come via email too.

                                        Slack’s email integration enables emails to be redirected into Slack channels. It suggests:

                                        • A website form that posts queries to a #support channel.
                                        • Signing up to alerts (eg. weather warnings) that post to local staff members’ channels, or #general if you all work in the same location.

                                        If there are any particularly interesting blogs or other feeds to which one subscribes (hint, hint), a channel could also be created to collate alerts for those. You can also tag members who might be interested in the content, and can function as good conversation starters for team collaboration and innovation.

                                      • 18. Generate Colors

                                        slack-swatch

                                          Typing in any hexadecimal (hex) code into Slack will create a little color swatch next to it.

                                          One use might be visualizing color palettes very rapidly for designers, but there are plenty of ways to use this trick effectively – not least making messages a little prettier.

                                          The only slightly disappointing thing is that all six characters must be used for it to work – #ffffff will work while #fff doesn’t render the box. Worth bearing in mind when using it.

                                        • 19. Sign Out Everywhere

                                          sign-out

                                            While it’s always advisable not to lose your devices when they’re logged in, Slack, like WordPress, gives you the option to log out of all other sessions. Just head across to Account & Profile > Settings > Sign out all other sessions.

                                          • 20. Create, Refine and Share Notes and Code

                                            slack-snippets

                                              Slack’s Files system enables you to create different notes and code snippets in a variety of languages. The editor changes depending on language to format well, making it as good a browser-based text editor as you could hope to find.

                                              What’s more, it’s easy to share the code you’ve been working on to receive comments and feedback from within the Slack system. That said, you can keep snippets private in your own little sandbox for as long as you like.

                                            • 21. Grab Everyone’s Attention!

                                              everyone

                                                If there’s a time where you want to talk to absolutely everyone in your team, you can use the @everyone tag to send a notification to everyone person.

                                                @channel and @group can be used to notify everyone within a channel or group respectively, in a similar way. Meanwhile, @here will notify everyone who’s online (and using a desktop).

                                              • 22. Manage Permissions

                                                slack-permissions

                                                  In case you’re one of the embittered cynics who can foresee the ability to distract every single team member from their work with @everyone as open for potential misuse, Slack provides customizable restrictions on who can use such features.

                                                  Jump across to Team Settings > Permissions > Messaging Restrictions to change the permissions.

                                                • 23. /remove users

                                                  remove-slack-user

                                                    If you’ve got someone spending a little too much time in the #random channel (or need to take them out of a channel for some other reason), you can discreetly make it happen with the /remove command. Simply add their username and it will appear as if they’ve left the channel.

                                                    To the avid gamers among you, never fear: /kick [username] has the same effect.

                                                  • 24. Pin Files to Channels

                                                    slack-channel-file-pinned

                                                      If you’ve got a particularly important file – say a proposal document in a channel working on a particular job – you can pin it and it’ll appear in the Channel Info, making it easily accessible even if it was shared a while before.

                                                      Simply find the file, choose More Actions and choose “Pin to #channel”. You can un-pin it at any time.

                                                    • 25. Ask for a Username Format

                                                      slack-username-policy (1)

                                                        Should you want your usernames to all be in a specific format, you can set instructions to ask users to format them in a specific way when they choose them.

                                                        Go to Team Settings > Settings > Username Policy to set up a custom message. You can alternatively reset it to the default advice (shown below) if you’ve previously set it, by removing your custom message.

                                                        Most people choose to use their first name, last name, nickname or some combination of those with initials.

                                                      • 26. Allow Signups From Your Domain

                                                        slack-domain-signup

                                                          By default, Slack will only allow new users into your Team once you’ve sent them an invitation. If you’ve got a large team and you’ve already gone to the trouble of giving them their own email addresses, that’s a time-consuming task. Luckily, Slack enables you to permit any signups from a specific domain or domains.

                                                          This means that you save time on adding your internal team, but you can still send out invitations to anyone else who might not have their own company email address.

                                                        • 27. Slack Support Is Awesome

                                                          slack-support

                                                            Slack has an awesome support team: if you ever have any questions or problems, you shouldn’t hesitate to go straight to them. They’re ultra-responsive and very friendly; even taking the time to write them a message will probably get your question answered quicker than if you try to figure it out yourself because they’re so fast.

                                                            If you want to get help (they have a knowledge base to check first, too) or give feedback, you merely need to utilise the lifesaving ring icon in the top-right of the Slack control panel.

                                                          One More Tip for the Road

                                                          A less useful, but also enjoyable feature can be found deep within the Slack menu options. Venture to You > Preferences > Advanced Options then scroll to the final “Surprise me” option. I won’t give any spoilers about what it does, but it’s quite funny.

                                                          And one final fun tip – always be polite! Thanking Slackbot for its help should give you a lovely little response. Always nice to end a conversation like that…even if it’s with a robot.

                                                          What Slack hacks do you use to be more productive? Leave your tips in the comments below.

                                                          Related posts:

                                                          1. Improve the WordPress Visual Editor With These Cool Hacks WordPress 3.9 will feature the updated TinyMCE version 4 in…
                                                          2. How to Become a WordPress Professional – and Tips Based on Experience How do you go about becoming a WordPress professional? How…
                                                          3. 14 Tips for Making the WordPress Admin Client-Proof (So They Don’t Break Their Site!) Sometimes the sign of a good developer is an ability…

                                                          Styling a Server-Generated File Directory

                                                          Go to Source

                                                          The following is a guest post by Keith Knittel. Keith used a tutorial on this site to build his own customized file directory. I was like, hey, that oughta be a better-explained tutorial on this site. So here we are.

                                                          You likely know that if there is an “index.html” file in a directory on a server, it’s like to serve that file if the URL matches that directory. Like:

                                                          httpdocs
                                                            - my_folder
                                                              - index.html
                                                              - cool_mountain.jpg

                                                          So if you went to:

                                                          http://thatwebsite.com/my_folder/

                                                          It would render `index.html`. But what if `index.html` (or the like) was missing? You can configure that behavior. You can configure it to deny access to that directory. Or you can allow it and have it spit out a browseable file directory (sort of like FTP).

                                                          That can be useful. Just upload files and they immediately appear, no code changes. But a bit boring.

                                                          Ethan Marcotte’s bukk.it is a classic example of a default directory.

                                                          They all look the same: an unstyled, sortable list. To build a directory that looks a little better, we’re going to use:

                                                          • sortable.js
                                                          • a line of code in our HTAccess
                                                          • a little bit of PHP
                                                          • and of course, some CSS

                                                          We’ll also use an easy way to “hide” certain files in our directory to keep them from showing up in our final file list. For context, here is a demo.

                                                          Preflight Check

                                                          First we’ll make sure the server is configured to show hidden files. We’ll be using file names like `.index.php` (Note the “.” at the start of the file name). An operating system-specific Google search will likely find you an answer. We’ll be using hidden files to make this work, so we’ll need to be able to see them to work with them. Having them be hidden means they ultimately won’t show up in the directory listing, which is generally preferable.

                                                          .htaccess

                                                          In our `.htaccess file`, we would could use Options +Indexes to display a directory, but we want to use a hidden index file so we can build our own page. We’ll use this instead to define the exact file we want to be responsible for displaying the file directory:

                                                          DirectoryIndex .index.php

                                                          It would be a good idea to add error redirects, but for the sake of this quick tutorial we’ll only add a 404. Aside: You can add any page in your directory in place of “.index.php” or “.404-error.php” and it will load that page. Neat.

                                                          ErrorDocument 404 .404-error.php

                                                          .index.php

                                                          Our `.index.php` file links up some assets. For instance, a script and a stylesheet. Even a favicon, if you’d like. All these files will start with a `.` so they don’t show up in the directory listing. Stuff in the head will be like:

                                                          <link rel="shortcut icon" href=".favicon.ico">
                                                          <link rel="stylesheet" href=".style.css">
                                                          <script src=".sorttable.js"></script>

                                                          A <table> element is a fair choice for a list of files and metadata, so we’ll go for that. That’s what sortable.js is for, anyway. Sortable is such an easy library to use, we just have the class of sortable on the table and it works. And here’s the basic PHP that reads all the files, loops through them, and outputs what is needed:

                                                          <table class="sortable">
                                                            <thead>
                                                              <tr>
                                                                <th>Filename</th>
                                                                <th>Type</th>
                                                                <th>Size <small>(bytes)</small></th>
                                                                <th>Date Modified</th>
                                                              </tr>
                                                            </thead>
                                                            <tbody>
                                                            <?php
                                                              // Opens directory
                                                              $myDirectory=opendir(".");
                                                          
                                                              // Gets each entry
                                                              while($entryName=readdir($myDirectory)) {
                                                                $dirArray[]=$entryName;
                                                              }
                                                          
                                                              // Finds extensions of files
                                                              function findexts($filename) {
                                                                $filename=strtolower($filename);
                                                                $exts=split("[/\\.]", $filename);
                                                                $n=count($exts)-1;
                                                                $exts=$exts[$n];
                                                                return $exts;
                                                              }
                                                          
                                                              // Closes directory
                                                              closedir($myDirectory);
                                                          
                                                              // Counts elements in array
                                                              $indexCount=count($dirArray);
                                                          
                                                              // Sorts files
                                                              sort($dirArray);
                                                          
                                                              // Loops through the array of files
                                                              for($index=0; $index < $indexCount; $index++) {
                                                          
                                                                // Gets File Names
                                                                $name=$dirArray[$index];
                                                                $namehref=$dirArray[$index];
                                                          
                                                                // Gets Extensions
                                                                $extn=findexts($dirArray[$index]);
                                                          
                                                                // Gets file size
                                                                $size=number_format(filesize($dirArray[$index]));
                                                          
                                                                // Gets Date Modified Data
                                                                $modtime=date("M j Y g:i A", filemtime($dirArray[$index]));
                                                                $timekey=date("YmdHis", filemtime($dirArray[$index]));
                                                          
                                                                // Print 'em
                                                                print("
                                                                <tr class='$class'>
                                                                  <td><a href='./$namehref'>$name</a></td>
                                                                  <td><a href='./$namehref'>$extn</a></td>
                                                                  <td><a href='./$namehref'>$size</a></td>
                                                                  <td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
                                                                </tr>");
                                                              }
                                                            ?>
                                                            </tbody>
                                                          </table>

                                                          This is a simplified version. There is a more robust one here that cleans up file extensions, directories, hidden files, and more.

                                                          CSS

                                                          To style our directory, we can do whatever we like in our (hidden) `.style.css`. We could apply custom fancy icons like:

                                                          /* images */
                                                          table tr td:first-of-type a[href$=".jpg"],
                                                          table tr td:first-of-type a[href$=".png"],
                                                          table tr td:first-of-type a[href$=".gif"],
                                                          table tr td:first-of-type a[href$=".svg"],
                                                          table tr td:first-of-type a[href$=".jpeg"] {
                                                            background-image: url(./.images/image.png);
                                                          }

                                                          You can do any styling you like! There is a collection of table designs over on CodePen.

                                                          The End

                                                          The beauty of this setup is it’s really easy to upload non-sensitive files and share them as fast as you can refresh the page and send a link. If for some reason you wish to revert to the default unstyled directory, you can simply go to the htaccess file and replace DirectoryIndex .index.php with Options +Indexes and your back to the default directory.

                                                          Demo

                                                          There is a demo right here on this site. I also used this exact technique to build a fun image directory of my own: asecrettoeverybody.com


                                                          Styling a Server-Generated File Directory is a post from CSS-Tricks

                                                          Go to Source

                                                          “probably doesn’t do what you think it does”

                                                          Go to Source

                                                          An interesting post about the odd behaviour of querySelectorAll where it’ll match elements that you might not expect at first glance:

                                                          I think this API is surprising, and the front end engineers I’ve asked seem to agree with me. This is, however, not a bug; it’s definitely how the spec claims it should work, and how it works in Firefox, Chrome and Safari.

                                                          Direct Link to ArticlePermalink


                                                          “probably doesn’t do what you think it does” is a post from CSS-Tricks

                                                          Go to Source

                                                          BEMIT: Taking the BEM Naming Convention a Step Further

                                                          Go to Source

                                                          Harry Roberts takes a look back at his previous post on abstracting classes and expands on the idea by using the @ symbol:

                                                          The @ is a human readable and logical way of denoting conditional states. It allows developers to learn about any potential permutations or appearances that the piece of UI in question might have, just at a glance.

                                                          For instance, instead of making a class such as .is-hidden--large (where an element is only hidden on large breakpoints) we’d write .is-hidden@large instead. It might look a little strange but I think this could be very useful for scanning a lot of markup and quickly getting an idea as to what styles will always be applied and those that will only be applied in certain circumstances.

                                                          Direct Link to ArticlePermalink


                                                          BEMIT: Taking the BEM Naming Convention a Step Further is a post from CSS-Tricks

                                                          Go to Source