Skip to main content

Image Guidelines for Bible Guide Site

This guide explains how to add and use images throughout the Bible Guide site.

📁 Where to Store Images​

All images should be placed in the /static/img/ directory. The structure is:

static/
├── img/
│   ├── books/          # Book-related images (covers, illustrations)
│   ├── maps/           # Biblical maps and geographic content
│   ├── timelines/      # Historical timeline graphics
│   ├── diagrams/       # Study diagrams and charts
│   └── general/        # General site images

🖼️ Using Images in Markdown​

Basic Image Syntax​

![Alt text description](/img/folder/filename.jpg)

Image with Title​

![The Garden of Eden](/img/books/genesis-creation.jpg "Creation narrative in Genesis")

Responsive Images​

For better mobile experience, use HTML with responsive classes:

<img
  src="/img/books/genesis-creation.jpg"
  alt="The Garden of Eden"
  style={{maxWidth: '100%', height: 'auto'}}
/>

📐 Recommended Image Specifications​

File Formats​

  • Photos/Complex images: JPG (optimized for web, 80-90% quality)
  • Graphics/Diagrams: PNG (for transparency or sharp lines)
  • Simple graphics: SVG (scalable, smallest file size)
  • Animations: WebP or GIF (use sparingly)

Image Dimensions​

  • Hero images: 1920×1080px (16:9 ratio)
  • Feature cards: 800×600px (4:3 ratio)
  • Book covers: 400×600px (2:3 ratio)
  • Maps: 1200×800px minimum
  • Diagrams: 1000×700px typical
  • Thumbnails: 300×200px

File Size Guidelines​

  • Keep individual images under 500KB when possible
  • Optimize images before uploading using tools like:

🎨 Using Images in MDX Components​

Import and Display​

import useBaseUrl from '@docusaurus/useBaseUrl';

<img
  src={useBaseUrl('/img/books/genesis-creation.jpg')}
  alt="Creation narrative"
  style={{borderRadius: '8px', marginBottom: '1rem'}}
/>

Image with Caption​

<figure style={{textAlign: 'center'}}>
  <img
    src={useBaseUrl('/img/maps/ancient-israel.jpg')}
    alt="Map of Ancient Israel"
    style={{maxWidth: '100%', borderRadius: '8px'}}
  />
  <figcaption style={{
    marginTop: '0.5rem',
    fontSize: '0.875rem',
    color: 'var(--ifm-color-emphasis-600)'
  }}>
    Ancient Israel during the United Monarchy (1050-930 BC)
  </figcaption>
</figure>

📚 Examples for Bible Guide Content​

Book Overview Images​

Add a representative image to book overview pages:

---
id: 01-genesis
title: Genesis
---

![Genesis Overview](/img/books/genesis-overview.jpg)

# Genesis

<BookMetadataCard bookPath="/old-testament/01-genesis" />

Timeline Images​

## Historical Timeline

![Old Testament Timeline](/img/timelines/old-testament-timeline.png)

Map References​

## Geographic Context

The book of Joshua describes the conquest of Canaan:

![Map of Canaan](/img/maps/canaan-conquest.jpg "Conquest of Canaan under Joshua")

Study Diagrams​

## The Tabernacle Structure

![Tabernacle Diagram](/img/diagrams/tabernacle-structure.svg)

The Tabernacle had three main sections...

Public Domain Resources​

  • Images created before 1928 (in US public domain)
  • Works explicitly released to public domain
  • Your own original artwork or photography

Creative Commons​

When using CC-licensed images:

  • Always check the specific license (CC0, CC-BY, CC-BY-SA, etc.)
  • Provide attribution when required
  • Follow share-alike requirements if applicable

Attribution Format​

When attribution is required, add it below the image:

![Ancient manuscript](/img/general/ancient-manuscript.jpg)

*Photo by [Photographer Name](link) / [License](license-link)*

🎯 Best Practices​

Accessibility​

  • Always include alt text that describes the image content
  • Alt text should be descriptive for screen readers
  • Decorative images can use empty alt: alt=""

Performance​

  • Optimize images before uploading
  • Use appropriate image dimensions (don't upload 5MB originals)
  • Consider lazy loading for image-heavy pages
  • Use modern formats (WebP) with JPG/PNG fallbacks

Mobile Considerations​

  • Test images on mobile devices
  • Ensure text in images is readable on small screens
  • Consider providing mobile-optimized versions for large images

Dark Mode​

  • Test images in both light and dark themes
  • Consider providing theme-specific versions if needed:
import useBaseUrl from '@docusaurus/useBaseUrl';
import {useColorMode} from '@docusaurus/theme-common';

const {colorMode} = useColorMode();
const imageSrc = colorMode === 'dark'
  ? '/img/diagram-dark.png'
  : '/img/diagram-light.png';

<img src={useBaseUrl(imageSrc)} alt="Diagram" />

📝 Image Naming Conventions​

Use clear, descriptive filenames:

✅ Good:
- genesis-creation-narrative.jpg
- exodus-route-map.png
- tabernacle-diagram.svg
- david-timeline.jpg

❌ Avoid:
- img001.jpg
- photo.png
- screenshot.jpg
- image-final-final-v2.jpg

🔧 Adding Images to Components​

Homepage Hero Background​

To add a hero background image:

/* In styles.module.css */
.hero {
  background-image: url('/img/backgrounds/hero-bible.jpg');
  background-size: cover;
  background-position: center;
}

Feature Card Icons​

Replace emoji icons with custom images:

<div className={styles.featureIcon}>
  <img
    src={useBaseUrl('/img/icons/study-bible.svg')}
    alt=""
    width="56"
    height="56"
  />
</div>

📖 Resources​

Remember: Always ensure you have the right to use any images you add to the site. When in doubt, create your own or use verified public domain sources.