Easily creating image placeholders for a website mockup.

Found in categories: Design.

Easily creating image placeholders for a website mockup.

I read a post the other day explaining the process of creating websites from scratch, which concentrated mostly on the initial stages, from the initial client enquiry and request and obvious individual requirements they may have, to actually wire framing and finally to an HTML and CSS mock up in order to get client approval and naturally know you’re on the right track to continue.

The post was explaining mostly during the mock up stage, you may not have the images you’ll be using and suggested easily generating and altering placeholders for the images in the code itself. The ability is courtesy of fakeimg.pl and is very simple. Not only can you create an image, sized to your choosing, you’re also able to dictate the background colour (this must be declared in hexadecimal) and include some text on the image also. I suppose this would be good to describe proposed content and will give you a better idea of how the layout will eventually look.

Below is a simple example of the principle.

Say you want a 600X400 sized image with a black background and white text, displaying ‘Mikedeveloper’ all declared in the IMG tag, the code would simply be:


<img src="http://fakeimg.pl/600x400/000000/ffffff?text=Mikedeveloper"/>

And here’s how things look..

The only mandatory paramenter in the markup is the URL parameter, passed to image source: http://fakeimg.pl/. The size of the image comes next, then the colour and finally the text required, which is is produced by passing the text as a GET request as the above snippet illustrates.

It seems you also have a choice of Google fonts too. If you want to play around and use this feature and want to know more head over to fakeimg.pl and have a look.

Just a great code snippet you might not have known about but could very well find useful in your future projects.

Leave a Reply

Your email address will not be published. Required fields are marked *