Skip navigation

A list of better placeholders for your web & print projects

Originally appeared at https://alt-web.com/TUTORIALS/?id=no-more-boring-placeholders

 

Behold! The ubiquitous gray placeholder image.  It's not very exciting to be sure but it serves the intended purpose of reserving layout space for future image insertion.

From PlaceHolder.com

 

What if you're craving more from your work in progress but you don't want to waste precious project time creating custom placeholders in a variety of sizes? Well look no further my friends.  Below are some very nice and a few zany alternatives you can use.  Simply copy & paste the sample code with your width & height values.  Best of all, these placeholder images are hosted on secure HTTPS servers so when previewing your work to clients  you need not worry about mixing secure and non-secure content.

Not Secure Browser warning about mixed content

 

For purposes of this demo I used the same width & height (300/200) throughout. You will get different image results based on your width & height values. Some sites offer other interesting options too such as colors, filters and much, much more...   So let's get started with better placeholders.

 

SUBJECTSAMPLE CODEWEBSITE
Dummy Image Generator

 

<img src="https://dummyimage.com/300x200" alt="placeholder">

 

Use hex codes for background & foreground colors:
https://dummyimage.com/300x200/13518f/ffffff

Add custom text:
https://dummyimage.com/300x200/13518f/ffffff&text=Custom+Text

DummyImage.com
Animals

 

 

<img src="https://placeimg.com/300/200/animals" alt="placeholder">

 

Filter: /sepia or /gray
https://placeimg.com/300/200/animals/sepia
https://placeimg.com/300/200/animals/gray

PlaceIMG.com
Architecture

 

 

<img src="https://placeimg.com/300/200/arch" alt="placeholder">

 

Filter: /sepia or /gray
https://placeimg.com/300/200/arch/sepia
https://placeimg.com/300/200/arch/gray

PlaceIMG.com
Nature

 

 

<img src="https://placeimg.com/300/200/nature" alt="placeholder">

 

Filter: /sepia or /gray
https://placeimg.com/300/200/nature/sepia
https://placeimg.com/300/200/nature/gray

PlaceIMG.com
People

 

 

<img src="https://placeimg.com/300/200/people" alt="placeholder">

 

Filter: /sepia or /gray
https://placeimg.com/300/200/people/sepia
https://placeimg.com/300/200/people/gray

PlaceIMG.com
Technology

 

 

<img src="https://placeimg.com/300/200/tech" alt="placeholder">

 

Filter: /sepia or /gray
https://placeimg.com/300/200/tech/sepia
https://placeimg.com/300/200/tech/gray

PlaceIMG.com
Various (1000 + images)

 

<img src="https://unsplash.it/300/200" alt="placeholder">

 

Gray: https://unsplash.it/g/300/200
Random: https://unsplash.it/300/200?random
Blurred: https://unsplash.it/300/200?blur
Specific Image Number: https://unsplash.it/300/200?=299

UnSplash.it
Bill Murray

 

 

<img src="https://www.fillmurray.com/300/200" alt="placholder">

 

Gray: https://www.fillmurray.com/g/300/200

FillMurray.com
Nicholas Cage

 

 

<img src="https://placecage.com/300/200" alt="placholder">

 

Gray: https://placecage.com/g/300/200

 

Crazy: https://placecage.com/c/300/200

PlaceCage.com
Steven Segal

 

 

<img src="https://stevensegallery.com/300/200" alt="placholder">

 

Gray: https://stevensegallery.com/g/300/200

StevenSegallery.com
Bears

 

 

<img src="https://www.placebear.com/300/200" alt="placeholder">

 

Gray: https://www.placebear.com/g/300/200

PlaceBear.com
Zombies

 

 

<img src="https://placezombie.com/300x200" alt="placholder">

 

Gray: https://placezombie.com/g/300x200

 

Maximum size: 1000x1000

PlaceZombie.com
Bacon

 

 

<img src="https://baconmockup.com/300/200" alt="placeholder">

BaconMockup.com

 

Before anyone gets upset with me for NOT mentioning Placekitten.com or Lorempixel.com among others, I intentionally left them off this list because their images are not securely hosted on HTTPS servers. When and if that changes I'll happily revise this article to include them.

So there you have it folks.  A rich assortment of secure placeholders for all your web & print projects.  Enjoy!

 


By Nancy O'Shea, ACP / Web Developer
Web Site: https://alt-web.com

This article originally appeared on http://alt-web.com/TUTORIALS/?id=add_google_to_bootstrap_search_bar

Start with a Bootstrap document and the default (light) or inverse (dark) navbar. Your navbar code should look something like this:

 

<nav class="navbar navbar-inverse" role="navigation">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">XYZ Company</a></div>

<!-- add menu items-->

<div class="collapse navbar-collapse" id="navbar1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Services</a></li></ul>

<!-- ADD SEARCH FORM HERE -->

<form class="navbar-form navbar-right" role="search">

<div class="input-group">

<input type="text" class="form-control" placeholder="Search">

<span class="input-group-btn">

<button type="submit" class="btn btn-default">

<span class="glyphicon glyphicon-search"></span>

</button>

</span>

</div>

</form>

</div>

</div>

</nav>

 

How do I make my search bar functional?

Generic search forms in templates are just for show. They don't actually DO anything until you connect them to a bonafide search engine — either a scripted one of your own making or a 3rd party service.

 

Assuming your site is not dynamically driven with server-side code and content stored in a database, building your own search engine is out of the question. Static HTML sites must rely on 3rd party search engine software or services like Google.

NOTE: For best results, your site must be fully indexed by Google. It often takes 3-4 weeks or more for Google to find and fully index new websites.

 

How can I get Google to index my new website sooner?

You can help escalate the process by creating an XML Sitemap and uploading it to your server's root folder. Then submit the sitemap URL to Google through your Google Webmaster Tools Account. Full site indexing still requires several days or weeks. So be patient.

 

Google Search Code:

<script>
//GOOGLE SEARCH
//Enter domain of site to search
var domainroot="example.com"
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form class="search" action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<input name="q" type="hidden" />
<input name="qfront" type="search" required class="searchField" placeholder="Google Site Search" maxlength="50"/>
<input type="submit" class="search-button" value="SEARCH" />
</form>

 

On line 4 above, change the domainroot="example.com" to your website's actual domain (i.e. www.yourdomain.com or yourdomain.com). Use whichever produces the best results on Google. If unsure, open your browser and type site:www.yourdomain.com in the address bar. Hit Enter/Return/Go. If you don't see any results, try it without the www prefix.

 

By now you're probably asking yourself "How do I combine Google's code with what I already have?"

It's simple.  Starting on line 19 of the Bootstrap navbar code, add Google's <script> above the form tag. Make other substitutions as shown below.

 

<!-- ADD SEARCH FORM HERE -->

<script>
//GOOGLE SEARCH
//Enter domain of site to search.
var domainroot="example.com"
function Gsitesearch(curobj){ curobj.q.value="site:"+domainroot+" "+curobj.qfront.value }
</script>
<form class="search navbar-form navbar-right" action="http://www.google.com/search" method="get"role="search" onSubmit="Gsitesearch(this)">
<div class="input-group"> <input name="q" type="hidden" />
<input class="form-control" name="qfront" type="search" required class="searchField" placeholder="Google Site Search" maxlength="50"/>
<span class="input-group-btn"> <button type="submit" class="search-button btn btn-primary">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</nav>

 

And there you have it. A working Search Bar made with Bootstrap and Google’s powerful search engine. Hope you enjoyed this brief tutorial.

 

By Nancy O'Shea, ACP / Web Developer
Web Site: http://alt-web.com

 

Original Article on http://alt-web.com/TUTORIALS/?id=highlight_icons

The beauty of font based icons is that you can style them exactly as you would any other font with CSS color, size, borders, gradients, shadows, transitions...  Font icons re-scale nicely in responsive layouts. And unlike images, font icons have a very small footprint which means you can use a lot of them for social media and web based applications without slowing down your web pages.  If you're new to font icons, take a few minutes to get familiar with them at the links below.

 

Glyphicons - apple, ban-circle, map-marker:

Glyphicons-screenshot.jpg

Font Awesome - apple, ban, map-marker:

Fontawesome-screenshot.jpg

 

HTML:

To get started, add Glyphicons and Font Awesome links to your document's <head> tag.

NOTE: Glyphicons are included in Bootstrap CSS version 3x but not in version 4.

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

 

Notice the slight syntax difference. Glyphicons are wrapped in <span> tags while Font Awesome icons are wrapped in <i> tags.

 

<h3>Glyphicons:</h3> 
<ul class="list-inline"> 
     <li><span class="glyphicon glyphicon-apple"></span></li> 
     <li><span class="glyphicon glyphicon-ban-circle"></span></li> 
     <li><span class="glyphicon glyphicon-map-marker"></span></li>
</ul> 

<h3>Font Awesome Icons:</h3> 
<ul class="list-inline"> 
     <li><i class="fa fa-apple"></i></li> 
     <li><i class="fa fa-ban"></i></li> 
     <li><i class="fa fa-map-marker"></i></li> 
</ul>


 

Dreamweaver Screenshots:

 

Applying multiple classes to a <span> tag:

 

Applying multiple classes to an <i> tag:

 

CSS:

Add the following CSS code to your custom stylesheet.  Feel free to experiment with different values.

 

.glyphicon {
     padding: 2%;
     color: rgba(255,255,255,1.0);
     font-size: 156px;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     text-shadow: -1px 1px 2px #333;
     cursor:pointer;
}

.glyphicon:hover, 
.glyphicon:active, 
.glyphicon:focus {text-shadow: 2px 3px 15px blue;}

.fa {
     padding: 2%;
     color: rgba(255,255,255,1.0);
     font-size: 156px;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     text-shadow: -1px 1px 2px #333;
     cursor:pointer;
}

.fa:hover,
.fa:active,
.fa:focus {text-shadow: 2px 3px 15px blue;}




 

And there you have it. Hope you enjoyed this brief demonstration with font icons. 

 

By Nancy O'Shea, ACP / Web Developer

Web Site: http://alt-web.com