26. March 2015
by Morten Brunbjerg Bech

Free High Quality Stock Photo Resources

Old cameraAre you having trouble finding great imagery for your blog posts or design comps? I am. Especially, when my budget is close to zero. Fortunately, free stock photo resources are popping up all over the web these days. And a lot of them are featuring great quality.

Lately, I have been collecting a list of great stock photo resources, which I would like to share.

5 Tumblr Photo Blogs Worth Following

These photo blogs are stuffed with free high quality photography, which you are allowed to download and use in your own creations. Due to the chronological blog format of Tumblr, it may be a little hard to get an overview of the photos. Go to the archive of the blog to get an overview, that is much easier. You can find the archive by typing /archive after the URL in your browser.

Jay Mantri
Tumblr photo blog by Jay Mantri. Free pics. Do anything (CC0). Make magic. 7 new photos every thursday.

New Old Stock
Vintage photos from the public archives. Free of known copyright restrictions.

Royalty-free, high-quality, natural looking photos of people interacting with technology.

Startup Stock Photos
Take ’em, these things are free. Go. Make something.
Mostly business or technology themed pictures.

Free (do whatever you want) high-resolution photos. 10 new photos every 10 days. The quality here is super crisp!

9 photo resources in a blog or gallery format

Lots of quality here. Please be aware of the license, because it differs what you are allowed to do. These resources contain imagery that ranges from public domain to attribution demands. Also, please be aware of photos licensed under Creative Commons.

The best place to find & share beautiful images.

Designer Pics
FREE Hi-Res photos for your personal & commercial use. Attribution not required!

Free high resolution images, available for both personal and commercial projects. All photos are taken by Ryan McGuire and are completely free from copyright restrictions.

Life of Pix
Free public domain high resolution photos. No copyright. Images are available for both personal and commercial use.

Hand-picked free photos for your inspiration. Creative Commons og Public Domain fotos af Magdeleine Photos.

Totally free photos for your commercial & personal works

Public Domain Archive
Everything you need for your creative projects, all public domain images!

FREE handpicked stockphotos for your commercial and personal works. All available hi-res/hi-quality pictures you can use on personal and commercial projects.

Superfamous Studios
Folkert Gorter’s photos are available under the restrictions of a Creative Commons Attribution 3.0 license.

4 Search Engines

Locate the visual inspiration you need. Super fast! Search Engine for finding Creative Commons photos from Flickr.

Search Engine for finding Creative Commons photos, graphics and illustrations.

Free Photos for bloggers and creatives! Search Engine for finding Creative Commons photos from Flickr.

Search engine for finding Public Domain photos and illustrations.

If you have any great resources you think I should add to this list, please let me know in the comments.

9. September 2014
by Morten Brunbjerg Bech
1 Comment

7 Free Image Editors – and 5, You Can Use, Without Installing Anything

You are writing a new post for the web site and you need an image in a certain format – but your boss refuses to give you a license for Photoshop. Does that sound familiar? Here are 7 free alternative image editors, you can try out.

2 Image Editors For Your Computer


Paint.net logoPaint.NET was designed to be a better alternative to Paint, which was originally bundled with Windows. The app is somewhat simpler than Photoshop but it has a lot of the same features. It should be sufficient for lighter image editing tasks. Paint.net has been around for a long time but it is continuously being kept up to date.

The Gimp

The Gimp logoThe GIMP is an open source image editor for bitmap images. It runs on most platforms and operating systems, including Unix, Linux, Windows, and OS X. Actually, The Gimp has a lot of functionality, although the few times I have tried i out myself, I have found the user interface at bit clunky.

But The IT-Department Won’t Let You Install Anything?

Luckily, a lot of image editors run online in a browser.


Pixlr logoPixlr is a cloud based suite of photo editing tools, that include a full image editing app, a quick fix tool for correcting stuff such as red eyes and more, and an effect app for applying filters, frames, and effects to photos. Pixlr runs in the browser and also come as apps for tablets and smart phones.


PicMonkey logoPicMonkey is an online image editing service which can be used in a free ad-supported or a relatively cheap premium version. The user interface is very simple and easy to use, but is probably a bit too simple, if you need a little more advanced functionality.

Photo Raster

Photo Raster logoPhoto Raster is a relatively advanced online image editor. The user interface is familiar to anyone who has been working with Photoshop and thus very easy to get started with.

Sumo Paint

Sumo Paint logoSumo Paint is an online image editor with an equally familiar user interface. The app is relatively advanced but is intended for illustration more than photo editing. Sumo Paint runs in the browser.


FotoFlexer logoFotoFlexer is a flash based photo editor that runs in the browser. It has a very easy user interface which includes the most necessary functionality and a large variety of color filters and effects. This app is very easy to use, especially for beginners, and the user interface has been translated to a variety of languages.


If you are going to try out some of these tools, I would be very interested in knowing what you think and which is your favorite. If you happen to know of other free image editors that should belong to this list, please feel free to comment.


The easiest and the fastest way to create custom and high quality code for your WordPress project using the latest WordPress coding standards and API’s.

GenerateWP is a tool for WordPress developers. The tool makes it easy to create the code snippets you need for your theme or plugin, without having to write everything from the bottom. The output is easy to copy/paste.

Try out GenerateWP here

20. January 2014
by Morten Brunbjerg Bech

How To Add the TinyMCE Visual Editor To The Comment Form in WordPress

TinyMCE visual editor in the comment form in WordPress
Seriously, how many ordinary people do you think understand the mysterious HTML codes, which can be used in the comment form on your blog? In the default themes included in WordPress below the comment form, you will find a cryptic message like this:

You may use these HTML tags and attributes: <a href=”” title=””> <abbr title=””> <acronym title=””> <b> <blockquote cite=””> <cite> <code> <del datetime=””> <em> <i> <q cite=””> <strike> <strong>

If you want to provide your users some tools for formatting the content of their comments, why not give them a proper WYSIWYG editor? The one that is already built in to WordPress, namely TinyMCE, should be appropriate.

UPDATE April 26. 2014: Dariusz Lorek kindly made me aware of an update to the codebase of the TinyMCE integration with WordPress, which prevented this code snippet from working in the more recent versions. I have updated the snippet accordingly and now it works again. Thanks Dariusz!

Just copy and paste the following code snippet into the functions.php file in your theme:

add_filter( 'comment_form_field_comment', 'comment_editor' );

function comment_editor() {
	global $post;


	wp_editor( '', 'comment', array(
		'textarea_rows' => 15,
		'teeny' => true,
		'quicktags' => false,
		'media_buttons' => false
	) );

	$editor = ob_get_contents();


	//make sure comment media is attached to parent post
	$editor = str_replace( 'post_id=0', 'post_id='.get_the_ID(), $editor );

	return $editor;

// wp_editor doesn't work when clicking reply. Here is the fix.
add_action( 'wp_enqueue_scripts', '__THEME_PREFIX__scripts' );
function __THEME_PREFIX__scripts() {
add_filter( 'comment_reply_link', '__THEME_PREFIX__comment_reply_link' );
function __THEME_PREFIX__comment_reply_link($link) {
    return str_replace( 'onclick=', 'data-onclick=', $link );
add_action( 'wp_head', '__THEME_PREFIX__wp_head' );
function __THEME_PREFIX__wp_head() {
<script type="text/javascript">
			var args = $(this).data('onclick');
			args = args.replace(/.*\(|\)/gi, '').replace(/\"|\s+/g, '');
			args = args.split(',');
			tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'comment');
			addComment.moveForm.apply( addComment, args );
			tinymce.EditorManager.execCommand('mceAddEditor', true, 'comment');
<?php } ?>

Via | Translations: Danish

16. January 2014
by Morten Brunbjerg Bech

4 Outdated Web Features That Should Disappear

Mashable asked 12 entrepeneurs which web site features small businesses should avoid at all costs. It is not everything on this list I find equally relevant and some of it is obvious. But there are especially 4 web features I would seriously consider discarding in any upcoming web projects:

1. Image Carousels

Nr. 3 on Mashable’s list. This kind of content element has some serious usability- as well as performance issues. I discussed this in a previous post. Use them only if you know exactly what you are doing.

2. Large Hero Images

Nr. 4 on Mashable’s list. A lot of web sites feature a gigantic image in the header which partly pushes the real content way too far below the fold, partly is too heavy to download. I would suggest limiting the use of this kind of element.

3. Automated Pop-ups

Nr. 8 on Mashable’s list. Lately, it has become kind of a trend to put a modal overlay or pop-up on landing pages, prompting the user for signing up to newsletters. See also Brad Frost’s “Bullshit Overlays”. This kind of UI element just has to die.

4. M.dot Sites

Nr. 12 on Mashable’s list. A lot of web sites are redirecting mobile users to a special mobile version of their site, ususally starting with an m, for instance “m.facebook.com”. It is extremely annoying for a lot of users, especially if executed incorrectly, so users are directed away from where they originally landed. Go make a responsive web site instead.

Translations: Danish

Licecap Screendump
Did you ever wonder how to turn a piece of video into one of those gif animations, that seem to be everywhere these days? Here is an easy way. Download and install LICEcap.

LICEcap is a tiny tool which makes gif animations from any part of your screen. Besides from video gifs, it is very well suited for instructions or guides. There is an app for both Windows and Mac.

Download LICEcap here

14. January 2014
by Morten Brunbjerg Bech

Cookies at the Library

Actually, we do have cookies at the library

However, unfortunately not this sort:

By EU law, all Danish web sites have to be equipped with a big, ugly notification about the cookies they apply to the user’s computer.

At Horsens Public Library we are running WordPress, and until now, we have used the plugin Cookie Law Info. Well, it works, but it is not very beautiful and generally plugins do tend to add a lot of extra JavaScript, CSS and thereby more HTTP calls to the overall codebase of the site. This makes the web site slower and heavier for the user to download.

Could it be just a bit more discrete?

Cookie message on Horsensbibliotek.dk

That is why I chose a simple solution. Namely, to hardcode it into the theme, I already built for the web site. Of course, the message has to be visible but I would really like it to be a bit more discrete than what you usually see out there. You can have the code, if you want to.

Throw a bit of HTML into the footer of your site:

<div class="cookie-message">
	<p class="cookie-header">Cookies</p>
	<p class="cookie-content">This website uses cookies. You can manage or block these in the settings of your browser.</p>
	<p class="cookie-content"><button class="button">OK, thanks!</button> &nbsp; <a href="http://here-goes-your-page-about-cooki.es">Read more about cookies</a></p>	

Add a few lines to your JavaScript (you need jQuery):

$('.cookie-header').click(function() {
	$('.cookie-content button').click(function() {

Add this to your CSS:

.cookie-message {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  color: #ddd;
  padding: 1em 1em .5em;
  position: fixed;
  left: -5px;
  bottom: 2em;
  text-align: left;
.cookie-message p {
  font: normal 1em/1.5em Helvetica, Sans-serif;
  margin: 0 0 .5em 5px;
.cookie-message .cookie-header {
  font-size: 1.2em;
  cursor: pointer;
.cookie-message .cookie-content {
  display: none;
  width: 20em;
.cookie-message a {
  color: #fff;

See also my Codepen example with SASS.

Translations: Danish

Apple Devices Flat Design
If you are in need of some nice looking device mockups for showing off your design skills in your portfolio, Graphic Burger has a PSD with a huge collection of Apple devices. The PSD file includes mockups of iPhone, iPad, iMac og Macbook with different viewing angles in which you can easily paste in your work.

Download Flat Apple Devices MockUp on Graphic Burger

Coveloping is a collection of tools which makes life a bit easier for web developers. The collection includes code generators for CSS etc. as well as test and conversion tools.

Find the right tool for your web development here