jockles.com

Thanks to gadaursan and shysonata, whose Repository: Work Skins and Work Skin - Instagram Image Post this module is built on. Copied and adapted from them: the post layout, hidden-text emojis, the Follow link, verified tick, stories ring, button counts, “liked by” faces, and clickable like and save buttons.

10.1 Chapter Contents

• 10.2 Instagram posts and comments
  • 10.2.1 A Full Post
  • 10.2.2 A Simpler Post
  • 10.2.3 Account Line
  • 10.2.4 Profile Picture and Stories Ring
  • 10.2.5 The Photo
  • 10.2.6 Buttons With Counts
  • 10.2.7 Clickable Like and Save Buttons
  • 10.2.8 Liked By, With Faces
  • 10.2.9 Caption
  • 10.2.10 Comments
  • 10.2.11 Time Posted
• 10.3 Instagram DMs
  • 10.3.1 A One-to-One DM
  • 10.3.2 A Group DM
  • 10.3.3 Instagram DM Window
  • 10.3.4 Simple Messages
  • 10.3.5 Shared Posts and Reels
  • 10.3.6 Seen Status
  • 10.3.7 Group Chats

10.2 Instagram posts and comments

An Instagram post is a stack of lines inside one container, from the account name at the top down to the time at the bottom. The module class is ig. Before we begin, here's the two kinds of post you can build: a full post with everything the workskin can do, and a simpler one. The full HTML is underneath each, which you can copy and modify yourself. The rest of this section takes the HTML apart so that you can modify all the individual parts to say exactly what you want.

10.2.1 A Full Post

This one has the verified tick, the Follow link, the three dots menu, a story ring, a song, a photo, buttons with counts that you can actually click, a "Liked by" line with faces, a caption, comments and the time. Try clicking the heart and the bookmark:

<div class="mob ig theme-auto no-scroll">
<p class="ig-top"><span class="ig-menu">&#8943;</span><span class="ig-pfp story"><span class="pfp"><img src="https://64.media.tumblr.com/2f5204e07f5dc3467a42508584f56c7d/188bbfab996df056-77/s400x600/e139f3e69f9be02470797bbd3505a69cc26def70.pnj" alt="Profile picture of ilya.r"></span></span>ilya.r<span class="hide"> </span><span class="ig-tick">&#10003;</span><span class="hide"> - </span><span class="ig-follow">Follow</span><span class="hide"> - </span><span>&#9835; Boney M. - Rasputin</span></p>
<p class="ig-photo real"><img src="https://64.media.tumblr.com/c3c4ecb5bfed8fa9f0590c54206ddb30/cff2318529321620-44/s1280x1920/42befcc40a517e1f202dda40783be2ffb95c1d92.pnj" alt="Macklin Celebrini at the IHF Worlds, dressed in his red jersey and black helmet. He's surrounded by sparkles, a red vignette, and hearts containing the Canadian flag"></p>
<div class="ig-actions">
<details class="ig-tog like"><summary><span class="ig-icon off">&#9825;</span><span class="hide"> </span><span class="ig-count off">2,431</span><span class="hide"> likes (</span><span class="ig-icon on">&#9829;</span><span class="hide"> </span><span class="ig-count on">2,432</span><span class="hide"> when liked)</span></summary></details>
<p class="ig-btn"><span class="ig-icon cm"></span><span class="ig-count">84</span><span class="hide"> comments</span></p>
<p class="ig-btn"><span class="ig-icon">&#8635;</span><span class="hide"> </span><span class="ig-count">12</span><span class="hide"> reposts</span></p>
<p class="ig-btn"><span class="ig-icon">&#10148;</span><span class="hide"> </span><span class="ig-count">7</span><span class="hide"> shares</span></p>
<details class="ig-tog save"><summary><span class="hide">Save</span><span class="ig-icon bm off"></span><span class="ig-icon bm on"></span></summary></details>
</div>
<p class="ig-likes liked-by"><span class="ig-like-pfps"><span class="ig-like-pfp"><span class="pfp"><img src="https://media.istockphoto.com/id/1298570775/photo/rose.jpg?s=1024x1024&w=is&k=20&c=UFPisYCT3g2Vm04F2E5zrhtUWqDtLRLDXZisKb6Xf5s=" alt="Profile picture of shane.h"></span></span><span class="ig-like-pfp"><span class="pfp"><img class="land" src="https://media.istockphoto.com/id/2172051553/photo/asiatic-lily.jpg?s=1024x1024&w=is&k=20&c=3vCuZD234XmkXzrnzWPBdIZM0oJA1B6qe1x-06K_wDo=" alt="Profile picture of scott.h"></span></span><span class="ig-like-pfp"><span class="pfp"><img class="land" src="https://www.shutterstock.com/shutterstock/photos/1100283806/display_1500/stock-photo-beautiful-lavender-flower-in-the-dalat-flower-park-selective-focus-1100283806.jpg" alt="Profile picture of jane_t"></span></span></span>Liked by <b>shane.h</b> and <b>others</b></p>
<p class="ig-caption"><b>ilya.r</b> early skate <span class="ig-tag">#nofilter</span></p>
<p class="ig-viewall">View all 84 comments</p>
<p class="ig-comment"><b>shane.h</b> why are you awake</p>
<p class="ig-comment"><b>scott.h</b> I see you 👀</p>
<p class="ig-time">3 hours ago</p>
</div>

A post with a real photo in it can end up taller than a phone screen, so this container has no-scroll added to keep the buttons in view (see Scrolling Long Chats, in the Core, Themes, and Extras chapter).

10.2.2 A Simpler Post

This one takes its picture and name from Rose's profile, has a location instead of a song, describes the photo instead of showing it, and has plain buttons that don't click:

<div class="mob ig theme-auto">
<p class="ig-top"><span class="ig-menu">&#8943;</span><span class="ig-pfp"><span class="pfp pfp-rose"></span></span><span class="handle pfp-rose"><span class="hide">RoseLandry</span></span><span class="hide"> - </span><span>Ottawa, Ontario</span></p>
<p class="ig-photo">[A photo of a very large lasagne, with one corner already missing]</p>
<div class="ig-actions">
<p class="ig-btn"><span class="ig-icon">&#9825;</span><span class="hide"> </span><span class="ig-count">312</span><span class="hide"> likes</span></p>
<p class="ig-btn"><span class="ig-icon cm"></span><span class="ig-count">2</span><span class="hide"> comments</span></p>
<p class="ig-btn"><span class="ig-icon">&#10148;</span><span class="hide"> </span><span class="ig-count">1</span><span class="hide"> share</span></p>
</div>
<p class="ig-likes">312 likes</p>
<p class="ig-caption"><b>RoseLandry</b> made enough for the whole committee. nobody came. <span class="ig-tag">#galaprep</span></p>
<p class="ig-comment"><b>ilya.r</b> I am coming now</p>
<p class="ig-time">20 minutes ago</p>
</div>

Anything you don't want, you can just leave out of your copy, and the Instagram CSS chapter shows you how to switch parts off for the whole fic.

10.2.3 Account Line

The first line is the account that posted. The name comes first, and the last <span> in the line adds the small grey line underneath it, which can be a song, like here, or a location. Straight after the name go the blue verified tick (ig-tick) and the "Follow" link (ig-follow). The three dots menu (ig-menu) sits at the far right, so it goes first in the line:

<p class="ig-top"><span class="ig-menu">&#8943;</span><span class="ig-pfp story"><span class="pfp"><img src="https://64.media.tumblr.com/2f5204e07f5dc3467a42508584f56c7d/188bbfab996df056-77/s400x600/e139f3e69f9be02470797bbd3505a69cc26def70.pnj" alt="Profile picture of ilya.r"></span></span>ilya.r<span class="hide"> </span><span class="ig-tick">&#10003;</span><span class="hide"> - </span><span class="ig-follow">Follow</span><span class="hide"> - </span><span>&#9835; Boney M. - Rasputin</span></p>

For a song, start that last span with the music note symbol, ♫, then the artist and the song title. For a location, just write the place:

<p class="ig-top"><span class="ig-menu">&#8943;</span><span class="ig-pfp"><span class="pfp pfp-rose"></span></span><span class="handle pfp-rose"><span class="hide">RoseLandry</span></span><span class="hide"> - </span><span>Ottawa, Ontario</span></p>

10.2.4 Profile Picture and Stories Ring

The profile picture goes at the very start of the account line, straight after the menu. Put the picture tag inside a span with pfp, inside a span with ig-pfp. The pfp span crops the picture into a circle without squashing it, and the alt text should describe the picture (for example, "Profile picture of ilya.r"). If the picture is wider than it is tall, add class="land" to the picture tag (see Pictures in Boxes and Circles, in the Core, Themes, and Extras chapter). To show that the account has a story up, add story to the ig-pfp span, which draws the colourful ring around the picture:

<span class="ig-pfp story"><span class="pfp"><img src="https://64.media.tumblr.com/2f5204e07f5dc3467a42508584f56c7d/188bbfab996df056-77/s400x600/e139f3e69f9be02470797bbd3505a69cc26def70.pnj" alt="Profile picture of ilya.r"></span></span>

A profile works here too, so the same person has the same picture everywhere, like Rose's in the simpler post: <span class="ig-pfp"><span class="pfp pfp-rose"></span></span>. The same goes for the little faces in the "Liked by" line further down (see Profile Pictures, in the Core, Themes, and Extras chapter).

So can the account name: Rose's post has <span class="handle pfp-rose"><span class="hide">RoseLandry</span></span> in its place. The hide span is for readers with the workskin switched off - the handle comes from the CSS, so without it they wouldn't know who posted (see Accessibility, in the Core, Themes, and Extras chapter).

10.2.5 The Photo

Host the photo somewhere else and put it in an ig-photo box that also has real, with your link in src and a description in alt:

<p class="ig-photo real"><img src="https://64.media.tumblr.com/c3c4ecb5bfed8fa9f0590c54206ddb30/cff2318529321620-44/s1280x1920/42befcc40a517e1f202dda40783be2ffb95c1d92.pnj" alt="Macklin Celebrini at the IHF Worlds, dressed in his red jersey and black helmet. He's surrounded by sparkles, a red vignette, and hearts containing the Canadian flag"></p>

If you'd rather not use a picture, a plain <p class="ig-photo"> makes a grey box, and you can describe the photo inside it in square brackets:

<p class="ig-photo">[A photo of a very large lasagne, with one corner already missing]</p>

10.2.6 Buttons With Counts

The row of buttons is a div with ig-actions, and each button is its own paragraph with ig-btn. The symbol goes in a span with ig-icon, and the number in a span with ig-count. The comment bubble is drawn for you with ig-icon cm, and the others are plain symbols (a heart for likes, a circle arrow for repost, an arrow for share). After each number is a hide span with a word in it, like <span class="hide"> comments</span>, so readers with the workskin off get "2 comments" rather than a number on its own. Leave a button out if you don't want it on the post:

<div class="ig-actions">
<p class="ig-btn"><span class="ig-icon">&#9825;</span><span class="hide"> </span><span class="ig-count">312</span><span class="hide"> likes</span></p>
<p class="ig-btn"><span class="ig-icon cm"></span><span class="ig-count">2</span><span class="hide"> comments</span></p>
<p class="ig-btn"><span class="ig-icon">&#10148;</span><span class="hide"> </span><span class="ig-count">1</span><span class="hide"> share</span></p>
</div>

10.2.7 Clickable Like and Save Buttons

Readers can click or tap the heart and the save button to switch them on and off, like on the real app. They're made with the details and summary tags, and you use them in place of the plain heart from the last section. Inside the summary are two versions of the same thing: the parts with off show to begin with, and the parts with on swap in after a click. Click again, and it goes back. The heart turns red, and because the number is in there too, you can make the likes go up by one. The save button (ig-tog save) sits on its own at the far right, and has a bookmark that fills in when it's clicked:

<div class="ig-actions">
<details class="ig-tog like"><summary><span class="ig-icon off">&#9825;</span><span class="hide"> </span><span class="ig-count off">2,431</span><span class="hide"> likes (</span><span class="ig-icon on">&#9829;</span><span class="hide"> </span><span class="ig-count on">2,432</span><span class="hide"> when liked)</span></summary></details>
<p class="ig-btn"><span class="ig-icon cm"></span><span class="ig-count">84</span><span class="hide"> comments</span></p>
<p class="ig-btn"><span class="ig-icon">&#8635;</span><span class="hide"> </span><span class="ig-count">12</span><span class="hide"> reposts</span></p>
<p class="ig-btn"><span class="ig-icon">&#10148;</span><span class="hide"> </span><span class="ig-count">7</span><span class="hide"> shares</span></p>
<details class="ig-tog save"><summary><span class="hide">Save</span><span class="ig-icon bm off"></span><span class="ig-icon bm on"></span></summary></details>
</div>

• Keep each <details> on a single line of code, like above, and put them inside the ig-actions div, not inside a <p>.
• To start with a button already switched on (a post the character has already liked, say), add open: <details class="ig-tog like" open>.
• The clicking only works on AO3 itself, in a browser. In a download (EPUB, PDF and so on) the buttons stay as they started, so I'd recommend not having anything in your story depend on them being clicked.
• If you don't want a clickable heart, use ig-btn for it instead, as in the last section. They look exactly the same until someone clicks.
• The hide spans are for readers with the workskin off. Without them the heart reads "♡♥2,4312,432", and with them it reads "♡ 2,431 likes (♥ 2,432 when liked)". The save button gets a hidden "Save", because its bookmark is drawn by the workskin and disappears with it. You'll still see a small triangle in front of each one with the workskin off - that's the details tag's own marker, and only the workskin can hide it.

10.2.8 Liked By, With Faces

ig-likes is the likes line. Add liked-by to it for a "Liked by" line, which puts little overlapping profile pictures in front and keeps the text from being bold unless you put names in <b>. Each face is a span with ig-like-pfp, with the usual pfp and picture tag inside, all inside one ig-like-pfps span. Keep the faces together on one line, with no gaps between them. A picture that's wider than tall needs class="land" on its picture tag, like the second and third faces here, or it won't fill its circle (see Pictures in Boxes and Circles, in the Core, Themes, and Extras chapter):

<p class="ig-likes liked-by"><span class="ig-like-pfps"><span class="ig-like-pfp"><span class="pfp"><img src="https://media.istockphoto.com/id/1298570775/photo/rose.jpg?s=1024x1024&w=is&k=20&c=UFPisYCT3g2Vm04F2E5zrhtUWqDtLRLDXZisKb6Xf5s=" alt="Profile picture of shane.h"></span></span><span class="ig-like-pfp"><span class="pfp"><img class="land" src="https://media.istockphoto.com/id/2172051553/photo/asiatic-lily.jpg?s=1024x1024&w=is&k=20&c=3vCuZD234XmkXzrnzWPBdIZM0oJA1B6qe1x-06K_wDo=" alt="Profile picture of scott.h"></span></span><span class="ig-like-pfp"><span class="pfp"><img class="land" src="https://www.shutterstock.com/shutterstock/photos/1100283806/display_1500/stock-photo-beautiful-lavender-flower-in-the-dalat-flower-park-selective-focus-1100283806.jpg" alt="Profile picture of jane_t"></span></span></span>Liked by <b>shane.h</b> and <b>others</b></p>

For a plain count with no faces, use ig-likes on its own, without liked-by, like the simpler post: <p class="ig-likes">312 likes</p>.

10.2.9 Caption

ig-caption is the caption, with the poster's name in <b>. To colour a hashtag like Instagram does, wrap it in a span with ig-tag:

<p class="ig-caption"><b>ilya.r</b> early skate <span class="ig-tag">#nofilter</span></p>

10.2.10 Comments

Add a grey "View all comments" line with ig-viewall, then each comment as its own ig-comment, with the commenter's name in <b>. Add as many comments as you need:

<p class="ig-viewall">View all 84 comments</p>
<p class="ig-comment"><b>shane.h</b> why are you awake</p>
<p class="ig-comment"><b>scott.h</b> I see you 👀</p>

10.2.11 Time Posted

The last line is the little grey time at the bottom, ig-time. It's put into capitals for you:

<p class="ig-time">3 hours ago</p>

10.3 Instagram DMs

Here's the two kinds of DM you can build: a message between two people, or a group chat. As before, the full HTML is underneath each, and the rest of this section takes it apart.

10.3.1 A One-to-One DM

<div class="mob igdm theme-auto">
  <p class="mob-head">shane.h<span class="hide"> - </span><span>Active now</span></p>
  <div class="mob-body">
    <p class="msg in"><span class="hide"><em>Shane:</em> </span>you replied to my story</p>
    <p class="msg out"><span class="hide"><em>Ilya:</em> </span>I did not</p>
    <p class="igdm-shared"><span class="hide"><em>Shane:</em> </span>Shared a story from @shane.h: "6am skate. Again."</p>
    <p class="msg in"><span class="hide"><em>Shane:</em> </span>this story. you replied with a heart</p>
    <p class="msg out"><span class="hide"><em>Ilya:</em> </span>ok maybe I did</p>
    <p class="igdm-status">Seen</p>
  </div>
</div>

10.3.2 A Group DM

<div class="mob igdm theme-auto">
  <p class="mob-head">gala committee 🥂<span class="hide"> - </span><span>Active 2h ago</span></p>
  <div class="mob-body">
    <p class="who">RoseLandry<span class="hide">:</span></p>
    <p class="msg in">the lasagne is still here if anyone wants it</p>
    <p class="who">shane.h<span class="hide">:</span></p>
    <p class="msg in">on my way</p>
    <p class="msg out"><span class="hide"><em>Ilya:</em> </span>I already ate half of it</p>
    <p class="igdm-status">Seen by 3</p>
  </div>
</div>

10.3.3 Instagram DM Window

Instagram DMs use the usual container, header and body, with the module class igdm, so the container is <div class="mob igdm theme-auto">. First comes the header:

<p class="mob-head">shane.h<span class="hide"> - </span><span>Active now</span></p>

The span in the header is the status line, like "Active now" or "Active 2h ago". After the header comes <div class="mob-body">, which holds all of the messages.

10.3.4 Simple Messages

Messages are msg in and msg out paragraphs again. Messages you send are purple, and messages you get are grey:

<p class="msg in"><span class="hide"><em>Shane:</em> </span>you replied to my story</p>
<p class="msg out"><span class="hide"><em>Ilya:</em> </span>I did not</p>

10.3.5 Shared Posts and Reels

When someone sends a post, a reel or a story into the chat, show it with igdm-shared, which makes an outlined box. It gets the hidden label too, so readers with the workskin off know who shared it:

<p class="igdm-shared"><span class="hide"><em>Shane:</em> </span>Shared a story from @shane.h: "6am skate. Again."</p>

10.3.6 Seen Status

The little "Seen" or "Sent" line under your last message is igdm-status, like the status line in iMessage:

<p class="msg out"><span class="hide"><em>Ilya:</em> </span>ok maybe I did</p>
<p class="igdm-status">Seen</p>

10.3.7 Group Chats

For a group, put the group's name in the header. Above a message from someone else, put a who line to show who sent it. The name shows either way, so it only gets a hidden colon after it - your own messages, with no name above them, keep the full hidden label:

<p class="who">RoseLandry<span class="hide">:</span></p>
<p class="msg in">the lasagne is still here if anyone wants it</p>