Filters

Published: 2014-10-16 13:54:12 -0400

What Are Work Skins?

Works skins allow you to customize the appearance of your works beyond the basic HTML tags the Archive supports. In order to do this, they use Cascading Style Sheets (CSS), a style language that allows you to define a set of rules for how specific HTML elements in your work should be displayed.

This guide will take you through creating and applying a work skin on the Archive. For a more in-depth tutorial on how work skins and CSS work, we invite you to take a look at our tutorial on styling works, or check out some of the HTML and CSS resources listed at the end of this article.

Creating and Applying a Work Skin

1. Create the Work Skin

From your AO3 Dashboard, choose Skins from the sidebar, then select My Work Skins. Select Create Work Skin at the top left to open the Create New Skin webpage.

2. Enter Work Skin Information

In the shaded area labeled About, ensure that Type is set to "Work Skin". Then, give your work skin a unique title (e.g., "SMS Text"). Optionally, you can also give your work skin a description (e.g., "For SMS text within fic").

Once you have created your work skin, you may want to return to this form to upload a preview image or to apply to make your skin public for the use of other fans. For now, move down into the CSS text box to continue.

3. Write the CSS

CSS allows you to create a blueprint for how you'd like the HTML in your work to be displayed.

For example, using CSS, you can give instructions in one line of code that makes all your paragraphs look like monospaced computer code. As you might already know, you can do the same thing using an HTML code tag on all your paragraphs--but using CSS has a number of advantages over using HTML all by itself.

Firstly, by separating your work's appearance from its content, aesthetic changes are kept consistent. CSS ensures all items with the same labels are automatically displayed with the same settings. As work skins can be applied to multiple works, this feature is helpful in ensuring series are formatted consistently across all works.

CSS also helps you avoid redundancy by allowing you to define rules that will apply to all matching elements within your text, without needing to retype the same HTML over and over. In the previous example, if you wanted to change all your paragraphs to monospace font using HTML, it would involve adding extra HTML code for every paragraph of your work. Using CSS, on the other hand, you could make this change with a handful of CSS lines that would then apply to every single paragraph (p) tag. As such, using CSS in work skins is ideal for customized or complex styling, while still being easily changeable.

Finally, using CSS for styling instead of HTML avoids violating the principle of Semantic HTML--that is, the idea that HTML should be about describing the meaning of content, not its appearance. Semantic HTML is not only easier for humans to read and write, it's also more accessible: people using screen-readers or other assistive technologies to access AO3 will have a much easier time accessing your work if you use CSS instead of HTML for styling.

CSS Example

If this all sounds a little complicated, don't panic! This example will walk you through the basics of CSS styling in relation to work skins.

To begin, imagine you want to make the text messages characters send and receive look different from the rest of your work's text. For instance, you might want all SMS text to use a monospace Courier New font, while the rest of your work continues to use the Archive's default font. Using only HTML, this would be impossible, as the Archive does not allow use of the HTML font tag required to select a different font family. Using a work skin, on the other hand, you could easily create a simple CSS rule--a line of code that declares new settings for a particular HTML element--saying that every instance of a newly-envisioned HTML class textMsg should use a monospace Courier New font.

To start, write #workskin to declare the rule as part of your work skin. This doesn't change, regardless of the kind of rule you're writing.

After this, you specify which section of your HTML the CSS rule will affect; in other words, a "selector". You can apply a rule to any combination of HTML elements and classes. Possible selectors include:

Element only: To use an HTML element as your selector, simply write the element name after the #workskin declaration. For example, selecting all paragraph elements (p) becomes #workskin p.

Class only: To select all instances of an HTML class, write the name of the desired class preceded by a period. As in our CSS Example, #workskin .textMsg will modify any element in the work with the class name textMsg.

Element and Class pair: To select only items with a particular element and class name, combine both methods by writing the element name and the class name separated only by a period: #workskin p.textMsg selects only paragraph elements with the textMsg class.

Following the HTML selector, you'll need to type a left curly bracket ({). This signals the start of your declaration, which defines what your rule is actually going to do.

In the declaration, you write a series of statements that assign a value or values (in this case, "Courier New", Courier, monospace) to a property (in this case, font-family). Your property describes the aspect you would like to change (the font family), while the value you assign it controls the kind of change that will be affected (in this case, changing it to monospace Courier New font style). The two are connected by a colon (:) and the whole statement is followed by a semicolon (;) to indicate that the font-family declaration is finished and complete. You can now type a right curly bracket (}) to close your rule.

In this example, the CSS rule only contains a single declaration; more commonly, rules will consist of several of these statements before closing off. To apply more settings to a single selector, simply end each declaration with a semicolon before defining the next property, and ensure you close the statement with a final semicolon and right curly bracket.

For some more examples of CSS rules and how they are written, you may want to take a look at our tutorial on styling works or any of the other resources listed at the bottom of this article.

4. Applying the Work Skin

Once you've written your CSS, use the Submit button to create your work skin. Congratulations! It will now show up under the My Work Skins header of the Skins section of your dashboard, where you can edit it to add additional rules, add a preview image, or make your skin public for others to make use of.

Now that your skin has been created, the next step is to link it to the work you'd like it to modify. In order to do this, you'll need to navigate away from the Skins page to the work in question. Select Edit on the desired work, or create a New Work, and scroll down to Select Work Skin under the Associations heading.

By default, this drop-down box should be populated with two public work skins: "Basic Formatting" and "Homestuck Skin". You should also see any personal work skins you just created listed here. Select the desired work skin and save your work.

5. Formatting the Work

Now that your work and your work skin are linked together, the CSS in your work skin will map onto the HTML elements of your text. For this to work properly, the selectors defined by your CSS rules need to be present in your work.

For example, a CSS rule for paragraph elements (#workskin p { }) will only apply to sections of text in your HTML which are wrapped in the p and /p tags. In this instance, they will work immediately, as p and /p tags are added automatically to your text by AO3's parser. However, this won't be the case for the rules in your work skin which make use of classes or other HTML elements.

HTML class tags can easily be added to both individual paragraphs and in-line text:

Paragraph: To apply the settings of the textMsg class used in our CSS example to an entire paragraph, simply add the class name textMsg to the p tag preceding the paragraph: p class="textMsg". No modification needs to be made to the closing /p tag.

Span: To apply the settings of the textMsg class to some text within a paragraph, surround the selected text with span class="textMsg" and /span tags.

There are a couple things to remember when adding HTML class tags to your text. Firstly, make sure you're editing your work in HTML mode, not rich text mode, otherwise the changes will not take effect. Secondly, you'll need to use the exact same class name in your HTML as the one you defined in your work skin CSS. Keep in mind these are case-sensitive, so be sure to match the names exactly.

Once you've formatted your text so that it references the items modified in your work skin, hit save and inspect the fruits of your labour. Congratulations! You've just customized a work's appearance on the Archive using a work skin!

CSS & HTML Resources

Comment

Published: 2014-07-20 15:26:17 -0400

We sometimes post little tips & tricks to our official Tumblr to highlight some of the many things you can do with your AO3 account, some of them a little more hidden than others. This is a round-up of some recent posts.

Comment

Published: 2013-10-22 15:11:28 -0400

This concludes our little series in advanced searching and browsing! As always, all the tricks and little hacks mentioned here are very much optional. Simply clicking your way through the Archive tags and playing around with the existing filter options will already give you what you're looking for in the vast majority of cases.

For those wanting to build more complicated searches, here's all information in handy list format:

As we've said before, you are free to use whatever tags you wish on the Archive. However! Descriptive tags, common concepts that people might want to search and filter for, and a work blurb that is easy to scan when scrolling down a list of works - these will help other users find (and then read, watch, look at, or listen to) your stuff.

For inspiration, you can search through all existing tags by character name, keyword, or phrase. Tick the "Canonical" ticky to only see tags that will show up in the filters! Examples:

Comment

Published: 2013-09-21 19:45:28 -0400

Users frequently ask us for an easy, clickable option to filter *out* certain tags, or generate a list of works that are either one rating *or* another. Right now, ticking boxes in the filters will only show you a work if it has *all* the things you have ticked. (And as a work cannot be both Explicit and Mature, you can only pick one rating, not two.) Creating an interface that does everything and is also a) easy on the eye, b) accessible to screenreaders and other assistive tech, and c) not entirely reliant on JavaScript is not an easy task, and it will be a while yet before we can offer this.

However, we previously showed you a workaround using the 'Search within results' field in the Sort & Filter sidebar. Using a simple minus sign, you can exclude anything you don't want, or you can string together things with an uppercase OR to find all works that have at least one of those.

As this relies on text matches across all tags, summary, and notes, putting in -Explicit will also hide works from you that are rated Teen, but include something like "This will get explicit in later parts!" in the notes. Or, as mentioned in our last post, "Derek/Stiles" will also match a list of tags containing "Derek, Stiles" in that order.

There's a way you can use our expertly wrangled tags in the 'Search within results' field, but it requires you to look up a tag ID. Right now, this is only possible for Fandom, Character, and Relationship tags. Those have feeds, which contain the tag ID:

On the Derek Hale/Stiles Stilinski works page, you will find a 'Subscribe to the feed' button towards the upper right. The feed link will give you a number (as part of its URL). Now copy the number and you can do this:

"teen wolf" -filter_ids:264659

This will use the tag's structure to exclude any works with this tag *and* its synonyms, e.g. "Sterek" or "Derek/Stiles", but since it's not a text match it *won't* accidentally exclude works that have "Derek Hale, Stiles Stilinski" somewhere else in the tags.

And while we're blowing your mind, you can do the following to only show works that have *no* pairing tags at all:

-relationship_ids:*

(Search results that do contain a pairing are due to tags that aren't indexed properly or have no canonical version. But close!)

Obviously, most Archive users will never need these little hacks! The tags, search form, and filter options already allow you to drill down to content you like with just a few button clicks. However, if you do find these extra options useful, but don't want to type them into the box every time you do a search, there's an unofficial userscript for you! It will automatically perform your prefered search when you open a list of works. Give it a whirl if you use Firefox or Chrome.

(We have collected more unofficial userscripts and other tools in our Cool Stuff FAQ, including an AO3 Savior script which will automatically hide works that contain certain words. Tumblr users might be familiar with the concept...)

Comment

Published: 2013-09-13 20:24:26 -0400

When we brought back the tag filters after their long sleep last year, we tried to keep the interface as uncluttered as possible and focus on frequently used or requested search options. Like the Archive itself, this is a work in progress. There's a lot of scattered documentation about finding stuff to read, look at, watch, or listen to on the Archive: The little blue question marks all over the Archive should provide some pointers, and there's also the Searching and Browsing on the AO3 tutorial for more details.

However, there are some "secret" search options that are already built into the filtering and search code, but aren't necessarily reflected in the interface (because ticky box overkill). Here's an overview of neat things you can put into any of the following places to narrow down (and sort!) your results:

the "Search within results" field in the tag filters for works (e.g. for the Pacific Rim tag or in the Dark Agenda collection)

These will handle any text matches in the title, summary, notes, and list of tags. Note that there will be some inaccuracies due to the way the code stores information and handles search strings: "Derek/Stiles" will also match a list of tags containing "Derek, Stiles" in that order. (Please stay tuned for Part 2 for a workaround!)

kittens

"needs hugs"

"kink bingo"

m/m OR f/f (works tagged either M/M, F/F, or both)

explicit OR mature (most of the porn)

-death (exludes works with 'death' in the title, summary, notes, or tags)

These were put into the main search box in the header to generate results, but you can also use these tricks in the "Search within results" field to narrow down work lists for a particular tag. Just remember to put everything into one of the three search boxes listed above.

Comment

Published: 2013-01-10 12:46:57 -0500

Hi, 852 Prospect authors!

The 852 Prospect is still moving to the AO3 due to the state of its software (read more about this in our first post about the move), but there have been some unexpected delays with the code needed to do the automated import happen. For that reason, the Open Doors Committee will be emailing AO3 invitations (and explanations) to all of the 852 Prospect authors in the next few weeks. This will allow any interested author to set up their own accounts and import their stories to the 852 Prospect collection on AO3 if they don't want to wait. If you no longer have access to the email address you used on 852Prospect.org, or if you have questions not answered by this post, you can always contact Open Doors. (If you have verified your new address with Open Doors before, you don't need to do so again.)

To avoid duplicate stories when the rest of the collection is auto-imported in the near future, we request you post them using the manual URL importer feature. Doing it this way will ensure that all of the comments, kudos and hit counts will be on one story and that readers following old links from 852 Prospect will get to your stories easily.

There will also be two public chats, hosted by the Open Doors and Support committees, on Campfire (the online chat platform the OTW uses). The first will be on February 2 at 22:00UTC. The second will be on February 10 at 01:00UTC. (Click the links to see when the chat is being held in your timezone). You can access OTW’s public chatroom using this guest link.

For stories already posted on the Archive of Our Own:
1. Access your dashboard while logged in and click on "Edit Works".

2. Select the stories you would like to add to the 852 Prospect Archive collection, and click "Edit".

3. In the second gray box, there is a field for "Add to Collections". Start typing "852 Prospect Archive"; it will pop up as a suggestion. Click on it.

4. Down at the bottom, click "Update All Works".

5. Because the 852 Prospect Archive collection is moderated, your story/stories will not be added right away.

While importing stories to the Archive of Our Own:
1. While signed in, go to the 852 Prospect Archive collection page (http://archiveofourown.org/collections/852_Prospect_Archive) and click on the button in the upper-right hand corner, "Post to Collection".

2. Import your story using the "Import From An Existing URL" feature. (See below for instructions.)

1. While logged in, click on the "Post New" button in the upper-right hand corner.

2. On the next page, click on "Import From An Existing URL Instead?" (also in the upper-right hand corner).

3. Copy the URL of your story on the 852Prospect.org website, and then paste into the window for URLs.

4. Select your story rating (required); pick one of five choices:Not Rated: Select this if you do not wish to rate your story.General Audiences: For stories on 852Prospect.org that were rated Gen or PG.Teen and Up Audiences: Select this if you would like to rate your story for PG-13 audiences.Mature: For stories on 852Prospect.org that were rated R.Explicit: For stories on 852Prospect.org that were rated NC-17.

5. Select applicable warnings for the AO3 (required). (Any other warnings you would like to add to your story can be added under Additional Tags.) There are six choices, mark all that apply:Choose Not to Use Archive Warnings: Select this if you do not wish to assign warnings to your story.Graphic Depictions of Violence: For stories on 852Prospect.org that had a "violence" warning, or otherwise contain scenes of graphic violence.No Archive Warnings Apply: Select this warning if you do not believe the AO3 warnings apply to your story.Rape/Non-Con: For stories on 852Prospect.org that had a "rape/nc" warning, or otherwise contain rape or non-consensual elements.Underage: Select this warning if your story contains an underage person in a sexual relationship with another character.

6. For "Fandoms" (required), start typing "The Sentinel" and it will appear as a suggestion. Click on it. (Add other fandoms if applicable.)

7. For "Category", please select whichever you feel are applicable, or else none:F/F: Female/FemaleF/M: Female/MaleGen: General: no relationship, or containing relationships which are not the main focus of the workM/M: Male/MaleMulti: Any combination of relationships, multiple partnersOther: Other

8. For "Relationships", start typing one character's name and select the correct suggestion.

9. Add any other tags (warnings, or tags that mirror 852Prospect.org categories) that you see fit under Additional Tags. Please note that Additional Tags should not be hyphenated. (For a list of all the tags currently in use within The Sentinel fandom, see this page.)

10. Click "Import". It will take you to a preview screen of the story you imported (or, if you entered multiple URLs, links to preview screens for the stories you imported). On the preview screen for each story, there are four choices down at the bottom:Post: Click this if you are happy with the formatting and would like to post.Save Without Posting: Click this if you would like to save this story to your draft folder, to edit/post another time. (Please note, drafts are only saved for a week from the day they were first created.)Edit: Click this if you would like to edit the story before posting.Cancel: Click this to cancel, and start over another time.

To search within a collection, make sure you are on the 'works' view of a collection. You can browse to the 'works' view of a collection by clicking 'works' on the sidebar of the collection. You can search within the collection by clicking 'search within results' on the right hand side of the page, within the filters sidebar. This searches all the fields associated with a work in the database, including summary, notes and tags, but not the full work text. There are special characters you can use to further customize your results; the '?' button explains them in more detail.

Comment

Published: 2012-11-08 02:51:00 -0500

We have shiny new tag filters and a new, improved Advanced Search form! See below for a few tips searching and browsing on the new-look AO3!

Browsing via tag filters

The new tag filters look similar to our old tag filters, but they have lots of greatly-improved code behind the scenes, and a few visible tweaks to improve performance. You can use the filters to browse for works on the AO3 - see below for a few tips on how they work and how to find what you want.

Select a fandom

The first step of browsing is to select a fandom to help us narrow down the results. (If you're going in search of crossovers, then just pick one of the fandoms you'd like to see included in the crossover - you can add the others later.) You can also filter from a Character or Relationship tag to start with a narrower selection, or even an Additional Tag, such as Kinks.

Narrow down your results

Once you've selected, for example, a fandom, you can narrow down your results further by filtering by Rating, Warning, Category, Fandom, Character, Relationship, or Additional Tags. The filter boxes will show the ten most popular tags for each category. This is different to the old filters, which showed all the tags for each category; this created impossibly long filter options and was a drain on performance, which is why we've limited the options.

If the tag you want isn't showing in the filters, you have two options:

Type the tag you're looking for in the 'Other Tags' box. Some suggestions will come up in autocomplete to help you out, but if what you want isn't among the suggestions, you can type it in yourself. (Note that tags that don't appear in the autocomplete are non-canonical and may not always give expected results.) All types of tags can be mixed and matched: John Luther (character), The Losers (2010) (fandom), Crossover (additional tag) can all be entered in the same text field and will all be factored into your filter results.

Select some options from the available choices to narrow down your results, then filter again. For example, if you start with Stargate - All Series you'll get filters showing the top ten characters across the whole of the Stargate universe, including characters from Stargate SG-1 such as Teal'c. If you select 'Stargate Atlantis' and filter again, the filters will show you only the top ten characters from Stargate Atlantis. You can drill down to get more and more specific filter results.

Please note that selecting multiple options in the filters will always produce an AND search - so if you select 'Naruto', 'Bleach', 'Mature' you'll get works tagged with Bleach AND Naruto AND with the Mature rating. If you want to add OR or NOT options to your browsing, you'll need to use the 'Search within results' option.

Search within your results

A search box has been added to the filter sidebar that mirrors the search box at the top of every page. It will search all types of tags plus summaries and notes for the keywords you put in, and narrow down the results to only those matches.

Unlike the ticky boxes and the autocomplete field, this search box allows to you to generate results containing one thing OR another, not both of them. So, ticking 'Thane Krios' and 'Liara T'Soni' on the Mass Effect page will find you only works that contain both characters. Leaving the tickies alone and entering Thane OR Liara in the search field will find you works with one or the other or both. You can ticky any of the other boxes, e.g. only Explicit works and only F/M pairings, to narrow down your search results, and pick a sorting option. Note that this field only searches within your selection, so if you're already on a fandom page, adding unrelated fandoms in an OR search won't add works from these fandoms to your results.

Conversely, you can use the NOT search operator (or the minus sign "-") to specify things you don't want to see in your results. So, for example, on the Death Note page you could ticky "Mature" in the Rating options and "L/Yagami Light" under Relationship, and then enter -"major character death" or NOT "major character death" into the search field. This will exclude works with that warning.

Sort your results

You can use the drop-down box at the top of the filters to order your results. This replaces the sort options which used to show at the top of your list of results - we've moved them into the filters so that we could include a lot more options. As many users have requested, you can now sort by the numbers of kudos and comments a work has received and the number of times it was bookmarked, in addition to word count, hits, title, date posted, and date updated.

One downside of moving this to the filters is that you can't reverse sort order (e.g. starting with low word counts instead of high) with a second click on the button anymore. However, you can now browse through all the works returned with a given search, so you can go to the last page of results and work backwards to get the same effect.

Filter bookmarks

You can now browse bookmarks using the filters! First select a fandom, then hit the 'Bookmarks' button on the page of results. You can then use the filters in much the same way as if you were browsing a list of works, but you'll find two additional options: you can browse Recs only, and you can choose to show only bookmarks with notes. Note that you don't have the same sorting options as for works (kudos, hits, title etc.), as those belong to the work, not a bookmark. You can, however, sort by the date the bookmarked item was updated and by the date the bookmark was created.

Another much-requested improvement is the ability to filter your own personal bookmarks. You can use all the same filter options when looking through bookmarks you created, and sorting by Date Updated will show you at a glance which of your bookmarked works has new chapters waiting for you. Hurray!

Advanced work search

Advanced search is still much the same behind the scenes, but the search form has been radically redesigned to make it easier to access the Archive's powerful search capabilities. Upon popular request, we've also added sorting options to your search results! By default, best matches will be listed first; you can change the sorting order before submitting your search by picking another option from the drop-down menu.

Search fields

The search fields are now grouped into topical chunks roughly along these lines:

General information about the work (title, author, language, posting date, completeness, etc.)

Each section is broken down into separate fields for each kind of tag (Fandom, Character, etc), with ratings, warnings, and categories displayed in the form of a drop-down menu and checkboxes. You can choose to enter options in all these categories, or just in one, to get precisely what you're looking for.

Where applicable, an autocomplete will suggest tags as you type. If the autocomplete doesn't offer the option you want, you can type it as free text.

Boolean searches

By default, each search term you enter will be searched for as an AND search, i.e. will be treated as if you're looking only for a work that has ALL these things.

If you want to exclude some terms, or look for works containing one term OR another, add your search terms to the 'Any field' and use the search operators NOT (or minus sign: -) and OR (or two pipe symbols: ||). All spaces between search terms will automatically be interpreted as the AND operator, although you can also add the AND if you like.

Searches with quotes

Search terms consisting of more than one word, such as "Riza Hawkeye", or containing characters like / or -, such as "X-Men", will return more accurate results when surrounded by quotes.

We plan to add more enhancements to search and browse in the future, but we think this new system will be much more flexible and useful than before. Happy browsing!

Comment

Published: 2012-03-01 16:13:59 -0500

One of the Support tickets we're seeing more of is "How do I post my multimedia works?" It's not yet possible to host vids, art or soundfiles on the Archive, but you can embed works hosted elsewhere, so we wanted to let you know more about how to do that.

All information is current as of 30th January 2015, and is subject to change as we move forward.

Tags and Finding Audio-Visual Works

Right now, the best way to help people find your multimedia works is by adding the information in the Additional Tags Field. The current 'canonical' for audio fics (podcasts, audiobooks, and other such works) is the Tag Podfic, which has subtags for most of the file types (canonicals are the tags which show up in our browsing filters - other variants of the tag are hooked up to that so it finds them all). We also have a Podfic Available tag for authors who have audio versions of their work posted by another author or on another site. We also have a tag for Fanart, with many different subtags.

We also already have a lot of video under the Fanvids. Some are links to the works posted off-site, but many are embedded in the Archive and can be commented, kudosed, bookmarked, and shared!

We are discussing behind the scenes how to categorize audio/visual media works as we expand this aspect of the future, and at some stage will ask for public comment, so keep an eye out for that! Until then, find your favorite works in new forms, or tag your own works so others can find them!

Posting a New Multimedia Work

Right now, we don't have on-site hosting, so you'll have to host your file at another site such as Vimeo, YouTube, or your own website. You can always just create a link in your work so a user goes to your hosted site, but where's the fun in that? Here's what you need to know if you want to just press play!

Sites

The HTML Sanitizer we use runs a very tight whitelist on sites we allow to provide media code (this is necessary in order to ensure we don't let malevolent code slip by). If it's not posted to one of these listed sites, the Sanitizer will delete the embed code entirely.

blip.tv

criticalcommons.org

dailymotion.com

google.com

metacafe.com

podfic.com

ning.com

soundcloud.com

spotify.com

vidders.net

viddler.com

vimeo.com

youtube.com

8tracks.com

We are currently keeping the whitelist short, evaluating each host site for stability, code vulnerability, content (whether fans are using it), and the size of its user base. (If you know of a site that you think should be on this list, submit a Support ticket and we will submit it for review. This may take a little while, so you may want to use another host.)

Some Notes about HTML Code

There are four ways to embed audio/video in HTML. Currently, we support code starting with the following three tags:

<object> - this is the older method that YouTube and Vimeo used to embed video until recently. It's reported to be buggy on iDevices, so use with caution.

<embed> - this tag is mostly used for audio, and occasionally to simplify the mess that <object> generates. It's a lot easier to read and compatible with more platforms, so if you have a choice between <object> and <embed>, choose the latter.

<iframe> - This is the newest style media embedding tag that we currently support and the most widely accepted for mobile media. Unlike the other tags, <iframe> functions as a separate window within your page to generate the content. This means that a user running NoScript, AdBlock, or similar may have to specifically request to see your media. By default, YouTube, Vimeo, and many other sites will try to give you <iframe>.

We do not actively support:

<audio> or <video> - These are new HTML5 tags, and while they're great in concept, cross-browser implementation is currently spotty. One of the major problems is you need two different versions of the same file to be guaranteed to play in any browser. The Archive's HTML Parser will remove any <audio> or <video> tags.

If you are writing your own embed code and find a property stripped out that you think should remain, let us know!

Inserting Art

Many websites that host your images will provide the code to embed the image in another site. Just remember that the code has to be posted into the HTML Editor, not the Rich Text Editor. Some sites do provide a lot of formatting in their code. The part you absolutely need to keep is the <img src="... /> portion.

If you prefer to use the Rich Text Editor, you can click on the "Insert Image" icon. You will need the actual link to the image, instead of the whole embed code. It will be something like http://www.host.com/.../image.jpg or http://www.host.com/.../image.png - It has to have the file extension at the end, though!

We currently don't restrict image sources, but if you find a site that isn't working, let us know via Support!

Inserting Video

Like images, most websites that host video for you for you will provide you the embed code to place in a post - you can just copy and paste this code into the HTML editor of a new work, tag it and post it! (See Known Issues below)

Inserting Audio

Embedding video is fairly straightforward if you're using the above sites. Embedding audio, on the other hand, requires passing the data through the Archive's public audio player.

Find the direct link to your audio file. The file has to be in the MP3 format - none of the other common audio file types will work consistently.

Replace MP3_FILE_URL with the full link to your audio file. Make sure to include the http:// from the address, or the plug-in will be very confused. Also make sure your browser hasn't given you "smart" angled quotes. There are several other player versions available at our post announcing the new player software.

Once you post the work, make sure to press play to verify all the servers can find each other.

Known Issues

Pasting with quote marks: Several of the major browsers are converting regular quote marks to angled smart quotes when pasting in code. These smart quotes will be stripped out by the parser, rendering the code unusable and causing the entire embed to be stripped out. You'll need to manually go through the pasted code and replace the "smart" angled quotes with straight double quotes.

The Future

In the future, we would like to provide on-site hosting of multimedia (it's likely that fanart will be the first media type we are able to support). If you have particular experience hosting, coding, and streaming multimedia works over the web, and are willing to volunteer, get in touch with the OTW Volunteers and Recruitment Committee and make sure to list your multimedia experience in the Additional Interests section!