I saw a Pen by Adem ilter the other day of a classy, simple photo grid with expanding photos.

In the HTML, there was markup like this:

  <a class="photo-zoom" href="Moscow_025.jpg">
  <img src="Moscow_025.jpg" alt="" />
</a>

Nothing wrong there... but on CodePen that image src is certainly going to 404. But they weren't. Digging in just a little, I discovered that Adem had set the <base> tag in the "Stuff for <head>" section in the HTML settings area.

  <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3561/">

The <base> tag:

specifies the base URL to use for all relative URLs contained within a document.

according to MDN.

When you use the Asset Hosting feature on CodePen, all your images get file paths like that. For instance:

  https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/200x200.jpg

So by setting the href of the <base> tag as Adem did, the relative URL's of those srcs were automatically adjusted correctly. Clever clever.

Usually it's just a copy and paste job, so no big deal, but it certainly is a nice touch to clean up the HTML for readability sake.


6,988 9 84