Photo page layout Single photo + Placement + Size + Fit with simplest html markup ever. Start guide See how it's done
View example Photo placement towards the left edge of browser window: <img src="photo.jpg" self="left"/>
View example Photo placement towards the top edge of browser window: <img src="photo.jpg" self="top"/>
View example Photo placement towards the bottom and right edges of browser window: <img src="photo.jpg" self="bottom right"/>
View example Photo size is half of the size of the browser window: <img src="photo.jpg" self="size-1of2"/>
View example Photo size is third of the size of the browser window: <img src="photo.jpg" self="size-1of3"/>
View example Photo size is quarter of the size of the browser window: <img src="photo.jpg" self="size-1of4"/>
View example Photo covers the right half of the screen: <img src="photo.jpg" self="size-1of2 right" fit="cover"/>
View example Photo (from the right) covers the left third of the screen : <img src="photo.jpg" self="size-1of3 left" fit="cover right"/>
View example Photo placed to the right covers two thirds of the screen: <img src="photo.jpg" self="size-2of3 right" fit="cover"/>
View example Photo covers the left half of the screen: <img src="photo.jpg" self="size-1of2 left" fit="cover"/>
View example Photo (from the right) covers the right half of the screen: <img src="photo.jpg" self="size-1of2 right" fit="cover right"/>
View example Photo (from the left) covers the right half of the screen: <img src="photo.jpg" self="size-1of2 right" fit="cover left"/>
How it's done? Single photo page guidelines: Create photo pages with <img> element Use 'self' attribute to size photo Use 'self' attribute attribute for photo placement Use 'fit' attribute to set photo fitting Play on CodePen
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.