diff --git a/README.md b/README.md
index 60a8818..670853a 100644
--- a/README.md
+++ b/README.md
@@ -105,6 +105,7 @@ Don't have a server? No problem! Here are beginner-friendly options to get your
- Markdown support for author notes and about page
- Optional icon-based navigation (comic navigation, header, and social links)
- Configurable logo and header/footer images
+- Shareable banner button with embeddable HTML code
- Mobile-responsive with optional mobile-specific comic images
- Full-width and plain (headerless) display modes
- JSON API for programmatic access
@@ -290,6 +291,7 @@ LOGO_IMAGE = 'logo.png' # Path to logo (relative to static/ima
LOGO_MODE = 'beside' # 'beside' or 'replace' title with logo
HEADER_IMAGE = None # Optional header image path
FOOTER_IMAGE = None # Optional footer image path
+BANNER_IMAGE = 'banner.jpg' # Shareable banner for "Link to Me" section
COMPACT_FOOTER = False # Display footer in compact mode
ARCHIVE_FULL_WIDTH = True # Full-width archive with 4 columns
USE_COMIC_NAV_ICONS = True # Use icons for comic navigation buttons
@@ -500,6 +502,28 @@ SOCIAL_YOUTUBE = 'https://youtube.com/@yourchannel'
SOCIAL_EMAIL = 'mailto:your@email.com'
```
+### Shareable Banner
+
+Sunday Comics includes an old-school shareable banner button in the footer that visitors can use to link back to your site. To enable it:
+
+1. Create a banner image (any size) and save it in `static/images/`
+2. Set the `BANNER_IMAGE` variable in `comics_data.py`:
+ ```python
+ BANNER_IMAGE = 'banner.jpg' # Your banner filename
+ ```
+3. Set to `None` to hide the "Link to Me" section entirely:
+ ```python
+ BANNER_IMAGE = None # Disables the shareable banner
+ ```
+
+When enabled, the banner appears in the footer with:
+- A preview of the banner image
+- A collapsible "Get code" section with copy-paste HTML
+- Fully keyboard accessible (Tab to navigate, Space/Enter to expand)
+- Automatic URL generation using your `SITE_URL` setting
+
+Visitors can click "Get code" to reveal embeddable HTML they can paste on their own websites, creating a link back to your comic. Perfect for webrings, link exchanges, and building community!
+
## Navigation
Sunday Comics provides multiple ways for readers to navigate through your comic:
diff --git a/app.py b/app.py
index ef89ecd..369b2b0 100644
--- a/app.py
+++ b/app.py
@@ -7,7 +7,7 @@ from datetime import datetime
from flask import Flask, render_template, abort, jsonify, request
from comics_data import (
COMICS, COMIC_NAME, SITE_URL, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, LOGO_IMAGE, LOGO_MODE,
- HEADER_IMAGE, FOOTER_IMAGE, COMPACT_FOOTER, ARCHIVE_FULL_WIDTH, SECTIONS_ENABLED,
+ HEADER_IMAGE, FOOTER_IMAGE, BANNER_IMAGE, COMPACT_FOOTER, ARCHIVE_FULL_WIDTH, SECTIONS_ENABLED,
USE_COMIC_NAV_ICONS, USE_HEADER_NAV_ICONS, USE_FOOTER_SOCIAL_ICONS, SOCIAL_INSTAGRAM,
SOCIAL_YOUTUBE, SOCIAL_EMAIL, API_SPEC_LINK
)
@@ -29,6 +29,7 @@ def inject_global_settings():
'logo_mode': LOGO_MODE,
'header_image': HEADER_IMAGE,
'footer_image': FOOTER_IMAGE,
+ 'banner_image': BANNER_IMAGE,
'compact_footer': COMPACT_FOOTER,
'archive_full_width': ARCHIVE_FULL_WIDTH,
'sections_enabled': SECTIONS_ENABLED,
diff --git a/comics_data.py b/comics_data.py
index b2ee673..8c8dc48 100644
--- a/comics_data.py
+++ b/comics_data.py
@@ -38,7 +38,12 @@ HEADER_IMAGE = None
# Global setting: Path to footer image (relative to static/images/)
# Set to None to disable footer image
# Example: FOOTER_IMAGE = 'footer.jpg' will use static/images/footer.jpg
-FOOTER_IMAGE = None # 'footer.jpg'
+FOOTER_IMAGE = None
+
+# Global setting: Path to shareable banner image (relative to static/images/)
+# Set to None to disable "Link to Us" section in footer
+# Example: BANNER_IMAGE = 'banner.jpg' will use static/images/banner.jpg
+BANNER_IMAGE = 'banner.jpg'
# Global setting: Set to True to display footer in compact mode
# Compact mode: single line, no border, horizontal layout
diff --git a/static/css/style.css b/static/css/style.css
index 3693d51..565519a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -837,6 +837,57 @@ footer {
color: var(--color-text-muted);
}
+.shareable-banner {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-sm);
+}
+
+.banner-image {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
+
+.banner-code {
+ font-size: var(--font-size-sm);
+}
+
+.banner-code summary {
+ cursor: pointer;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ letter-spacing: var(--letter-spacing-tight);
+ padding: var(--space-xs) 0;
+}
+
+.banner-code summary:hover {
+ color: var(--color-text);
+}
+
+.banner-code summary:focus {
+ outline: 3px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
+.banner-code textarea {
+ width: 100%;
+ font-family: var(--font-family);
+ font-size: var(--font-size-xs);
+ padding: var(--space-sm);
+ margin-top: var(--space-xs);
+ border: var(--border-width-thin) solid var(--border-color);
+ background-color: var(--color-background);
+ color: var(--color-text);
+ resize: vertical;
+ min-height: 60px;
+}
+
+.banner-code textarea:focus {
+ outline: 3px solid var(--color-primary);
+ outline-offset: 2px;
+}
+
.footer-bottom {
text-align: center;
padding-top: var(--space-lg);
diff --git a/static/images/banner.jpg b/static/images/banner.jpg
new file mode 100644
index 0000000..d5222f2
--- /dev/null
+++ b/static/images/banner.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:01e824a902f309274d5a540dd2a00aa925339f0a0914ba868cfdf35619d8372e
+size 4810
diff --git a/templates/base.html b/templates/base.html
index 0f61503..66c1ead 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -141,6 +141,21 @@
-->
Newsletter coming soon!
+
+ {% if banner_image %}
+
+ {% endif %}
 }})
+
+
+