Media makes storytelling. Add image, video, audio, and more, using blocks. Below are the various kinds of blocks that Atavist offers for your storytelling needs. New blocks will automatically show default content. You can then add whatever image, video, embed — or whatever you want! — by clicking Edit.
You can choose to position your blocks at full-width, centered, or left- or right-justified. Dropped your block in the wrong spot? Hover over the dots in the upper right corner to move the block from one place to another.
Types of Blocks
There are blocks for anything you want to build in Atavist:
Use the navigation in the upper left corner to skip ahed to block.
We also have various Stories and Websites blocks, which only work on website pages, not within projects. For the purposes of this doc, let’s focus on the blocks that work everywhere. For more on Stories and Website blocks, head over here: https://docs.atavist.com/stories-and-website-blocks
Image blocks allow you to easily upload .jpg, .png, or .bmp files. You can drag your file onto the block, or clic Edit and then Upload to browse your computer for the file.
At the Pro plan and above, you can access the Advanced Settings for the image block. Read more about plans: https://atavist.com/plans.
Under Advanced Settings, you can add a URL to the picture and a reader could click through for additional information or to a new story in your publication. Want to say more about the photograph? You can also add an audio file as an audio annotation.
Atavist works to display the best-sized images to your reader, whether they’re on a mobile device or a computer screen of any size. To that end, you should upload the best assets you can, with 1.5mb as a rough upper limit guide for each individual file’s size. (Any bigger than that and quality may only increase marginally.) Generally if your source images are about 2000px on the long side for cover images, you should be more than covered in most circumstances.
Video blocks allow you to easily include a video—either uploaded directly from your computer, or embedded. After clicking Edit you can simply drop in a link from YouTube or Vimeo, click Save, and Atavist does the rest!
Most video formats are supported, and all uploaded video is transcoded to 1280×720 h.264. For ideal video uploads, prepare your source material to slightly larger pixel dimensions, and pre-transcode it to an mp4 file before uploading, so the file uploads faster.
Upload a track to your project via the audio block. Readers control when to start and stop the clip. The audio player supports mp3.
Map blocks let you add a Google map of a region or specific place markers. To place markers, use the search tool and click the result you wish to mark. You can add multiple place markers—and choose a color to make them. To show a region, simply search for it and choose Fit region from the first drop-down menu.
You can also choose to use normal colors, a black and white theme, the satellite image version, or terrain. When your readers view your map, however, they will also have the option to view the satellite image version, with or without labels.
Our integration with the animated gif search engine Giphy allows you quickly find and embed fun moving images. Simply click Edit to either enter a search phrase. Or, go directly to Giphy, find the perfect animation, and paste its URL in your Giphy block to add it to your project.
Note: Animated gifs with a high number of frames may cause problems. Consider using video instead of long gifs when possible.
It’s easy to create a slideshow using this block. Simply assemble your pictures and load them up—either by dragging them in or clicking Upload to browse. You can choose whether to position the slideshow full-width, centered, or left- or right-justified. You can even choose an animation effect between slides.
The Image Compare block allows you to upload two different images, which a reader can slide between to reveal the difference. Upload two images and the focal point picker to match up images of different sizes.
A parallax image is a style of including an image where it appears that the page is scrolling past the image, instead of the image and page scrolling in lockstep.
Layer text directly onto images, videos, and solid colors with the text overlay block. Don’t have an image? Drag in an image or video, or select a color, and start typing. If you’ve got a bit more text than can fit, your photo or video will resize automatically to accommodate it.
You can also select a solid-colored background to match the look and feel of your project.
Atavist allows you to easily add beautiful charts using only a link to a spreadsheet of Google Drive data. Structure your data using the spreadsheet linked in the toolbar (click “this example” to see it). Then, use the style options to make it your own.
Add the contents of your table into a Google spreadsheet, publish it, and paste the sheet’s published URL into a table block.
The table block comes in a variety of styles and also lets you emphasize column headers and row labels, so you can make important categories stand out.
A pullquote is a selection from the body of your text that you want to set off with special prominence. Add the block type, and then begin typing directly where the sample text shows. You can center a pullquote, or position on the left or the right of the screen.
Drop the sidebar block into your project and add text. As its name suggests, it’s great for supplementary information, and works best when it’s aligned left or right, so it feels “out of the way” of your main stream of text. Useful for educational articles, corporate or nonprofit reports, recipes, and many other use-cases.
Buttons are a great way to link to another web page. Atavist buttons default to an internet friendly blue:
At the Pro plan and above, you can access the Advanced Settings for the button block. Read more about plans: https://atavist.com/plans.
With the Advanced Settings, you can select what color you would like the button to be, using either the Palette or Spectrum picker.
Building an audience for your stories? Add a MailChimp form to your Atavist project to encourage readers to join your mailing list. Learn how to integrate the block.
If you can’t directly upload a track using our audio block, instead, you can embed a track from SoundCloud — all you need is the SoundCloud URL.
Embed a specific tweet by adding a Twitter block and including the URL of that tweet. Tweets with images will display the image in your project. Other tweets in that thread will not be shown.
You can include a photo from Instagram by adding the Instagram block, clicking Edit and pasting in the URL of the post.
Create a slideshow by pasting in the Flickr URL of an individual photo, album, or user’s photostream. Take any Flickr url (as long as the content is public) and paste it into the field in our composition editor.
Embed any public SlideShare slideshow by copying its and paste it into the block editor to embed it into your project.
Developers write often about projects they’ve worked on, techniques they’ve discovered, and they often include code as a reference in doing so. To use the Code block, type or paste a code snippet and choose a language. The snippet will be displayed as code should (monospace, with line numbers if you want them), and will be highlighted according to the syntax of the language you chose.
We’ve received lots of requests from users hoping to include various services in their projects, or generally to include an iframe.
One note: the embed block is one of the few “you’re on your own” Blocks we offer. Some of the services we support do not work on mobile devices or may contain content that leads to a less-than-desired mobile experience. We recommend using our mobile previewer when using the Embed Block to check for mobile experiences. We always recommend using services that support responsive design and strong mobile experiences over those that don’t.
For security reasons, some embeds may not work off the bat. In those cases, it’s usually pretty easy for us to add support for them if you let us know!
To read more about the functionality of the embed block, visit our developer documentation here:https://github.com/Atavist/developer/wiki/How-The-Embed-Block-Works