Unsplash Credit Badge Diet

Unsplash Credit Badge Diet

Objective

Reduce the footprint of the credit badges code provided by Unsplah to ease the creation of attribution lists.

Context

Have you ever visited the Unsplash site? I like fotography very much and I enjoy having nice pictures on my blog. Unsplash is one of my prefered sources...

Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

Let's be fair: the fotographs who publish their pictures on unsplash do deserve some gratitude - at least in form of a proper attribution! Hence I wanted to list all the Unsplash pictures I do display on my pages and add the correct references.

Great: Unsplash is providing us with some ready-to-use code snippets to generate according mentions (see below). It best suits to display a few "credits". For a longer list of attributions, the format may not be really suitable, as it produce a lot of code repetitions. Just imagine a "Credits" page listing a large amount of picture references...  DRY Alarm!

Solution

At least, one can manage to reduce the "Don't Repeat Yourself" burden using the following two code snippets - while respecting the original corporate design:

a.unsplashbutton {
  background-color:black;
  color:white;
  text-decoration:none;
  padding:4px 6px;
  font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;
  font-size:12px;
  font-weight:bold;
  line-height:1.2;
  display:inline-block;
  border-radius:3px
}

.unsplashsvg {
  margin-left:3px;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  top:-2px;
  height:12px;
  width:12px;  
  background-repeat: no-repeat;  
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:white' viewBox='0 0 32 32'%3E%3Cpath d='M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z'%3E%3C/path%3E%3C/svg%3E");
}

.unsplashfotograph {
  display:inline-block;
  padding:2px 3px;
}
Styles for the Unsplash credit badge (~ 840 Bytes)
<a class="unsplashbutton" href="https://unsplash.com/@crew?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="High-resolution photos by The Unsplash Crew">
  <span class="unsplashsvg"></span>  
  <span class="unsplashfotograph">The Unsplash Crew</span>
</a>
The small footprint Unsplash credit bage (~ 350 Bytes per badge)

For comparison, the following is an example of the original credit badge:

<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@crew?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from The Unsplash Crew">
  <span style="display:inline-block;padding:2px 3px">
    <svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32">
      <title>unsplash-logo</title>
      <path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path>
    </svg>
  </span>
  <span style="display:inline-block;padding:2px 3px">The Unsplash Crew</span>
</a>
Original Unsplash credit badge code (~ 1 KBytes per badge)

Screenshot

Visual comparison of the two versions

Conclusion

  • The objective has been attained - as well as a DRY win!
  • The described solution can easily be integrated in existing pages, scripts etc.
  • Hence, I'll need to adjust the design of my Ghostination theme in order to ease the usage of those badges... tbc.

Addendum

Using Ghost, I'm able to integrate Unsplash pictures seamlessly into my blog articles: Ghost offers a function to use/paste a direkt link to the Unsplash API to provide the pictures in an appropriate format. The pictures are not saved in the blog in this case.

Though I personaly preffer to download local copies of the pictures from the Unsplash server first and then to upload those local versions into the blog.

There are at least 2 advantages in doing so:

  • The blog avoids a potential "privacy" issue due to a direct link to an external server, which can be tracked when a visitor is displaying one of the blog's pages.
  • I'll take the time to document the pictures I'm integrating in the blog and to credit the photographs appropriately.
Show Comments