How to Adapt Tumblr’s Exif Feature to Your Theme [UPDATED]

As you know Tumblr announced that Exif data of images now available.

We’re all able to see Exif information on dashboard if the specific data exist but how to show it on your blog?

This article is updated on March8-2012 for Scaffold and Effector theme. If you’re using another theme use comment box under the page.


Currently only basic data is visible as you see above, camera model, ISO, aperture, exposure and focal length values available. Maybe Tumblr add more in the future I don’t know, but I know Exif can hold much more additional data.

Before you start save your template’s HTML code to somewhere, if you have a customized theme with twitter follow button (etc.) at least keep original installation page of your theme in your bookmarks. Thing is if you screw things up you might wanna get back to old look and I don’t take responsibility.

I know this is already a lot reading for you already, we will see instructions for Other themes first and then specifically for Effector theme.

Here we go

SCAFFOLD Theme Users:

  1. Go to your dashboard
  2. Select your blog on top menu
  3. Click on Customize Appearance button on the right pane
  4. Now you’re on customisation page, click on EDIT HTML button
  5. You should be seeing your theme codes now
  6. Find:
    {PhotoURL-400}" alt="{PhotoAlt}" /></a></div>}
    (to do so CTRL+F on your keyboard and search it)

  7. Add this code right after what you just searched
    Copy/paste that:
    <div style="background-color:#FFFFFF;">{block:Exif}
    {block:Camera}
    Camera: {Camera} |
    {/block:Camera}

    {block:Aperture}
    Aperture: {Aperture} |
    {/block:Aperture}

    {block:Exposure}
    Exposure: {Exposure} |
    {/block:Exposure}

    {block:FocalLength}
    Focal Length: {FocalLength}<br />
    {/block:FocalLength}
    {/block:Exif}</div>
  8. It MUST look like this:
  9. Save and close, you’re done. You may need to play with CSS to customize the look.

Effector Theme Users:

  1. Follow the first 5 step mentioned above to get your theme codes on screen
  2. Find:
     <a class="photo-url" href="{PhotoURL-HighRes}">View Separately</a> 
     
  3. Add the code right after 2. step (careful there is </div> tag, put the code betwen </a> and </div>
    Copy/paste:
     <ul class="tag-list">
    {block:Exif}
    <li>
        {block:Camera}
            Camera: {Camera}
        {/block:Camera}
    </li>
    <li>
        {block:Aperture}
            Aperture: {Aperture}<br />
        {/block:Aperture}
    </li>
    <li>
        {block:Exposure}
            Exposure: {Exposure}<br />
        {/block:Exposure}
    </li>
    <li>
        {block:FocalLength}
            Focal Length: {FocalLength}<br />
        {/block:FocalLength}
    </li>
    {/block:Exif}
    </ul>
  4. Beware where we added it exactly:
  5. Final look:
    Congrats you’re done! Exif information will appear on image itself when you hover the mouse on it.

QUESTIONS?

  • I’m not a designer if you need help with your theme, use the comment box below.
  • If you encounter a problem let me know I will try to help as much as I can.
  • For Scaffold theme, instructions are not given for single column page view, if you use Scaffold with single page view add the given code after:
    {PhotoURL-500}” alt=”{PhotoAlt}”/></a></div>
    And remember Mike the designer of Scaffold may have better stuff in terms of customising CSS for Exifs’ look.
  • Remember Exif information appears only if such data exist in the image.
  • I haven’t tried it with Photo-sets, may come up with another post for that.

Good luck :)

17 notes

Show

  1. emrecnl posted this

Blog comments powered by Disqus