Cornwall Wedding Photography

Website Management & Brand Guide

Brand Guidelines Image Management Content Templates Technical Guide

🌐 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.

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

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.

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

📸 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

Quick Setup

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

Git Deployment

Deploy to GitHub Pages (Triggers Azure DevOps):

git tag -f publish git push origin publish --force

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 Architecture Guide

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

🧠 How Everything Works Now (The Mental Model)

Think of your site in four layers, from global → specific:

🌐

SITE IDENTITY

└── schema-business.html

🏷️

PAGE METADATA

└── seo.html

🎯

PAGE TYPE (INTENT)

└── layouts (default, location, post, etc.)

📄

PAGE CONTENT

└── markdown + YAML data

✨ Each layer has one responsibility. That's why this works so cleanly.

📄 What happens on a "normal" page (About, Portfolio, etc.)

Let's take an example: `about.md`

---
title: About Cornwall Wedding Photography
description: A relaxed, documentary approach to photographing weddings across Cornwall.
layout: page
permalink: /about/
---

1️⃣ head.html loads

{% include seo.html %}
{% include schema-business.html %}

2️⃣ seo.html resolves values

seo_title → page.seo_title OR page.title OR site.title

seo_description → page.seo_description OR page.description OR site.description

So for About:

• <title> → About Cornwall Wedding Photography
• meta description → your description
• canonical → /about/
• OG & Twitter → same values

✨ No duplication. No guessing.

3️⃣ Schema output

schema-business.html runs once

Google sees: One consistent business entity referenced by every page

✅ This is exactly what Google wants.

4️⃣

Homepage specifically (important clarification)

Your homepage is doing something very smart:

SEO signals

<title>:

Cornwall Wedding Photographer | Relaxed, Story-Led Photography

<h1>:

Emotional, human, not keyword-stuffed

Why this is correct

✓ Google does not require H1 to repeat title
✓ This separation helps:

Title

= intent & relevance

= emotional hook & UX

Your supporting copy naturally reinforces:

Cornwall wedding photography documentary candid locations

✅ That's the right way to do it.

5️⃣

How the St Ives location page works (step by step)

This is the most important part, so I'll go slowly.

Step 1: `st-ives.md`

---
layout: location
slug: st-ives
title: St Ives Wedding Photography
description: Relaxed, candid wedding photography in St Ives, Cornwall.
---

This file does almost nothing — and that's intentional.

Its job is to:

🎯 declare intent (this is a location page)
🔗 provide a slug to look up data

Step 2: `seo.html` on St Ives

Because this page has: slug: st-ives

{% assign location = site.data.locations | where: "slug", page.slug | first %}

If your locations.yml contains:

- slug: st-ives
  seo:
    title: St Ives Wedding Photographer
    description: Relaxed, candid wedding photography in St Ives, Cornwall.

Then:

→ <title> → location.seo.title

→ meta description → location.seo.description

→ OG image → location.hero_image

✨ No hardcoding. No duplication.

Step 3: Layout = intent

Because layout: location:

• The page is a location entity
• The content is geographically specific
• The copy reinforces real experience

Google sees: Unique URL + Unique intent + Unique content + Real photography

✅ That's local SEO done properly.

Step 4: Visual + semantic alignment

Your location layout does something very important:

→ Title tag

→ H1

→ Hero copy

→ Schema

→ Image alt text

✨ All align around the same place. That consistency is gold.

6️⃣

Why this scales beautifully

When you add:

falmouth.md padstow.md newquay.md

You only need to:

📝

Add one YAML entry

📄

Add one markdown file

📸

Add real photos when you have them

✨ Everything else just works:

SEO schema hero images headings internal consistency

✅ That's the biggest win here.

7️⃣

Optional (future) enhancements — not required now

Just so you know what's possible later:

🔹 Add Place schema to location pages

A future _includes/schema-location.html could emit:

AdministrativeArea (town)
linked to your business via provider

But this is optional — what you have already is enough.

🔹 Breadcrumb schema

Especially nice for:

Home → Locations → St Ives

Again: optional.

🏆 Final Verdict

✔ Code: solid

✔ SEO architecture: excellent

✔ Homepage content: on-brand and search-aware

✔ Location strategy: sustainable and authentic

You've built a system that:

• won't fight you
• won't rot over time
• rewards real photography and experience

✨ That's exactly how this should be done.

If you want next, I'd suggest one of these:

📰

Add Article schema to blog posts

🔗

Create internal linking between locations

📊

Review Search Console expectations

But honestly — you're in a very strong place now. 👏

📊 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

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: May 28, 2026
Cornwall Wedding Photography • Mike & Rob