Friday, February 19th

I love Subtle Patterns. But testing them out on your website takes forever!

So here is a way to preview those beautiful backdrops instantly.

Note: I will show you how this was done with a PHP-based website, but the concepts will still work for you. In fact, if I ever find a way to link in to the Subtle Patterns repository on GitHub, maybe I can make a Chrome Extension or something. But anyways...


Step One: Load the Patterns onto Your Server

  • Download them here https://github.com/subtlepatterns/SubtlePatterns
  • Upload them to a public directory

Step Two: Create a Select Element

<select id="pickBg">
    <option value="white">Default</option>
</select>

Step Three: Create a Directory Listing of the Patterns

In PHP

 $patternPaths = glob("subtle-patterns/*.png");

Step Four: Create a Loop to Output Your Options

In PHP

Note: $config->urls->templates is specific to the ProcessWire framework. All you need to do is put the path to your Subtle Patterns folder.

 foreach ($patternPaths as $path) {  $patternPath = $config->urls->templates . $path;  $patternName = substr($path, 16, -4);  echo "<option value='$patternPath'>$patternName</option>";  } 

You'll note that I used the substr() function to make the names cleaner. All this did was take off the path name and .PNG extention.

By now our HTML looks like this:

 Select Background: <select id="pickBg">  <option value="white">Default</option>  <?php 
$patternPaths = glob("subtle-patterns/*.png"); 
foreach ($patternPaths as $path) { 
$patternPath = $config->urls->templates . $path; 
$patternName = substr($path, 16, -4); 
echo "<option value='$patternPath'>$patternName</option>"; 
} ?> 
</select>

Step Five: Set Up A Little CSS

#top-bar {
  width:100%;
  position:fixed;
  top:0;
  z-index:400;
  background-color:black;
  color:white;
}

Step Six: Set Up Your JavaScript

Note: I am still learning JavaScript and JQuery, so there may be a neater way to put this. Feel free to comment below and tell me! Also, don't forget to always wrap JQuery in a $(document).ready(function().

 $("#pickBg").change(function() { 
path = this.value; 
document.getElementById("body").style.background = "url('" + path + "')"; 
}); 

And that's it! 

 

Subscribe

Subscribe