Skip to content

Commit 75b6f34

Browse files
neural-loopneural-loop
committed
feat: og-image: Enhance OG image generation
Adds YouTube thumbnail template and improves event OG images.
1 parent a6828af commit 75b6f34

File tree

5 files changed

+326
-65
lines changed

5 files changed

+326
-65
lines changed

‎assets/og-template/event-template.html

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@
5252
margin-right: 3vmin;
5353
}
5454
.logo-text {
55-
font-family: "Roboto Slab", serif;
55+
font-family: "Inter", sans-serif;
5656
font-size: 6vmin;
5757
line-height: 1.1;
58-
font-weight: 700;
58+
font-weight: 800;
5959
color: #1f2937;
6060
}
6161
.main-content {
@@ -105,12 +105,12 @@
105105
flex-shrink: 0;
106106
}
107107
.speaker-name {
108-
font-size: clamp(18px, 3.2vmin, 28px);
109-
font-weight: 500;
110-
color: #374151;
111-
line-height: 1.2;
112-
max-width: 100%;
113-
word-wrap: break-word;
108+
font-size: clamp(18px, 3.2vmin, 28px);
109+
font-weight: 500;
110+
color: #374151;
111+
line-height: 1.2;
112+
max-width: 100%;
113+
word-wrap: break-word;
114114
}
115115
.event-details {
116116
font-size: clamp(28px, 5.5vmin, 55px);
@@ -120,8 +120,8 @@
120120
font-weight: 500;
121121
}
122122
.event-date {
123-
font-weight: 700;
124-
color: #667eea;
123+
font-weight: 700;
124+
color: #667eea;
125125
}
126126
.footer {
127127
font-size: clamp(20px, 4vmin, 40px);

‎assets/og-template/template.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<title>OG Image</title>
66
<link
7-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
7+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Slab:wght@700&display=swap"
88
rel="stylesheet"
99
/>
1010
<style>
@@ -61,6 +61,7 @@
6161
margin-right: 3vmin;
6262
}
6363
.logo-text {
64+
font-family: "Inter", sans-serif;
6465
font-size: 7vmin;
6566
line-height: 1.1;
6667
font-weight: 700;

‎assets/og-template/youtube-thumbnail-template.html

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>YouTube Thumbnail</title>
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=Roboto+Slab:wght@700&display=swap"
8+
rel="stylesheet"
9+
/>
10+
<style>
11+
body {
12+
margin: 0;
13+
padding: 0;
14+
font-family: "Inter", Arial, sans-serif;
15+
width: 1280px;
16+
height: 720px;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
background-color: #f9fafb;
21+
}
22+
.canvas {
23+
position: relative;
24+
width: 100%;
25+
height: 100%;
26+
background-color: #f9fafb;
27+
overflow: hidden;
28+
display: flex;
29+
flex-direction: column;
30+
box-sizing: border-box;
31+
padding: 50px;
32+
justify-content: space-between;
33+
}
34+
.background {
35+
position: absolute;
36+
z-index: 1;
37+
opacity: 0.15;
38+
width: 120%;
39+
height: auto;
40+
right: -15%;
41+
bottom: -15%;
42+
transform: rotate(-15deg);
43+
}
44+
.header {
45+
display: flex;
46+
align-items: center;
47+
justify-content: flex-start;
48+
flex-shrink: 0;
49+
}
50+
.logo {
51+
height: 80px;
52+
width: auto;
53+
margin-right: 20px;
54+
}
55+
.logo-text {
56+
font-family: "Inter", sans-serif;
57+
font-size: 52px;
58+
line-height: 1.1;
59+
font-weight: 800;
60+
color: #1f2937;
61+
}
62+
.main-content {
63+
flex-grow: 1;
64+
display: flex;
65+
flex-direction: column;
66+
justify-content: center;
67+
text-align: left;
68+
padding: 0 20px;
69+
}
70+
.title {
71+
font-size: 68px;
72+
font-weight: 800;
73+
line-height: 1.2;
74+
color: #1f2937;
75+
margin: 0;
76+
display: -webkit-box;
77+
-webkit-line-clamp: 4;
78+
-webkit-box-orient: vertical;
79+
overflow: hidden;
80+
}
81+
.footer {
82+
display: flex;
83+
flex-direction: column;
84+
align-items: center;
85+
gap: 15px;
86+
width: 100%;
87+
flex-shrink: 0;
88+
}
89+
.speakers-section {
90+
display: flex;
91+
align-items: flex-end;
92+
justify-content: center;
93+
gap: 25px;
94+
width: 100%;
95+
}
96+
.speakers-container {
97+
display: flex;
98+
align-items: flex-end;
99+
gap: 25px;
100+
}
101+
.speaker-item {
102+
display: flex;
103+
flex-direction: column;
104+
align-items: center;
105+
justify-content: flex-end; /* Pushes content to the bottom */
106+
height: 230px; /* Fixed height to ensure vertical alignment */
107+
}
108+
.speaker-img {
109+
border-radius: 50%;
110+
object-fit: cover;
111+
border: 6px solid white;
112+
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
113+
flex-shrink: 0;
114+
}
115+
.speaker-name {
116+
font-weight: 500;
117+
color: #374151;
118+
text-align: center;
119+
width: 100%;
120+
height: 55px; /* Fixed height for up to 2 lines of text */
121+
line-height: 1.2;
122+
margin-top: 10px;
123+
display: -webkit-box;
124+
-webkit-line-clamp: 2;
125+
-webkit-box-orient: vertical;
126+
overflow: hidden;
127+
}
128+
.speakers-without-photos {
129+
display: flex;
130+
flex-direction: column;
131+
align-items: flex-start;
132+
justify-content: flex-end;
133+
height: 230px; /* Match height of speaker-item */
134+
padding-bottom: 15px; /* Align text better */
135+
}
136+
.other-speakers-title {
137+
font-size: 20px;
138+
font-weight: 700;
139+
color: #374151;
140+
margin: 0 0 5px 0;
141+
}
142+
.other-speakers-list {
143+
font-size: 18px;
144+
font-weight: 500;
145+
color: #4b5563;
146+
padding: 0;
147+
margin: 0;
148+
list-style: none;
149+
}
150+
.site-url {
151+
font-size: 28px;
152+
font-weight: 500;
153+
color: #667eea;
154+
width: 100%;
155+
text-align: center;
156+
}
157+
</style>
158+
</head>
159+
<body>
160+
<div class="canvas">
161+
<img src="BACKGROUND_URL" class="background" alt="" />
162+
163+
<div class="header">
164+
<img src="LOGO_SRC" alt="Logo" class="logo" />
165+
<div class="logo-text">Open Neuromorphic</div>
166+
</div>
167+
168+
<div class="main-content">
169+
<h1 class="title">PAGE_TITLE</h1>
170+
</div>
171+
172+
<div class="footer">
173+
<div class="speakers-section">
174+
<!-- SPEAKERS_HTML will be injected here -->
175+
</div>
176+
<div class="site-url">open-neuromorphic.org</div>
177+
</div>
178+
179+
</div>
180+
</body>
181+
</html>

0 commit comments

Comments
 (0)