Embed

Quick start

Paste this where the gallery should appear. The script tag goes in once per page, wherever you like.

<div data-c64gfx-embed data-source="artist:848" data-limit="8"></div>
<script src="https://c64gfx.com/embed.js" async></script>

That is a Raistlin gallery: everything of theirs on C64GFX, most-liked first.

Build your embed

Set it up here and copy the snippet at the bottom. The preview is the real widget.

Examples

Each one below is live on this page, and the snippet under it is generated from the markup it is running on — so what you copy is exactly what you are looking at.

Every option

Written as data- attributes on the <div>. The same names in camelCase work when you create an embed from JavaScript (data-min-column-width is minColumnWidth).

What to show

Layout

Colours and type

Colours take anything CSS does — #ffcc00, rgb(…), transparent, or a custom property of your own site.

Clicking and selecting

Using it from JavaScript

Every embed on the page fires c64gfx:select on its own <div> when a visitor picks an artwork. The event bubbles, so one listener on the document catches every embed.

<div id="picker" data-c64gfx-embed data-source="artist:848" data-select="single"></div>
<script src="https://c64gfx.com/embed.js" async></script>
<script>
document.getElementById('picker').addEventListener('c64gfx:select', function (event) {
    var picked = event.detail.image;      // id, title, thumb, artists, year, tags, likes
    console.log(picked.id, picked.title, picked.thumb);
});
</script>

You can also create one yourself, which is the only way to pass a function rather than the name of one:

var gallery = C64GFXEmbed.render('#picker', {
    source: 'artist:848',
    select: 'multi',
    limit: 24,
    accent: '#ff6699',
    onSelect: function (detail) { console.log(detail.selectedIds); }
});

gallery.getSelection();        // the selected records
gallery.getSelectedIds();      // just the ids
gallery.setSelection([1234]);  // select from your own code
gallery.update({ sort: 'random' });   // change options and redraw
gallery.refresh();             // re-read and redraw
gallery.destroy();             // remove it

C64GFXEmbed.scan() picks up any embed markup added to the page after load — call it after inserting one yourself. C64GFXEmbed.get(el) returns the embed already running on an element.

Styling from your own stylesheet

The widget renders in a shadow root, so your page's CSS cannot reach in by accident — and your stylesheet cannot be broken by it either. When the options are not enough, ::part() reaches the pieces that matter:

#picker::part(card)  { border-style: dashed; }
#picker::part(meta)  { text-align: center; }
#picker::part(credit){ font-style: italic; }

Parts: root, head, heading, grid, card, thumb, meta, foot, more, credit, lightbox.

Worth knowing

• The data is plain static JSON under c64gfx.com/api/embed/ and the pictures come from our CDN. Nothing is written, no cookie is set, and no visitor of yours is identified to us.
• It is rebuilt when the site is, so a new artwork or a changed like count shows up in your embed after the next C64GFX update rather than immediately.
• A very large source (a busy category, one of the most prolific artists) ships its most-liked 1000 artworks rather than all of them.
• 18+ artwork is left out unless you ask for it.
• Artwork stays the property of the artists who made it. An embed is a link back to their work, which is why the credit is on by default.
• Something not working, or an option missing? Leave a comment at the bottom of this page.