Scale Input Shortcode#

A dropdown selector to scale recipe quantities.

Usage#

{{< scale-input id="cookies" >}}

{{< recipe id="cookies" >}}
- 2 cups flour
- 1 cup sugar
{{< /recipe >}}

Parameters#

Scale Options#

• 0.5x (half recipe)
• 1x (original recipe) - default
• 1.5x
• 2x (double recipe)
• 3x (triple recipe)
• 4x (quadruple recipe)

Features#

• Reset button: Appears when scale is not 1x, allowing quick return to original
• Automatic updates: Linked recipe updates immediately when scale changes
• Styled component: Professional appearance with background color and rounded corners
• No page reload: All updates happen instantly via JavaScript

Notes#

• The id parameter must exactly match the recipe shortcode’s id
• Only one scale-input per recipe is recommended
• Reset button is hidden at 1x scale
• Compatible with multiple recipes on the same page (each needs unique id)