How to create proper ZIP Files

Mobile Locker requires a specific file structure for presentations to work correctly. This guide explains how to organize your files before zipping them.

Quick Requirements Checklist

✅ `index.htmlmust be at the root level of the ZIP file
✅ Include a presentation.png thumbnail (260x120 pixels) at the root level
✅ Use relative paths for all resources (CSS, images, JavaScript)
✅ Test your file structure before uploading

Correct Folder Structure

Your ZIP file should look like this:

your-presentation.zip
├── index.html          ← Main HTML file at root level
├── presentation.png    ← Thumbnail image (260x120px)
├── css/
│   └── styles.css
├── js/
│   └── app.js
├── images/
│   └── photo.jpg
└── assets/
    └── other-files...

Correct: index.html should be at the top or root of the zip file. — Correct: `index.html` should be at the top or root of the zip file.

Incorrect Folder Structure

Avoid nesting your main files in subdirectories:

your-presentation.zip
└── public/             ← ❌ Do not put files in subdirectories
    ├── index.html      ← ❌ This will not work automatically
    ├── presentation.png
    └── other-files...

Incorrect: index.html should not be in a subdirectory. — ❌ Incorrect: `index.html` is nested in a "public" subdirectory.

Alternative: Custom Main File Path

If you must keep index.html in a subdirectory, you can manually specify the path:

Upload your presentation
Edit the presentation settings
Update the Main file attribute to your custom path (e.g., public/index.html)

If you can't put index.html at the root of the zip file, you'll have to set the Main file attribute on the presentatino. — Note: Using the root-level structure is strongly recommended to avoid configuration issues.

Always use relative paths when referencing resources in your HTML:

<!-- ✅ Correct relative paths -->
<link rel="stylesheet" href="css/styles.css">
<script src="js/app.js"></script>
<img src="images/photo.jpg" alt="Description">

<!-- ❌ Avoid absolute paths -->
<link rel="stylesheet" href="/css/styles.css">
<img src="http://example.com/images/photo.jpg" alt="Description">

For more details, see our HTML Programming Guidelines.

You should always reference images, CSS, and other resources using relative paths to where the HTML file is. Read Use Relative Paths for resources.

Thumbnail Requirements

Include a thumbnail image for your presentation:

Filename: presentation.png
Dimensions: 260×120 pixels
Location: Root level of the ZIP file (same folder as index.html)

The thumbnail will be automatically detected and used in the presentation library. You can change it later through the presentation settings, but including presentation.png initially saves time.

Common Issues and Solutions

Issue: Presentation won't load

Solution:

Verify that index.html is at the root level of your ZIP file.

Issue: Resources (CSS/images) not loading

Solution

Check that all file paths are relative and match your actual file structure.

No thumbnails appear

Solution

Ensure presentation.png is exactly 260×120 pixels and located at the root level.

Step-by-Step ZIP Creation

On Windows:

Place all files in a folder with index.html at the top level
Select all files and folders (not the parent folder)
Right-click and choose "Send to" → "Compressed folder"

On Mac:

Place all files in a folder with index.html at the top level
Select all files and folders (not the parent folder)
Right-click and choose "Compress items"

Using Command Line:

# Navigate to your project folder
cd /path/to/your/presentation

# Create ZIP file (this will include all files at root level)
zip -r presentation.zip . -x "*.DS_Store" "*.git*"

Need Help?

If you're still having issues with your ZIP file structure, contact support with a sample of your ZIP file structure or the presentation's ID from the URL