Schlagwort-Archive: Wordpress

How To Create Custom Blocks for Gutenberg with Block Lab

Of all the amazing things the new block editor (aka Gutenberg) for WordPress can do, the ability to create custom blocks is right at the top of the list. This feature allows developers to tightly integrate their own content and layouts within the editor in a standardized way.

While we lose a little bit of flexibility in terms of what we can do with the edit screen, we gain a more consistent UI. This can be a big help when training clients to use WordPress. Plus, it just looks cleaner than the Classic editor.

Among all this great news is a bit of a catch: The default way to build a custom block requires that you wade knee-deep in JavaScript. Specifically, WordPress uses the React.js library to power this interface. It’s incredibly dynamic, yet features a fairly steep learning curve for those of us who primarily work with PHP.

The WordPress Toolbox
Unlimited Downloads: 500,000+ WordPress Themes, Plugins, Templates & Design Assets


But you can always rely on the WordPress community for creative solutions. Today, we’re going to look at one alternative that aims to simplify the block creation process (even taking JavaScript out of the equation). This helps to empower more developers to take part in Gutenberg’s killer feature.

Now, let’s see how it’s done!

Building with Block Lab

Block Lab is a free WordPress plugin that brings a familiar visual approach to building custom editor blocks. Most of the build process is done on a single page within the WordPress admin. The only time you’ll need to touch code is when creating a template for your new block.

Once you’ve installed and activated the plugin, visit Block Lab > Add New. From there, give your custom block a name, icon, category and keywords.

Filling out the initial details of a custom block.

Next, it’s time to create some custom fields. You have a fairly wide selection of field types to choose from, including text, URL, email, number and toggles. Plus, you can provide extras like instructions, default values and placeholder text. Be sure to note the Field Name of any custom fields you create, as you’ll need them later on.

Adding custom fields to a block.

Multiple custom fields can be added to a block, and there’s no hard limit. However, it’s worth noting that early versions of the plugin don’t offer more advanced field types, such as image uploads (although, you can provide the URL of an existing image) or WYSIWYG editors. Therefore, Block Labs is best suited for text-based data. That could change, though, as the plugin is in active development.

Once you’ve got everything set up the way you want it, save your custom block. Doing so will provide you with a custom path and file name where the plugin will look for your custom block template. It’s up to you to create the template file and save it to the correct place.

The path and file name for a block template.

Block templates can be as simple or as complex as you like. The only requirement is that you add a bit of PHP code for each custom field you created. This is where you’ll need the aforementioned Field Names.

As an added bonus, you can create what are called preview templates. This is a separate version of your custom block that you can tweak for display within the editor itself. Here, we’ll just stick to one universal template for our alert block:

<div class="alert"><?php block_field( 'alert-message' ); ?></div>

Now that our template is configured, it’s time to see it in action! We’ll head on over to the Pages area of WordPress and choose a page to edit. Inside the editor, the block is waiting for us:

Adding our custom block to a WordPress page.

Next, we’ll add an attention-grabbing message and save the page.

Editing our custom block on a page.

After having added some basic CSS to our theme’s stylesheet, our can’t-miss alert is now informing visitors of our situation.

Our custom block displaying on the front end.

Just like any other Gutenberg block, we can add our alert anywhere within any page or post we choose. This enables us to take full advantage of the editor’s flexible nature.

Custom Blocks, The Easy Way

As Gutenberg matures, developers will undoubtedly find more interesting things to do with custom blocks. We can only imagine some of the high-end functionality that will be built in the coming years.

However, there’s also something to be said for tools like Block Lab that bring custom block capabilities to a wider audience. Not everyone’s going to become a React expert. Therefore, the ability to quickly and painlessly create these more basic integrations with the editor are crucial for Gutenberg’s long-term success.

The post How To Create Custom Blocks for Gutenberg with Block Lab appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine


New Course: How to Use Custom Post Types in WordPress

Custom post types allow you to extend WordPress’s default post with data that is useful for your own website. Learn how to use them in our new short course, How to Use Custom Post Types in WordPress.

How to Use Custom Post Types in WordPress

What You’ll Learn

In this short course of just seven videos with a total viewing time of 39 minutes, Rachel McCollin will show you how to create your own custom post types and display them in single and archive pages in WordPress. 

You’ll learn how to code a plugin that creates a project category and how to display those projects on your main blog, mixed in with normal posts. You’ll also learn how to create a template file to render individual files and a template for displaying a project archive page. 

By the end of this course, you’ll feel confident using custom post types in your next WordPress project.

Watch the Introduction



Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 830,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

from Envato Tuts+ Code – WordPress

Weekly News for Designers № 466

Tiny Details: A Look at Hamburger Menu Reveal Transitions – The details may be small, but they can really enhance the user experience.
Tiny Details: A Look at Hamburger Menu Reveal Transitions

Create a CSS Grid Image Gallery – Use the layout technique to build a gallery with special effects.
Create a CSS Grid Image Gallery

An 8-bit introduction to UX design – One designer’s journey in creating a video game.
An 8-bit introduction to UX design

HTML Canvas API Tutorial – A helpful guide for learning to use the Canvas API.
HTML Canvas API Tutorial

7 Plugins for Adding Structured Data to Your WordPress Website – Structured data can enhance your SEO and be a handy resource for users.
7 Plugins for Adding Structured Data to Your WordPress Website

Securing Your Site like It’s 1999 – Learning from the security mistakes of the early web.
Securing Your Site like It’s 1999

9 Trends and Ideas You’ll See, Hear and be a Part of in 2019 – A riveting look at what we’ll all be doing next year.
9 Trends and Ideas You'll See, Hear and be a Part of in 2019

Everything about CSS environment variables – How this new specification lets designers target specific environments.
Everything about CSS environment variables

Performing a Yearly Analysis of Your Design Business – Taking a quick look at the past year can help you plan for an even better future.
Performing a Yearly Analysis of Your Design Business

The Ultimate Guide to Kerning: How to Kern Font in Your Projects – Learn what kerning is and how to do it like a pro.
The Ultimate Guide to Kerning: How to Kern Font in Your Projects

Eight lessons from creating a design system – A designer shares his thoughts on building a design system over a six-month period.
Eight lessons from creating a design system

The State of UX in 2019 – A look at the trends that will shape the year ahead.
The State of UX in 2019

A look at CSS Resets in 2018 – Why CSS resets are still necessary in modern times.
A look at CSS Resets in 2018

Creating a “Passive Style Guide”: Reverse-Engineering a Style Guide from Scratch. – What happens when a company outgrows its style guide?
Creating a “Passive Style Guide”: Reverse-Engineering a Style Guide from Scratch

In Defense of Beautiful Design – Why beautiful design should consist of more than just looks.
In Defense of Beautiful Design

Welcome to Your Christmas Headquarters! – Everything Christmas, including free design resources and more.
Welcome to Your Christmas Headquarters!

Advent of Code – Count down the days ’til Christmas with a new programming puzzle posted daily.
Advent of Code

Follow Speckyboy on Twitter, Facebook or Google+ for a daily does of web design resources and freebies.

The post Weekly News for Designers № 466 appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

7 Plugins for Adding Structured Data to Your WordPress Website

Structured data (sometimes called “Schema” or “microdata”) has emerged as an important part of SEO strategy. Search engines are making use of this information to enhance listings and provide users with more immediate answers.

Even if you’re not 100% sure what structured data is, you’ve undoubtedly run across it in Google. For instance, a search for “Fantastic Beasts: The Crimes of Grindelwald” brings up a wealth of information. I can see where the movie is playing, its listing at IMDB and aggregate reviews. Much of this comes from structured data that is being pulled from multiple websites.

Example of structured data in Google search results.

But this goes beyond just finding the latest movie listings. Structured data can help almost any business, from restaurants to pet stores and everything in-between. Helpful info such as business hours, cafe menus and addresses are just a few examples of what can be mined. That’s really just the tip of the iceberg. To get a better sense of the types of data being used, check out’s website.

So, how do you get started? In general, structured data requires adding some attributes to your site’s HTML tags. But thanks to some terrific WordPress plugins, we don’t have to do this manually. Instead, the plugins below provide an easy way to add your website to this data powerhouse.

The WordPress Toolbox
Unlimited Downloads: 500,000+ WordPress Themes, Plugins, Templates & Design Assets



Schema will add valid markup to your WordPress website and supports a variety of data types. It’s a great option for publishers, as it will enhance articles, blog posts, multimedia content and author profiles. Need more? There are free extensions for marking up reviews and setting a default image.


Business Profile

Structured data spans a vast number of categories. But what if you just want to share basic business information? Business Profile will do exactly that, without all the extras you don’t need. Enter in your business name, hours, etc. and the plugin will generate a “Contact Card” widget that you can place anywhere via a shortcode. It’s an easy way to share your business info with search engines. Support for reviews can also be added via a free companion plugin.

Business Profile

WP SEO Structured Data Schema

For those who really want to micromanage their site, WP SEO Structured Data Schema offers options galore. An options panel will appear on individual pages and posts to let you tweak a plethora of items to your heart’s content. The available pro version ups the ante by auto-filling page/post data, support for custom post types and more data types.

WP SEO Structured Data Schema

Markup (JSON-LD)

Though a little light on documentation, Markup (JSON-LD) is a fairly straightforward plugin for adding structured data. Within its settings panel, you can choose from a number of different types of data (Article, Blog Post, Event, Local Business, Site Navigation – among others). Simply click on the data types you want, enable them and tweak settings. While there isn’t much in the way of plugin-specific info, each data type features some helpful links for further information.

Markup (JSON-LD)

Schema & Structured Data for WP & AMP

With Schema & Structured Data for WP & AMP, you have a comprehensive plugin that is both highly-tweakable and easy to use. For instance, you can conditionally display markup fields based on a number of criteria, such as post type. It’s also compatible with Google AMP, putting you into the good graces of the search behemoth.

Schema & Structured Data for WP & AMP

SCHEMA for Article

If you’re publishing blog posts or news articles, SCHEMA for Article offers perhaps the easiest way to add structured data markup. Install the plugin, activate it and the plugin does the rest. There are no options to configure as everything is taken care of automatically.

SCHEMA for Article

Schema App Structured Data

Schema App Structured Data is another great choice if you prefer something that doesn’t require a complicated setup. Once you activate the plugin and fill out a few basic details, all of your pages, posts, categories and more will be automatically marked up with compliant Schema. Optionally, you can also display breadcrumb navigation that will further enhance both your site and your SERP listing.

Schema App Structured Data

Enjoy the Benefits of Structured Data

Adding structured data markup to your website helps users get the information they need with less hassle. Instead of having to comb through your website to find business hours, they can simply ask Google. This is especially important as voice-based search becomes more prevalent.

Users no longer have to attempt the dangerous combination of typing and driving. Talking to whichever virtual assistant they’re using will provide the answers they’re looking for.

While there are certainly some concerns that users will bypass your site altogether, providing access to this data at least keeps your business in the game. If your competitors share structured data and you don’t, you could lose some potential customers. Plus, the fact that website navigation can be mined could be of some benefit as well.

In short, structured data is too important to ignore. Thankfully, the plugins above can help make the process quick and easy.

The post 7 Plugins for Adding Structured Data to Your WordPress Website appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

Weekly News for Designers № 465

Hue – A collection of free, hand-picked color palettes.

Peeking under the hood of redesigned Gmail – Looking at performance issues with Gmail’s new design.
Peeking under the hood of redesigned Gmail

Five Mistakes in Designing Mobile Push Notifications – In short: Treat users with respect.
Five Mistakes in Designing Mobile Push Notifications

How Many Issues Are Acceptable for Gutenberg’s Release? – A look at whether the new WordPress editor is “ready enough” for release.
How Many Issues Are Acceptable for Gutenberg’s Release?

Intention-based design – How will UI design tools evolve?
Intention-based design

How to Create an Amazing Email Signature – Tips for creating a standout signature.
How to Create an Amazing Email Signature

The Current State of Styling Scrollbars – Still tricky, custom scrollbar styling may be in for a brighter future.
The Current State of Styling Scrollbars

An Extensive Guide To Progressive Web Applications – A look at the pain points and technologies that promise to improve the web.
An Extensive Guide To Progressive Web Applications

Optician Sans – A free font based on good old eye charts.
Optician Sans

How to Design an Icon Set – A simple checklist for graphic designers.
How to Design an Icon Set

What’s the Difference Between Variable and Parametric Fonts? – Learn more about these newfangled font types.
What’s the Difference Between Variable and Parametric Fonts?

CSS Animation 101 – A free eBook combining theory and helpful lessons.
CSS Animation 101

Image Reveal Hover Effects – Techniques for revealing images in creative ways.
Image Reveal Hover Effects

CraSSh – An example of how poorly browsers handle CSS variables and calculations.

Getting Started With DOMmy.js – Create powerful CSS3 animations with this standalone JS library.
Getting Started With DOMmy.Js

The problem with invisible branding – The value of AI isn’t recognizable to consumers. Branding may be the answer.
The problem with invisible branding

The Free Christmas Pictogram Collection – 50 gorgeous vector icons to use with your holiday projects!
The Free Christmas Pictogram Collection

Follow Speckyboy on Twitter, Facebook or Google+ for a daily does of web design resources and freebies.

The post Weekly News for Designers № 465 appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

15 Best WordPress Audio Player and Video Player Plugins

There are so many creative ways to embed audio and video content in your website, once you step away from default players and explore custom plugin options.

Whether you are showcasing content that you created yourself—as a musician, podcaster, filmmaker, or YouTuber—or simply want to add music or video content to your website, you know that how you display your content is almost as important as the content itself. Do you want users to share and leave comments on your tracks? Would you like listeners to be able to buy songs while they enjoy your music? Are you looking for a player with live streaming capabilities? Just to name a few possibilities.

At CodeCanyon, there is a wide range of best selling WordPress audio and video player plugins. No matter what your vision for your audio or video content, there is a player plugin that will meet your needs. Keep reading to see some of the best WordPress audio and video plugins that CodeCanyon has to offer.

Best Selling WordPress Audio Players

1. ZoomSounds—WordPress Wave Audio Player with Playlist

ZoomSounds WordPress audio player demo

ZoomSounds is a retina-ready, fully responsive HTML5 WordPress audio player that supports self-hosted MP3, M4A, and WAV files, as well as MP3 Shoutcast radio stations. This plugin features nine editable CSS skins, so you can customize or simply choose a style that suits your brand. Curate how users experience your audio—this plugin has options for audio looping, user commenting, and playlist or single track downloads. Optimized for Apple and Android devices and built with search engine optimization in mind, this WordPress audio player plugin is compatible with all major browsers, so it will meet the needs of both you and your listeners.

User PickWard says:

“Our soundtrack site is performing beautifully with ZoomSounds. Very stable—both on desktop and on mobile—and have had zero end-user complaints. Really great plug-in, and I’ve tried a lot!”

2. MP3 Sticky Player WordPress Plugin

MP3 Sticky WordPress audio player demo

Create an uninterrupted audio playback experience for your website visitors with this WordPress audio player. Listeners can browse other websites while enjoying to your audio on a popup player that deploys in a separate window. Compatible with MP4 and YouTube videos, this mobile ready player runs on all major browsers. Features like HTTP live streaming, deep linking, share buttons, and Shoutcast and Icecast support create a complete WordPress media player that creates a dynamic AV experience for your audience.

User 5dportal says:

“This player plugin is the best MP3 player in the market, hands down.”

3. Responsive HTML5 Audio Player PRO WordPress Plugin

Responsive HTML5 WordPress audio player demo

This high performance WordPress audio player encourages listeners to interact with your content. With playlist search, lyrics integration, download, purchase, and social share capability, this WordPress audio plugin keeps listeners engaged. Integrate this player into your existing website design with fully customizable colour schemes. Mobile-compatible, responsive design ensures that your audio will reach your audience, every time.

User leonordl says:

“Great design and great, fast support! Definitely recommend it!“

4. Radio Player Shoutcast and Icecast WordPress Audio Plugin

Radio WordPress audio player demo

Stream radio content on your website with this WordPress audio plugin. Add a radio stream, and this plugin will automatically load the name, categories, current song, and artist photo of all MP3 audio streamed. Fully compatible with responsive websites, this plugin also allows you to disable responsive behaviour for integration into non-responsive sites, should you desire. With support for Shoutcast and Icecast and over 70 customization options, this is the only WordPress audio plugin you need for radio streaming.

User rfisher68 says:

“This product has been fantastic since the day I purchased it. The free radio players available on the net are nothing shy of a complete hassle. The customer service here is top notch. In fact, I purchased an additional player, that’s how impressed I was with the first one.”

5. tPlayer—WordPress Audio Player

tPlayer WordPress audio plugin demo

Create as many playlists as you want, each with an unlimited number of tracks, with this WordPress audio player. This plugin is a powerful and highly customizable audio player, with many unique front-end options—for example, you can let listeners enjoy an automatic “Top 10 songs of the week” playlist and consult song details and stats directly in the player, or add this player to any post or page as a widget. This WordPress audio plugin runs on all major browsers, is mobile-friendly, and can be installed in any WordPress theme.

User soulshakepower says:

“I found it really hard to find a decent audio player nowadays since it’s all about video. I’ve tested dozens of plugins but I’m glad I found tPlayer. It is trendy, has a lot of features, and most importantly it works great on all devices!”

6. Native HTML5 Radio Player WordPress Plugin

Native WordPress audio plugin demo

Weave cross platform radio streams into your website with this WordPress audio player. This plugin plays all MPEG and AAC audio streams using HTML5 live streaming technology. Mobile-ready for both iOS and Android, this fully responsive player features a streamlined design that works on all major browsers. Simple and straightforward to use, the audio player features “Now Playing” song information and displays album cover images with links to iTunes.

User danmason says:

“Stylish, simple to use, and very well designed player. Support was fast and helpful, too. This is an outstanding plugin worth every penny.”

7. Disk Audio Player for WordPress

WordPress audio plugin demo

This easy-to-use WordPress HTML5 audio player is customizable with multiple skins and unlimited colour options. Retina ready and mobile responsive, this audio plugin features keyboard control, external links to support purchases and downloads, track info, and playlists with an adjustable scrollbar. Configure your audio player easily with a drag-and-drop admin panel.

User TooCrazyMedia says:

“Really good player. Best support!”

8. WavePlayer—WordPress Audio Player With Waveform and Playlist

WavePlayer WordPress audio player demo

Host your own audio tracks and play them in this beautiful, modern WordPress audio player. This plugin’s interface is built around the waveform of the audio file that is playing, and it allows you to insert custom track information for your files. Ideal for music and podcast websites, this WordPress audio plugin is fully integrated with WooCommerce, and uses Font Awesome 5 for high quality icon design.

User herringla says:

“There are just too many good things about this plugin. Basically, if you’re using anything else to play your music files on your WordPress website you’re missing out!”

9. HTML5 Audio Player WordPress Plugin

HTML5 WordPress audio player screenshot

This mobile-compatible WordPress audio plugin can be used as a fully functional player, or to play background music on your WordPress site. This plugin features continuous playback and shuffle options, as well as the ability to automatically generate a playlist from a folder of .mp3 files. Insert multiple instances of this player into your website or a page and customize the design by changing the colour or hiding elements, to best complement your website.

User Paully says:

“The support I received regarding this plugin is fantastic. I would highly recommend any plugin from this developer. Thanks for your A-class service.”

Best Selling WordPress Video Players

1. WordPress Responsive YouTube Playlist Video Player

Responsive WordPress video player screenshot

Play YouTube content on your website using this fully responsive and intelligent resizing WordPress video plugin. Simply enter a YouTube playlist, channel, or single video ID as a source, and this plugin will run your video content smoothly on mobile and desktop devices. This WordPress video player has a fully-customizable CSS-built interface rather than the default YouTube player. With total control over play options, unlimited playlist length, and integrated social sharing features, this plugin is a full-service solution for your WordPress video player needs.

User Splash1 says:

“Great looking playlist, easy to use, and does exactly what I need. Great job!”

2. Elite Video Player—WordPress Plugin

Elite WordPress video player screenshot

This powerful WordPress video player supports the most popular video platforms and includes multiple advertising options. Truly versatile, you can play content from YouTube, Vimeo, self-hosted videos, Google drive, local videos, live streaming content, and more. This WordPress video plugin supports pre-, mid- and post-roll video and pop-up ads, so you have full control of the advertising potential of your content. Play videos from multiple sources in your playlists, track plays and advertising data using integrated Google Analytics, and expect seamless performance across platforms with this WordPress video player.

User davidmfraser says:

“Quite simply the best video player I have used in connection with WordPress, and I have tried several. Easy to set up and customize the player. Very simple and intuitive, even for those with not much of a tech background. Aesthetically, fantastic to look at. The support is very good, quick as well. Very happy—5 stars!”

3. Ultimate Video Player WordPress Plugin

Ultimate WordPress video player screenshot

Stream audio or video from a server, YouTube, or Vimeo with this WordPress video player. Features like responsive layouts and skins, multiple playlists, optional deep linking, and VR support enhance this video player’s functionality. This WordPress video plugin incorporates multiple video engines which allows it to work on mobile or desktop devices no matter which browser is used. This player includes advertising support and is integrated with both Google Analytics and Google AdSense, so you can make the most of your views.

User wollesen1 says:

“Elegant, seamless plugin with a lot of customizations available. I needed a responsive video player that would host local video, and also pause when clicking anywhere on the video, among other things. I’m very happy with this purchase.”

4. WordPress Vimeo YouTube Popup Plugin

Popup WordPress video plugin screenshot

Use this WordPress video player plugin to easily create popup videos on your website. Users can click any designated element on your site—image, link, or other elements—to play YouTube or Vimeo videos in a popup player. This WordPress video plugin includes shortcodes to make your job easy. This player is responsive to browser sizes, has a scrollspy so that your video is always visible in the browser, and supports autoplay, so you can be sure that your visitors will view your featured video content.

User wipeoutmedia says:

“Thank you for creating this awesome solution. I have been looking for something like this for a while now and am so happy to have found it. Five stars for quality!”

5. Video Player and Fullscreen Video Background

Fullscreen Video Background WordPress video plugin screenshot

Enhance your website with a full-screen video background using this WordPress video player. Responsive and mobile-friendly, this player supports YouTube, Vimeo and self-hosted video files, and can automatically pull video thumbnails, titles, and descriptions for YouTube content. Customize your player style and functionality with over 30 parameters, choose a fixed width or full width, or even add texture over your video images.

User sandasusin says:

“Great plugin and great (!!!) support.”

6. Facebook Live Video Auto Embed for WordPress

Facebook Live WordPress video plugin screenshot

Embed Facebook live streams to your WordPress site with this WordPress video plugin. Compliant with new Facebook data policies, this plugin detects if your Facebook account, page, or group is currently live and automatically embeds the video stream on your site. This video plugin features many customization options, including custom messages for website visitors during live streams and when offline. This WordPress video player is responsive out of the box, which allows to you easily embed your Facebook video content on your website for an effortless viewing experience.

User rmangram says:

“The support is awesome, especially when you have to keep your website accurate and up-to-date. They have been responsive, and the app works great and easy.”


Have these plugins given you some ideas for an audio or video player to enhance your website? I hope so. From popups to playlists, livestreams to fullscreen, and everything in between, these plugins have the potential to transform your website and keep visitors engaged. If you would like to explore more audio and video plugins, visit CodeCanyon to see more options.

from Envato Tuts+ Code – WordPress

Create a CSS Grid Image Gallery (With Blur Effect and Interaction Media Queries)

In this tutorial we’re going to take a bunch of ordinary thumbnail links and turn them into a responsive CSS grid gallery with a blurred hover effect. We’ll also use a great CSS trick to make sure touch screen users don’t miss out!

Here’s what we’ll be creating:

A Little Background

Recently, Rachel McCollin wrote a tutorial explaining how to add a gallery of thumbnail links in WordPress themes. 

The links act as navigation for child pages of whichever page the user is on (or whichever page you specify) and the resultant plugin outputs something a bit like this:

wordpress thumbnail links to child pages
Grab the plugin and theme files from the repo on Github

Using the markup generated by Rachel’s plugin, we’re going to do the following:

  • Arrange the thumbnails using CSS Grid, giving us a responsive gallery.
  • Create a hover effect using CSS filters and transitions.
  • Use a nifty CSS media query to make sure touch screen users can still see each thumbnail title, even without hovering.

1. Change the Markup (a Bit)

Let’s a have a quick look at the markup generated by Rachel’s code. When cleaned up it looks effectively like this:

We have a parent <div>, which holds an <h2> and a few <article> elements. When we’re using CSS Grid we first define a grid container. In this case we could use the parent <div>, but that would make each direct child–including the <h2>–a grid item, so we need to change things a little.

We’ll wrap all the <article> elements in another <div> (feel free to use whatever element you feel most suitable) which we’ll imaginatively give a class of grid-container. Use this starter pen as a basis.

2. Responsive CSS Grid, in Three Lines

With just a few rules we can turn our thumbnails into a grid:

The easy lines here are the display: grid; (which turns all direct children into grid items and lays them out) and the grid-gap: 1em; (which defines our gutters). 

The slight complexity comes from the value we’ve given to the grid-template-columns property, which defines our columns. You might normally expect to see something like repeat(3, 200px) which would give us three columns of 200px. In this case we’ve used the auto-fill keyword for repeat(), and then some values. This gives us as many columns with a minimum of 300px and maximum of 1fr as will fit in the grid container.

Resize your browser window and see how it behaves!

One last detail you’ll need to add:

This will make sure the images fill their containers properly (particularly necessary for use with Rachel’s demo, as we need to overwrite the inline width and height properties WordPress outputs).

3. Hover Effect

We’re going to use the titles as overlays for the thumbnails, revealing them on hover. We’ll also give the hovered images a red effect, and a slight blur to help readability of the overlaid text. 

Overlay the Title

To overlay the title we need to position it, so we’ll begin by making the article position: relative; and the title position: absolute;. We’ll also give it a red background and make it fill the available space:

Good start! 

thumbs step 1

There are one or two things to improve already, including that extra space at the bottom (the title is slightly larger than the thumbnail). This can be solved by removing any line-height on the image’s container:

Style the Title

Some typographic styles will improve the look of our title, and three lines of flexbox magic will align it centrally for us:

Much better:

Hide the Title

Now let’s hide the title by removing its opacity so that we can only see it on hover. A couple more rules underneath the ones we’ve already added to our .location-title should do it:

Here we also set a transition rule so that when we do bring the opacity back it will happen gradually (over the course of 0.5 seconds). Let’s bring it back now:

Great! Now our title appears again on hover:

title back on hover

Blurred Lines

We’ve created a great-looking hover effect already, but let’s take things a step further shall we? Let’s add a blur filter to the image too. We’ll begin by setting the blur filter on the normal state, in order to give us something to transition from. Then we’ll blur things by 2px for the hover state (make this number as extreme as you wish, but I think 2px gives us a great visual):

Here’s what that gives us:

A couple of things to note:

  1. The title has disappeared because the browser is now rendering the blurred graphic over the top of it.
  2. The blurred effect looks good, but it gives us a blurred edge too (we can do better than that).

Fixing the hidden title is as simple as adding z-index: 1; to the .location-title.

Fixing the blurred edge is a little more involved. To begin with we scale the image to make it a bit larger, then we set overflow: hidden; on the image container (.location-listing) so that when the larger image blurs its edges are effectively cropped. Here are the finished properties for the two elements in question:

The transform: scale(1.1); rule scales our image in all directions to 1.1 (where 1.0 would keep things exactly the same size). Here’s the much neater result:

no more blurred lines

4. The Problem With Touch Screens

So there we have it! A great-looking image grid with a blurred hover effect on each thumbnail. The only thing is that the titles are hidden to anyone who can’t hover over the images (a good number of tablets and smartphones don’t emulate hover with a prolonged “press”) which isn’t very accessible.

Fortunately, CSS has some very useful interaction media queries which can help us out (and they enjoy fairly decent browser support too). These queries will detect a browser’s input mechanism–the pointing device quality, the ability to hover, and some other special definitions–so we can fairly accurately determine if our thumbnails are being viewed on a touch screen device.

Take this media query for example (it does exactly what you might expect):

Within these curly braces we’d put any styles we want to apply to a browser which can’t handle :hover.  Let’s do that–we’ll state that for devices where hover is either impossible, or at least inconvenient, the thumbnail image will always be blurred and the title will always be visible:

Take a look:

Note: As mentioned, support for this is pretty reasonable, but discussions about the implementation of interaction media queries are still ongoing. There’s a good chance this spec will change, or have parts removed.


And we’re done! Thanks for following along, I hope you’ve learned one or two things and enjoyed playing around with CSS (who doesn’t enjoy that?). Here’s one more look at the final demo–enjoy adding it to the theme files created by Rachel in part one!

Further Reading

from Envato Tuts+ Code – WordPress