`.
They can be used to tackle a small problem like the share button or to build an entire platform like YouTube.
```html
...
```
Real example of a YouTube custom web component
And, they're picking up steam 🚂
#### Custom Web Component Resources
- [Awesome Standalones](https://github.com/davatron5000/awesome-standalones?tab=readme-ov-file&ref=ryanfeigenbaum.com) \- Dave Rupert
- [The Good, The Bad, and The Web Components](https://www.youtube.com/watch?v=R4Ri4ft7bXY&ref=ryanfeigenbaum.com) \- Zach Leatherman
- [If Web Components are so great, why am I not using them?](https://daverupert.com/2023/07/why-not-webcomponents/?ref=ryanfeigenbaum.com) \- Dave Rupert
- [Learn Web Components](https://www.youtube.com/watch?v=2I7uX8m0Ta0&ref=ryanfeigenbaum.com) \- Web Dev Simplified \[Video\]
- [Using Web Components for What They're Good At](https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/?ref=ryanfeigenbaum.com) \- Nolan Lawson
- [An Attempted Taxonomy of Web Components](https://www.zachleat.com/web/a-taxonomy-of-web-component-types/?ref=ryanfeigenbaum.com) \- Zack Leatherman
I built the `share-button` component to be used without fuss, with sane defaults, and room for customization when needed. The [code is open source](https://github.com/royalfig/share-button?ref=ryanfeigenbaum.com) and PRs are welcome!
## How to Use It
I give the TL;DR version here, but check out the [full docs](https://royalfig.github.io/share-button/?ref=ryanfeigenbaum.com) to see all the available options.
1. Load the Code
Add the following script tag to your site's `head`. This loads the code that makes the button work.
```html
```
1. Place the Button
Next, add the custom element, ``, wherever you want it to appear on the page.
Maybe that's here:
Or here:
Add as many share buttons as you want, anywhere on the page. You could just have a whole page full of share buttons.
---
I know what you're thinking: "I don't have access to the HTML on my page. Can I not use this?"
Don't worry, I got you.
Inject the button onto the page by adding the `data-position` attribute to the script tag, specifying where you want the button to appear: `left`, `center`, or `right`.
💡
Ghost users can use ****Code Injection** \> ****Header** without having to modify their theme.
```html
{{/if}}
{{/contentFor}}
```
post.hbs
The code here uses the [contentFor](https://ghost.org/docs/themes/helpers/block/?ref=ryanfeigenbaum.com) helper in conjunction with the `syntax highlighting` custom setting to only load the syntax highlighting JS and CSS based on the user's needs. For those who don't need it, you save them from loading unnecessary libraries. 💪
## Smart 2: Custom settings preview
I'll soon launch version 2 of my open-source [Smart theme](https://github.com/royalfig/smart?ref=ryanfeigenbaum.com), filled to the brim with custom settings. (My partner, Maddie, is [currently rocking version 1](https://madelinechera.com/?ref=ryanfeigenbaum.com).)
Some of the things I'm bringing to the theme:
| Custom Setting | Purpose |
| ------------------ | -------------------------------------------------------- |
| Search key | Enter your API key to enable search |
| Comments | Enable Disqus comments |
| Hero size | Control the size of the hero image |
| Members | Add in extra member functionality or disable it entirely |
| Color schemes | Choose from several color schemes 💅 |
| Post width | Define your default post width |
| Social media icons | Add additional social media icons to the navbar |
| Custom CTA text | Add custom text to the homepage |
Custom settings open up the possibilities for Ghost theme development exponentially, improving the user and developer experience alike.
For inspiration on what you can do with custom settings, I recommend checking out the official Ghost repo to see some of the creative mischief they have already gotten up to (for example, with [Wave](https://github.com/TryGhost/Wave?ref=ryanfeigenbaum.com), [Alto](https://github.com/TryGhost/Alto?ref=ryanfeigenbaum.com), and the [OG Casper](https://github.com/TryGhost/Casper?ref=ryanfeigenbaum.com)).
OK, byeee 👋
### Image Optimization in Ghost
URL: https://ryanfeigenbaum.com/image-optimization-in-ghost/
Last updated: 2025-04-07T14:10:50.000Z
In the [HTTP Archive's 2021 Almanac](https://almanac.httparchive.org/en/2021/page-weight?ref=ryanfeigenbaum.com), they found that **images** are the single greatest contributor to page weight or the "total number of bytes of a particular web page." Images outpace all other content (JS, CSS, and HTML) by over 70% in a measure of median bytes by content type. Put another way, if your site is loading slowly (or not as fast you'd like), images are probably the chonk.
The good news is that Ghost automatically optimizes local images you add in the editor, generating different sizes relative to the user's viewport, adding size attributes [to avoid jank](https://www.afasterweb.com/2015/08/29/what-the-jank/?ref=ryanfeigenbaum.com), and lazy loading off-viewport images. But what about images that show up elsewhere in your theme like a hero or card image?
While Ghost provides several tools to optimize these images, it's up to theme developers to implement them. This tutorial will show you how to optimize images anywhere and everywhere in your Ghost theme.
## Set Your Image Sizes
Let's say you have a header image for your post. The reader's device will determine the optimal size for that image. For example, if your reader is on an ultrawide monitor, you may need to serve a 2000 px image, but serving that same image to a reader on a phone that has a screen that's only 360 px wide is a waste of pixels, data, and loading time. Ideally, then, you'd serve a 2000 px image to the first reader but a 360 px image to the second.
Ghost allows you to generate a set of images at specified sizes so that you can do just that. These images are defined in the `package.json` file located at the root of the theme. Which sizes you want to generate will be determined by the needs of your theme. The JSON snippet below shares the image sizes I use for my theme. The size names (`"s"`, `"m"`, etc.) can be anything you want.
json
```
{
"config": {
"image_sizes": {
"xxs": {
"width": 50
},
"xs": {
"width": 100
},
"s": {
"width": 350
},
"m": {
"width": 500
},
"l": {
"width": 700
},
"xl": {
"width": 1000
},
"xxl": {
"width": 2000
}
}
}
}
```
Whenever a particular image size is requested, it's generated on the fly by the server and cached. To control your site's size on the server, Ghost recommends not having more than 10 defined image sizes.
Once your images sizes are defined, you then can use them in your theme.
## Images in Your Template
The images sizes you defined above are available in your theme via the [image helper](https://ghost.org/docs/themes/helpers/img%5Furl/?ref=ryanfeigenbaum.com). The basic syntax is `{{img_url feature_image size="m"}}`. Here, the size attribute calls in the image you defined in your `package.json` file above. You can then string these image sizes together to build out a set of images in your template's Handelbar file.
hbs
```
```
Let's walk through the markup to understand what's happening.
### Source Set
`srcset` defines the set of images from which the browser can choose. The first part contains the Handlebars markup and helpers provided by Ghost that pulls in the resized images specified above. After that, you let the browser know the intrinsic width of the image by giving the pixel value followed by `w`. These values will match up with those in the `package.json` file.
### Source
`src` specifies the fallback image. If the browser can't choose from the `srcset`, the `src` image will be used. It usually works to choose the middle image here.
### Sizes
`sizes` is the trickiest part of the markup but the most powerful. While the browser can automatically try to choose from the set of images provided, `sizes` gives precise instructions on which image to choose.
In the `sizes` statement above, we tell the browser to use the 700 px image whenever the viewport is wider than 48rem. Otherwise, we tell the browser to find an image that matches the width of the viewport (`100vw`).
### Alt
Essential to accessibility and SEO, the `alt` tag also leverages Ghost's Handelbars templating layer to either use a supplied alt tag, entered via the post editor, or uses the post's title as a fallback.
### Width and Height
The `width` and `height` attributes refer to the intrinsic size of the image. Even though the image size is responsive, telling the browser the intrinsic image size helps avoid jankiness when loading since the browser can predict how much space the image needs on the page.
## Bonus Points
[With widespread support](https://caniuse.com/webp?ref=ryanfeigenbaum.com) of the image format `webp`, it's time to use it with wild abandon. On average, webp images are [25% - 34% smaller](https://developers.google.com/speed/webp/docs/webp%5Fstudy?ref=ryanfeigenbaum.com) than jpegs. Webp also supports animation and transparency.
At the moment, Ghost doesn't support serving different image formats, so if your audience is using primarily unsupported browsers, you'll likely want to account for that by using different formats. There are also some cases where webp could result in a larger image, so do your homework.
To convert images to webp, Google's Squoosh app is pretty fantastic. I also really like [XnConvert](https://www.xnview.com/en/xnconvert/?ref=ryanfeigenbaum.com), which is a powerful, cross-platform batch converter/compressor.
[SquooshSquoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.Squoosh](https://squoosh.app/?ref=ryanfeigenbaum.com)
[XnConvert · Batch Image Converter | Image convert | XnView.comBatch photo resizer and image converter to crop, convert, compress, resize images.XnView SoftwareGOUGELET Pierre](https://www.xnview.com/en/xnconvert/?ref=ryanfeigenbaum.com)
Below is a dope render by [Cash](https://unsplash.com/@graphics%5Fcash?utm%5Fsource=unsplash&utm%5Fmedium=referral&utm%5Fcontent=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/render?utm%5Fsource=unsplash&utm%5Fmedium=referral&utm%5Fcontent=creditCopyText). Converting from jpeg to webp resulted in a 62% reduction in file size!
JPG - 379 KB
WEBP - 143 KB
If you've been making your way through this tutorial and you realize you need a refresher on responsive images, MDN has a [fantastic guide](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia%5Fand%5Fembedding/Responsive%5Fimages?ref=ryanfeigenbaum.com) to the basics. I also found the articles below helpful:
[Setting Height And Width On Images Is Important Again — Smashing MagazineTo prevent layout shifts and improve performance scores, we need to always set width and height attributes on our images. Here’s why and when it matters.Smashing MagazineBarry Pollard](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/?ref=ryanfeigenbaum.com)
[What width and height attributes should you use with responsive images?: Chip CullenBest practice is to add \`width\` and \`height\` attributes to image elements in HTML to improve browser layout performance.Chip Cullen](https://chipcullen.com/what-width-and-height-attributes-to-use-with-responsive-images/?ref=ryanfeigenbaum.com)
By combing all the techniques above, you can optimize your images for your Ghost theme, get rid of the jank, and reel in those Lighthouse points. 💯
### Create a Dynamic CTA in Ghost
URL: https://ryanfeigenbaum.com/dynamic-cta/
Last updated: 2025-03-19T13:33:08.000Z
Getting someone to do something is *hard*. Asking them to type their email or to click a button isn't a foregone conclusion, you need to show them why the effort is worthwhile.
> Clicking is hardwork 😅
But as a creator, it's also hard to come up with effective CTAs.
With [Ghost's](https://ghost.org/?ref=ryanfeigenbaum.com) templating layer, you can create more than your run-of-the-mill CTA by generating dynamic copy to increase engagement. Below, I'll show you how to easily create these dynamic CTAs in your post template.
## The Basic CTA
We'll start with a simple CTA that asks our readers to sign up for a free newsletter.
Ghost provides some [template magic](https://ghost.org/docs/themes/members/?ref=ryanfeigenbaum.com) we can use to add a signup form to any page. By adding the `data-members-form` attribute to a `form` element, we can tell Ghost to capture the subscriber's email and initiate a signup flow.
To make this work, you also need to add the `data-members-email` attribute to an input element and include a button to submit the form.
```html
Your life is missing something...
Sign up for our free newsletter and get the goodness right in your inbox.
```
Basic CTA
Ghost's template magic also automatically adds state to your form by toggling classes on the form element. These classes will be merged with existing classes and removed when state is updated.
- `
{{/if}}
```
Using the @member object
### Styling the Sign Up Form
To show and hide the default, loading, success, and error states, you need to add a bit of CSS, as shown below.
In the markup above, state is indicated via text ("Loading..."), but you could just as easily use icons instead of or in addition to the text—the principle would be the same.
```css
/* Hide stateful content */
.form .loading,
.form .success,
.form .error {
display: none;
}
/* Show stateful content */
.loading .loading,
.success .success,
.error .error {
display: initial;
}
/* Hide default when stateful content is shown */
.loading .default,
.success .default,
.error .default {
display: none;
}
```
Styling to hide and show state
## The Dynamic CTA
Member data isn't all we have access to via the Ghost template layer. Within the context of a post, we have access to its data, which includes its title, tag, [and more](https://ghost.org/docs/themes/contexts/post/?ref=ryanfeigenbaum.com#post-object-attributes).
We can use this data to generate a dynamic CTA.
```handlebars
{{! Make sure you're in the post context}}
{{#post}}
{{! Only show the CTA if user is not a signed-in user }}
{{^if @member}}
What if you never had the chance to read {{title}} or my other articles about
{{primary_tag.name}}
?
Avoid the possibility of your life getting much worse by subscribing to my newsletter. It's totally free.
{{/if}}
{{/post}}
```
Dynamic CTA
While you'll need to find copy that'll suit your needs, the idea here is to update the CTA automatically based on the post's data. Instead of just saying, "Sign up for my wonderful newsletter," you can say, "Reading *Title of My Article* was truly wonderful, wasn't it? Don't miss other posts about *x topic* and sign up for my newsletter."
In the example above, I reference the article's title, its primary tag, and the link to that tag, so the reader can explore other posts on the same subject. Within the post object, you also have access to the post's author(s), description, publication date, excerpt, and more, all of which can be used to build creative CTAs to grow your audience.
Incorporating this data into a post's CTA is only a very small part of the battle of formulating an effective call to action. I hope, though, that having a few more tools at hand will spur your creativity in crafting kick-ass copy, and if I can have you take away anything from this tutorial, it's that your life will surely be much better if you [sign up for my newsletter](#/portal/signup).
## Resources
[40 Call-to-Action Examples You Can’t Help But ClickCheck out these call-to-action examples to inspire you to craft a click-worthy CTA.HubSpotBrittany Leaning](https://blog.hubspot.com/marketing/call-to-action-examples?ref=ryanfeigenbaum.com)
[15 Call To Action Examples (and How to Write the Perfect CTA)Your call to action can determine if customers convert. Copy these examples of the best CTAs and follow our easy 5-Steps strategy to write the perfect one.AdEspressoMark Quadros](https://adespresso.com/blog/call-to-action-examples/?ref=ryanfeigenbaum.com)
[Hook, Line, and Sinker: 7 Tips for a Killer Call-to-ActionRead to the end of this blog post to receive $1 million! Oh, if only that were true. Check out this post for some great tips on how to craft a clear and engaging call-to-action (CTA) for your marketing campaigns.WordStreamBilly McCaffrey](https://www.wordstream.com/blog/ws/2014/10/09/call-to-action?ref=ryanfeigenbaum.com)
[Ghost Handlebars Themes - Building a custom Ghost theme - DocsOur handlebars theme templating framework works with the Ghost API to build flexible publishing websites. Get all the tools you need to start building your custom theme here!Ghost - The Professional Publishing Platform](https://ghost.org/docs/themes?ref=ryanfeigenbaum.com)
### Add a Table of Contents to Your Website
URL: https://ryanfeigenbaum.com/toc/
Last updated: 2025-04-07T13:49:40.000Z
The goal for a table of contents is to provide your reader a guide and preview of your article's content and provide a way for them to navigate that content easily. This assumes that your content is already *semantically structured*.
👀
Since I published this article, I've since iterated on this approach. If you're interested in seeing I've built the current version of my table of contents, drop a comment below!
## What's *Semantic Structure*?
What does *semantically structured* mean? Philosophically, it means that your content is organized in a meaningful way. Practically, it means your content is organized by headings that use heading tags (like `
```
With `srcset` we provide images of varying widths, from 50 to 2000px wide. Then, in the `sizes` property, we specify when they should be used. Up to 400px, use the image closest to 160px, up to 600px, use the image closest to 240px, up to 1200px, use the image closest to 528px, and default to 800px after that.
💡
The browser is pretty smart. If your display has a high device pixel ratio (DPR), then the browser will choose a larger image automatically.
Size Writer handles this by outputting the `sizes` value automatically, copying it right to your clipboard, so you can paste it right into your code and move on with your life.
## How Size Writer Works
The CLI tool is an npm package. Install it globally:
bash
```
npm install -g @royalfig/size-writer
```
Then, run the command in the terminal: `size-writer`.
The utility asks for 3 inputs:
1. **URL**: The URL for the page you want to write sizes for. Works locally, too.
2. **Image CSS selector**: The selector for the image you want to target, e.g., `.hero-img img`.
3. **Available image sizes**: The image sizes available in px, provided as a comma-separated list: `300, 500, 700, 1200`.
Once the command runs, it uses Puppeteer in the background to actually render the website at a variety of viewports and measure the image size. It then returns a table, showing how the image size changes across viewports, and, of course, the `sizes` property value, computed for you.
## Testing Size Writer
Let's test this out with the hero image on the 404 Media homepage.
We run `size-writer`:
Terminal animation showing size-writer command being run, displaying a table of viewport measurements and outputting the final sizes attribute
And get back this value: `sizes="(max-width: 650px) 600px, (max-width: 800px) 1000px, (max-width: 1150px) 600px, 1000px"`.
This says that when the viewport is below 650px, use the 600px image. Then, up to 800px, use the 1000px image. Then, up to 1150px, go back down to 600px (and use 1000px after that).
What's interesting here is how the image size goes up but then back down as the size of the viewport increases. Can you guess why that is? Let's visualize it.
When the viewport is 500px wide, the image is \~466px. That means using the 600px image makes sense because it's the smallest available image.
At 700px, `sizes` specifies 1000px. But, as the screenshot shows, the image is only 666px, so it seems like it's choosing an oversized image.
The way the algorithm works is that *it always chooses an image that's larger than the one needed*, so that the image is never undersized. Here, though, the choice is debatable and results, in part, from only a few available images. It'd be straightforward to update the algorithm to let you choose between "quality" and "optimization." Should I add this option?
At 1000px, we see why the `sizes` value goes up and then down. The layout shifts at the larger viewport to two columns, making the image—perhaps counterintuitively—smaller. The `sizes` value follows suit by specifying a 600px image width.
Finally, at 2000px, we're back up to 1000px image width, again because the image size is above 600px. (Interestingly, if we used an "optimization" version of the algorithm, where it selected the value closest to the actual image size, it'd just be `sizes="600px"`).
Here's another (full) example from the card on the homepage of this site:
html
```
