Metadata-as-API with Macula Data Sources

When building media-rich apps or websites, we often need to add some kind of textual information, such as date, photo parameters, or camera information. One way of doing this is by directly grabbing the metadata from images with a package like exif-js. Depending on the complexity of your UI, this can work just fine, but things can quickly get unruly, especially if you have a lot of metadata to process.

Just how easier life would be if there was a way to get a nice JSON with all of the information about the image and use it however you want... Wait, there is such a way! It’s called Macula Data Sources. Let’s dive right in and learn some spells to make you a real Data Sourcerer! (Pun very much intended.)

Table of Contents

• Macula.Link - A brief introduction
• Programmatic access to metadata with Data Sources
• Data Sources applications
• Data Sources in practice
  • Binary Data Source
  • JSON Data Source
• Bottom line

Macula.Link - A brief introduction

In this post, we will be talking about a feature specific to the product we’re building, Macula.Link. Macula is a digital asset manager for creators and developers who value their freedom and want to share on their terms. It gathers a ton of tools under one roof, allowing you to have a one-stop shop for managing and sharing media.

Macula is simple on the surface but packs quite a punch tech-wise! You can take a technical deep dive in our documentation.

Programmatic access to metadata with Data Sources

When someone requests a file you published, Macula needs to understand how to respond. Data Sources are a smart mechanism that solves this task. They enable on-the-fly processing and delivery of the original file and its metadata.

Data Sources automatically determine the file format and how to serve it depending on the request. For example, when adding a slash symbol (/) to the end of the URL, you get a UniLink Preview page. Request the file by its ID without additional parameters and you get it as-is. When you add URL parameters, Data Sources will process the file before serving it.

There are two Data Sources you can access with any UniLink (with more to come later):

• Binary Data Source is used by default when no extension is specified. It delivers the file to the consumer directly, be it your browser, app, or a website. You use Binary Data Source whenever you need to get and use the file.
• JSON Data Source returns information about the file in JSON format without delivering the file itself. JSON Data Source includes not only the original file metadata but also Macula-specific information, such as your profile links and information, allowing you to go a step further when presenting your works.

Data Sources applications

It's pretty obvious why you would use a Binary Data Source (to get the file, duh!), but what about JSON? Let's look at a few examples where JSON Data Sources can be used:

• Media-rich websites. Not having to process the metadata of each file directly translates into a more maintainable, clean, and performant website. Data Source acts as an endpoint, which you can fetch and then process a response using capabilities of your programming language.
• App assets. Data Sources can serve any file format, from SVG to PDF to HTML. This can work perfectly as a simple and easy CDN for the assets in your web, mobile, or desktop app.
• Audio and video streaming. Knowing such parameters as quality, dimensions, or size in advance allows you to respond and provide the visitor with relevant options (for example, a video quality switch, a playback seek slider, etc.).
• Copyright attribution and licensing. Both Binary and JSON Data Sources include copyright information. This makes copyright and licensing details available to search engines and web crawlers, giving you an additional layer of protection and an SEO boost too!

Data Sources in practice

Finally, some action! Grab your magic hat, roll up your sleeves, and let's do some data magic! Working with Data Sources in Macula is extremely simple, which makes them a versatile tool for many possible applications.

Binary Data Source

Whenever you need to use an actual file, simply paste the UniLink without the slash symbol or any extension. If you wanted to embed an image into a web page, you would simply do this:

<img src="<https://u.macula.link/FILE_ID>" alt="My awesome image"/>

It’s also possible to retrieve the bytes directly with wget or curl and pipe them into other programs, building up multi-step workflows for any of your needs.

JSON Data Source

When using JSON Data Sources, you can think of them as API endpoints for your files. The data you get can then be modified and used in any context.

With curl or wget:

curl <https://u.macula.link/FILE_ID.json>
wget <https://u.macula.link/FILE_ID.json>

With fetch in JavaScript:

fetch("<https://u.macula.link/FILE_ID.json>")
        .then((response) => response.json())
        .then((result) => console.log(result))
        .catch((error) => console.log("error", error));

Here’s a published image for you to experiment: https://u.macula.link/pKF2KWNHRwGVkeK8riYtcQ-7.json . The simplest way to try it out right now is just copy pasting into your browser tab!

Here’s a quick example of requesting the data about an image and displaying it on a webpage with plain JavaScript:

<div>
    <h1 id="image-name"></h1>
    <p id="image-license"></p>
    <script>
      fetch("https://u.macula.link/FILE_ID.json")
        .then((response) => response.json())
        .then((result) => {
          document.getElementById("image-name").textContent = result.info.title;
          document.getElementById("image-license").textContent = result.info.license;
        })
        .catch((error) => console.log("error", error));
    </script>
  </div>

You can do the same in any framework or programming language!

Bottom line

That’s it for our Data Sourcery 101 class, hope you had fun! As you can already see by now, such a simple concept has a ton of practical potential when it comes to building apps and web sites. Do you already have some cool ideas how to apply it? Let us know in the comments!

If you like what you’ve read, consider giving us a follow to get more content like this! Questions, ideas, or suggestions? You can reach out to us on Discord, X, or via email hey macula.link.

To see what’s already in the works, you can always check Macula feature roadmap. That’s also where the functionality requests and suggestions we get from you will appear.