Standard project Photo book structure. Chapters. Pages. Layout. Rhythm and flow. Start See how it's done
How it's done Project guidelines: Use <main> element to define inner pages Create photo page with <img> element Create textual page with <article> element For diptych page, wrap images with <figure> element Use 'layout' attribute to set diptych items spacing Use 'transition' attribute to set incoming page transition Use 'self' attribute to set inner page size (width) Other: Use <aside> element to define sidebar Use <nav> element to create navigation menu Use 'subitem' attribute to define drop-down menu item View source code
More examples Portraits Example of presenting portraits photo project with Foliodot template. Photo essay Your take on the world. Your own voice through your photographs. Tell the story. Creative layout Explore your ideas, your visual language, show the narrative aspects of your artwork. Standard photobook Define structure, create chapters, set the layout, rhythm and flow of your story. Basic slideshow Use foliodot to create simple photo slideshow using minimal html markup. More guides Single photo layout See photo layout examples and learn how to set layout using minimal html markup. Diptych layout Diptych layout examples with preview samples and ready to copy/paste markup snippets. Transitions Preview predefined transitions you can use right out of the box in your project. Thumbnails Explore thumbnails options, set your values, see live preview and copy configuration object. Sidebar Explore sidebar options. Try this demo with live preview.
More examples Portraits Example of presenting portraits photo project with Foliodot template. Photo essay Your take on the world. Your own voice through your photographs. Tell the story. Creative layout Explore your ideas, your visual language, show the narrative aspects of your artwork. Standard photobook Define structure, create chapters, set the layout, rhythm and flow of your story. Basic slideshow Use foliodot to create simple photo slideshow using minimal html markup.
More guides Single photo layout See photo layout examples and learn how to set layout using minimal html markup. Diptych layout Diptych layout examples with preview samples and ready to copy/paste markup snippets. Transitions Preview predefined transitions you can use right out of the box in your project. Thumbnails Explore thumbnails options, set your values, see live preview and copy configuration object. Sidebar Explore sidebar options. Try this demo with live preview.