Display Thumbnail Of Website Using Shortcode

What is Thumbnail Images ?

A fingernail image could be a tiny graphics file. These pictures square measure created from normal size pictures and square measure used on webpages. the little size permits net surfers fast access to webpage content. Dial-up users would realize retail searching nearly not possible if it weren’t for the utilization of fingernail pictures, and surfriding pages with multiple pictures would merely take too long.

In several cases, fingernail pictures square measure clickable, inflicting a bigger image to load at the user’s discretion. This makes webpages easy, saving the bather from having to transfer massive image files that he or she doesn’t want or need to visualize. With a page of smaller pictures, the user will click on solely those pictures of interest. Webpages square measure written in machine-readable text terminology (HTML). net browsers translate this text-based hypertext markup language code into the graphical show seen as webpages. In most cases, making a fingernail image with associate degree hypertext markup language editor isn\’t any a lot of sophisticated than selecting to insert a picture file into a webpage, then clicking on many dialog boxes to make the little image from the initial.

The fingernail image can even be resized inside the editor, and have custom “mouseover text” assigned  to that. If so, alittle text box can appear once a bather runs the mouse pointer over the image.

Have you ever been about mShots service provide by wordpress.com. This service provide you to get snapshots of any website. If you don’t know about mShots ,you can go to wordpress.org and search with mShots. Today I am going to show you how to create a shortcode in order to display a snapshot of a specific website.

Display Thumbnail Of Website Using Shortcode

When pictures area unit created victimization AN hypertext mark-up language editor, the software system can produce the smaller file from the larger file, victimization identical file format. for instance, if the initial file could be a .jpg file, the fingernail are a far smaller .jpg file. If the initial could be a .gif file, the fingernail also will be a .gif file. The hypertext mark-up language editor can insert the new produced little image into the webpage and provides the user a option to create a link to the initial, larger image. this may build the fingernail clickable.

While many of us UN agency surf the net area unit change from slower dial-up accounts to quicker Digital connection (DSL) and cable web Service suppliers (ISPs), thumbnails still save surfers valuable time. They additionally enable webmasters to suit additional content on a webpage, minimizing the necessity for scrolling. on-line retail storefronts and auction sites build frequent use of fingernail pictures to indicate their wares. Art galleries, personal picture galleries, news hubs, and social hubs all use these little pictures yet.

Now look how you can display thumbnail of website .

display thumbnail of website

The first step is to make the shortcode. To do so, merely paste the code below into functions.php .

function wpr_snap($atts, $content = null) {


                          "snap" => 'http://s.wordpress.com/mshots/v1/',

                          "url" => 'http://www.catswhocode.com',

                          "alt" => 'My image',

                          "w" => '400', // width

                          "h" => '300' // height

        ), $atts));
         $img = '<img src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '"/>';
        return $img;
add_shortcode("snap", "wpr_snap");

Once done, you’ll be able to use the snap shortcode, as shown within the following example:

[snap url="http://www.catswhocode.com" alt="My description" w="400" h="300"]

This will show   of Cats Who Code.   If you relish this ,share it along with your friends.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.