🌐 Website Structure Overview

📁 File Structure

Cornwall-Wedding-Photography/
├── _includes/              # Reusable components
│   ├── picture.html       # Image include template
│   └── ...
├── _layouts/              # Page templates
│   ├── default.html       # Main layout
│   └── post.html         # Blog post layout
├── _posts/               # Blog articles
├── assets/               # Static assets
│   └── images/
│       ├── photos/       # Original JPG images
│       └── webp/         # Optimized WebP versions
├── pages/                # Main website pages
│   ├── index.md          # Homepage
│   ├── about.md          # About page
│   ├── portfolio.md      # Portfolio gallery
│   ├── contact.md        # Contact page
│   └── readme.md         # This guide
├── _config.yml           # Jekyll configuration
└── brand.css            # Custom brand styles

🎨 Brand Guidelines

Color Palette

Cornwall Navy

#0A1A2F

Cornwall Stone

#E8DFD8

Cornwall Sage

#8A9B8A

Cornwall Sand

#C9B7A1

Cornwall Blush

#D4A5A5

Usage Guidelines:

• Cornwall Navy: Headers, primary buttons, key accents
• Cornwall Stone: Backgrounds, subtle highlights
• Cornwall Sage: Secondary accents, borders
• Cornwall Blush: Call-to-action elements, highlights

Typography

Playfair Display (Headings)

Heading 1 - 36px

Heading 2 - 30px

Heading 3 - 24px (Sage)

Heading 4 - 20px

Inter (Body Text)

This is large body text (18px) using Inter font. Perfect for introductory paragraphs and key content.

This is regular body text (16px). The Inter font provides excellent readability while maintaining a modern, clean aesthetic.

This is small text (14px) used for captions, footnotes, and secondary information.

Why Choose Cornwall Wedding Photography?

🎨

Artistic Storytelling

We capture authentic moments that tell your unique love story with artistic flair and emotional depth.

⏱️

3-Week Delivery

Quick turnaround without compromising quality. See your beautiful memories in just three weeks.

💝

Heirloom Quality

Premium albums and prints designed to become family treasures for generations to come.

Sample Header H2 Our Premium Services

Text & Color Showcase

This is body text using Inter font with our brand colors. The combination of Playfair Display for headings and Inter for body text creates a perfect balance of elegance and readability.

Navy Background

Primary brand color - deep and trustworthy

Sage Accent

Earthy and calm - perfect for highlights

Blush Accent

Warm and romantic touch

Sand Neutral

Coastal and natural

Stone Base

Warm background tone

Our Approach

Authentic Storytelling: We capture real moments, not staged poses
Unobtrusive Presence: Like a fly on the wall during your special day
Coastal Expertise: Perfect knowledge of Cornwall's best light and locations
Premium Materials: Only the finest albums and print products
Personal Service: Dedicated consultation and planning sessions

Package Comparison

Feature	Essential	Premium	Luxury
Coverage Hours	6 hours	10 hours	Full day
Second Photographer	-	✓	✓
Premium Album	Digital only	20-page album	40-page heirloom
Engagement Session	-	✓	✓

Call to Action Examples

Tone of Voice

✅ Do:

✓ Warm and conversational
✓ Professional yet approachable
✓ Focus on emotions and feelings
✓ Use sensory language

❌ Avoid:

✗ Overly salesy or pushy language
✗ Wedding clichés and jargon
✗ Technical photography terms
✗ Heavy sarcasm or wit

📸 Image Management Guide

Folder Structure

assets/
├── images/
│   ├── photos/           # Original JPG images (optimized for web)
│   │   ├── cornwall-wedding-st-ives-001.jpg
│   │   ├── cornwall-wedding-tredudwell-001.jpg
│   │   └── ...
│   └── webp/            # Optimized WebP versions (same names)
│       ├── cornwall-wedding-st-ives-001.webp
│       ├── cornwall-wedding-tredudwell-001.webp
│       └── ...

Image Naming Convention

Use this format for all images:

cornwall-wedding-[venue]-[sequence].jpg

Example: cornwall-wedding-st-ives-001.jpg

Image Optimization

Convert JPG to WebP:

cwebp -q 85 input.jpg -o assets/images/webp/output.webp

Quality: 85%, Max width: 1920px for hero, 800px for portfolio

Adding Images to Portfolio

Image Template

<div class="portfolio-item group" 
     data-category="coastal venues golden-hour" 
     data-venue="St Ives Harbour Hotel">
  
  <div class="relative overflow-hidden rounded-2xl shadow-lg cursor-pointer h-96">
    
    



  
  
  
  
  

    
    <!-- Hover Overlay -->
    <div class="absolute inset-0 bg-gradient-to-t from-cornwall-navy/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    
    <!-- Hover Info Card -->
    <div class="absolute bottom-0 left-0 right-0 p-6 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
      <div class="flex items-center gap-2 mb-2">
        <span class="px-2 py-1 bg-cornwall-blush/80 text-white rounded text-xs font-medium">Golden Hour</span>
        <span class="px-2 py-1 bg-cornwall-sage/80 text-white rounded text-xs font-medium">Coastal</span>
      </div>
      <h3 class="font-serif text-xl mb-1">Venue Name</h3>
      <p class="text-sm opacity-90">Brief description of the moment</p>
    </div>
  </div>
</div>

Height Classes

Choose one height class:

h-96 (24rem) - Large feature images
h-80 (20rem) - Medium vertical
h-72 (18rem) - Medium horizontal
h-64 (16rem) - Small/square

Quick Reference

Element	What to Change	Example
Image file	`jpg_path` & `webp_path`	`"cornwall-wedding-venue-001.jpg"`
Categories	`data-category`	`"coastal venues golden-hour"`
Venue name	`data-venue` & hover card	`"St Ives Harbour Hotel"`
Alt text	`alt=""` attribute	Descriptive for SEO & accessibility

Filter System

How Filters Work

Each image has categories in data-category:

data-category="coastal venues golden-hour"

Filter buttons show/hide images based on matching categories.

Adding Filter Buttons

<button data-filter="ceremony" 
        class="portfolio-filter px-4 py-2 bg-white text-gray-700 rounded-full text-sm font-semibold hover:bg-cornwall-sage hover:text-white transition-colors">
  💒 Ceremony
</button>

Then add ceremony to relevant images' data-category.

Bulk Image Management

Create a YAML file to manage all images:

# portfolio-images.yml
images:
  - filename: "cornwall-wedding-st-ives-001.jpg"
    categories: ["coastal", "couples", "golden-hour"]
    venue: "St Ives Harbour Hotel"
    description: "Sunset embrace with sea backdrop"
    height: "h-96"
    badge: "🌅 Golden Hour"
    
  - filename: "cornwall-wedding-tredudwell-001.jpg"
    categories: ["venues", "details", "golden-hour"]
    venue: "Tredudwell Manor"
    description: "Historic country house details"
    height: "h-80"
    badge: "🏡 Manor House"

📝 Content Templates

Blog Post Template

Front Matter (Required at top of post)

---
layout: post
title: "Your Article Title"
date: 2024-01-15
image: "/images/your-image.jpg"  # Optional
excerpt: "A brief summary of your article"
category: "Wedding Tips"  # Optional
tags: ["cornwall", "venue", "planning"]  # Optional
---

Example Post Structure

Engaging Introduction

Start with a personal story or relatable scenario. Connect with the reader emotionally.

Subheading for Section

Break content into digestible sections. Use bullet points or numbered lists for clarity.

First important point
Second helpful tip
Third key takeaway

"Include testimonials or quotes to add credibility and personality."

Conclusion with CTA

End with a clear next step. Invite comments or questions.

Call to Action:

Ready to plan your Cornwall wedding? Get in touch to discuss your vision.

Page Structure Templates

Contact Page Essentials

• Simple contact form (name, email, message)
• Phone number prominently displayed
• Response time promise (24 hours)
• Coverage area mentioned
• FAQ section for common questions

About Page Structure

• Hero section with brand statement
• Team introduction (Mike & Rob)
• Philosophy and approach
• Cornwall expertise section
• Venue showcase
• Strong CTA to contact/book

⚙️ Technical Guide

Running the Website

Development Commands

Local Development:

bundle exec jekyll serve --livereload

Production Build:

bundle exec jekyll build

With Drafts:

bundle exec jekyll serve --drafts

Git command to force changes to Github pages git tag -f publish git push origin publish --force

Quick Setup

1 Install Ruby and Bundler
2 Run bundle install
3 Start server with bundle exec jekyll serve
4 Visit http://localhost:4000

Tailwind CSS Guide

Common Utilities

p-4 = padding 1rem
m-4 = margin 1rem
mx-auto = center horizontally
text-center = center text
rounded-lg = large border radius

Responsive Prefixes

sm: = small screens (640px+)
md: = medium screens (768px+)
lg: = large screens (1024px+)
xl: = extra large (1280px+)
2xl: = 2x large (1536px+)

Pro Tip: Use container mx-auto px-4 for centered content containers. Check the Tailwind Docs for complete reference.

SEO & Best Practices

Image SEO

✓ Use descriptive alt text with location keywords
✓ Include venue names in image metadata
✓ Optimize file names: cornwall-wedding-venue.jpg
✓ Use WebP format for faster loading

Content SEO

✓ Include "Cornwall wedding photography" in page titles
✓ Use H1, H2, H3 headings properly
✓ Mention specific venues and locations
✓ Write unique meta descriptions for each page

Need Help?

This guide should cover everything you need to manage the website. For additional support or questions about the technical setup, refer to the documentation.

Quick Links

Jekyll Documentation Tailwind CSS Docs View Live Portfolio

Last updated: January 16, 2026
Cornwall Wedding Photography • Mike & Rob

📊 Google Analytics Setup

Configuration

Tracking ID Location

The Google Analytics tracking code is configured in:

_includes/analytics.html

This file is included in every page via the main layout template.

Google Analytics 4 (GA4)

Current setup uses GA4 measurement ID format:

G-XXXXXXXXXX

Replace with your actual measurement ID when deploying.

Current Implementation

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  
  gtag('config', 'G-XXXXXXXXXX'); // Replace with your GA4 measurement ID
  
  // Optional: Enhanced measurement
  gtag('config', 'G-XXXXXXXXXX', {
    'send_page_view': true
  });
</script>

Accessing Analytics Data

Dashboard Access

1 Visit analytics.google.com
2 Sign in with Google account
3 Select "Cornwall Wedding Photography" property
4 Navigate to "Reports" section

Key Metrics to Monitor

• Users: Number of unique visitors
• Sessions: Individual visits to the site
• Pageviews: Most viewed pages
• Bounce Rate: Single-page visits
• Traffic Sources: Where visitors come from

Custom Events & Goals

Contact Form Submissions

Track when visitors submit the contact form:

// Example event tracking for form submission
document.getElementById('contact-form').addEventListener('submit', function() {
  gtag('event', 'contact_form_submit', {
    'event_category': 'engagement',
    'event_label': 'contact_page'
  });
});

Portfolio Interactions

Track image clicks and filter usage:

// Track portfolio image clicks
document.querySelectorAll('.portfolio-item').forEach(item => {
  item.addEventListener('click', function() {
    const venue = this.dataset.venue;
    gtag('event', 'portfolio_image_click', {
      'event_category': 'engagement',
      'event_label': venue,
      'venue': venue
    });
  });
});

// Track filter usage
document.querySelectorAll('.portfolio-filter').forEach(button => {
  button.addEventListener('click', function() {
    const filter = this.dataset.filter;
    gtag('event', 'portfolio_filter', {
      'event_category': 'interaction',
      'event_label': filter
    });
  });
});

Setup Checklist

GA4 measurement ID added to analytics.html

Analytics include file added to layout

Real-time tracking verified

Custom events configured (optional)

Conversion goals set up in GA dashboard

Troubleshooting

❌ No data appearing?

Check GA4 measurement ID is correct
Verify analytics.html is included
Wait 24-48 hours for initial data

❌ Real-time not working?

Clear browser cache
Test in incognito mode
Check browser extensions aren't blocking

Cornwall Wedding Photography