How do I add an image gallery or slideshow to an article?

An image gallery or slideshow can be added to an article using the Default TypeEngine 3.3 template and adding some HTML to your article. It can also be added to your own customized template with a few tweaks.

Default TypeEngine 3.3 Template
Here's how to use the Default TypeEngine 3.3 template:
  1. In an article, click Details tab
  2. In the Assign Template drop-down, select the Default TypeEngine 3.3 template
  3. Click Save Details
  4. Click onto Assets tab
  5. Upload four images
  6. Click onto Article tab
  7. Copy and paste the following HTML in your article:
<div class="gallery js-flickity”> 
     <div class="gallery-cell" style="background: url('image1.jpg')"></div>
     <div class="gallery-cell" style="background: url('image2.jpg')"></div>
     <div class="gallery-cell" style="background: url('image3.jpg')"></div>
     <div class="gallery-cell" style="background: url('image4.jpg')"></div>
</div>
  1. Replace the url() references with the file names of the four images you uploaded
  2. Click Save Draft or Ready to Publish
Be sure to preview your changes in the TypeEngine Preview App.

Your Customized Template
If you want to use your own customized template, there are a few more steps.

Here's how to set up your template correctly:
  1. Add Flickity JS Library to your template - click here to download files from Flickity

  1. Add the following code to your style.css
/* ------ 14. Slideshows ------ */
.gallery {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background: black;
   overflow: hidden;
   width: 100vw;
   height: 600px;
   margin: 48px 0 48px -3.4rem; }
/* Web-reader styles */
@media (min-width: 1025px) {
  .gallery {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background: black;
   overflow: hidden;
   width: calc(100%);
   height: 600px;
   margin: 48px auto; }
}
/* Devices between 480px and 768px wide */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .gallery {
   margin-left: -2rem;
   width: 100vw;
   height: 400px; }
}  
/* Devices smaller than 480px */
@media only screen and (min-width: 1px) and (max-width: 479px) {
  .gallery {
   margin-left: -1.2rem;
   width: 100vw;  
   height: 300px; }
}

.gallery-cell {
   width: 100%;
   height: 100%;
   background-position: center center !important;
   background-size: cover !important;
   display: flex;
   align-items: center;
   justify-content: center;}
.gallery-cell p {
   background: rgba(0,0,0,0.5);
   width: calc(100% - 1.4rem);  
   text-align: center;
   font-family: Lato, sans-serif;
   color: white;
   padding: 0.7rem;
   bottom: 0;
   left: 0;
   margin: 0;
   display: block;
   position: absolute;
   font-size: 0.60rem; }
   
.gallery img {
   display: block;
   margin: 0 auto;
   max-width: 100%;
   max-height: 100%; }



@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  /* Retina CSS */
 }


  1. Add the following code to your index.html file 
<script src='assets/js/flickity.pkgd.min.js'></script>
  <link rel='stylesheet' href='assets/css/flickity.min.css'>
  <link rel='stylesheet' href='assets/css/reset.css'>

  1. In an article, click Details tab
  2. In the Assign Template drop-down, select your customized template
  3. Click Save Details
  4. Click onto Assets tab
  5. Upload four images
  6. Click onto Article tab
  7. Copy and paste the following HTML in your article:
<div class="gallery js-flickity”> 
     <div class="gallery-cell" style="background: url('image1.jpg')"></div>
     <div class="gallery-cell" style="background: url('image2.jpg')"></div>
     <div class="gallery-cell" style="background: url('image3.jpg')"></div>
     <div class="gallery-cell" style="background: url('image4.jpg')"></div>
</div>
  1. Replace the url() references with the file names of the four images you uploaded
  2. Click Save Draft or Ready to Publish
Be sure to preview your changes in the TypeEngine Preview App. 

Creating Your Publication

  1. Do you have a sample workflow for creating a TypeEngine publication?
  2. What's the deal with the About Issue?
  3. How do I add my design to my publication?
  4. How much creative control do I have over the appearance of my app?
  5. How do I create an article?
  6. How do I create an issue?
  7. How do I publish an issue?
  8. What is Markdown?
  9. How do I apply CSS to a specific article?
  10. How do I add or remove images, audio or other assets to my article?
  11. How do I add an advertisement to an article?
  12. How do I assign a template and metadata to my article?
  13. How do I create a new author or assign an existing author to an article?
  14. How do I create a privacy policy? What should be included?
  15. How do I embed video? Which Vimeo or YouTube link should I use?
  16. How do I add an image gallery or slideshow to an article?
  17. Can I create more than one publication with my TypeEngine account?
  18. How do I embed the Subscribe button?
  19. What incentives can I offer my readers?
  20. How do I set up links to open in an external browser?
  21. How do I set up web log in for WordPress?
  22. How do I offer an issue for free?
  23. How do I set up Article-to-Article links?
  24. Can I use Typekit, Google Web Fonts, or another hosted webfont service with TypeEngine?
  25. Can I upload a PDF so its pages display inside my publication?
  26. Will my app styling appear the same across the iOS, Android and web platforms?
  27. What tracking and marketing platforms does TypeEngine work with?
  28. From outside my app, how can I open my app using a link?
  29. How do I use custom fonts?

Feedback and Knowledge Base