A fast, AJAX-driven theme for Ghost that can be navigated end-to-end without reloading the page. HomeBase has no frontend library dependencies besides the Ghost Public API.
- Media Carousel w/ support for images, videos & iframe. Automatically generated for all posts.
- Responsive layout w/ flexbox
- SEO-friendly URL structure
- AMP support
- Download theme .zip file. Navigate to Settings → General in the Ghost admin panel and upload.
- Navigate to Settings → Labs and check the green box next to Public API
The media carousel is included by default in
functions.min.js
. If you do not want to modify the carousel's default behavior, then stop reading!
Every time a visitor clicks the thumbnail post or page, an Ajax request is made to the Ghost API. The request returns an HTML string that is copied by both the Layout and Carousel
object. The Carousel
object parses the HTML response, looking for every img
, video
, figure
or iframe
that is a direct descendant of the parent selector, .active-post-body
.
Carousel
was inspired by Dropbox Paper and works with all media - including embedded videos (i.e. YouTube or Vimeo) and external image links.Carousel
is made visible when a visitor clicks on any media within the post (allimg,
video,
figure
andiframe
tags have thecursor: zoom-in
property to convey a clickable region to visitors).
To modify the Carousel's default behavior, insert this snippet after functions.min.js
has loaded:
<script>
Carousel.options({
// default options...
items: ['img', 'video', 'figure', 'iframe', 'embed'],
swipe: 'on',
verticalOrient: 'contained'
});
</script>
init: '.MY_SELECTOR'
Initialize carousel using a specified selector or tag. Default behavior is to initialize whenever a click
event is fired on a selector in the items
array.
items: ['img', 'video', 'figure', 'iframe', '.carousel-item', '.MY_SELECTOR' ...]
Modify list of parent tags and/or selectors that you want to include inside carousel.
swipe: 'off' // default 'on'
Hide arrows and turn off left-right swiping.
verticalOrient: 'full' // default 'contained'
Enable up-down scroll on images with vertical orientation. Note: on desktop browsers, a vertical scrollbar (e.g. overflow-y: scroll
) will display beside oversized <img>
, <iframe>
etc. inside the carousel.