Handlebars helpers for rendering responsive images in posts while using Wordpress API V2.
npm install hbs-wp-helpers --save
Just declare it. It registers helpers to handlebars.
hbsWpHelpers = require('hbs-wp-helpers');
Generates the html attribute srcset to an img by parsing the "featured_media" object from a post. Input:
{{srcSet postMediaObject}}
Example:
Output:
<img
src="http://your-wordpress-site.com/wp-content/uploads/sites/2/2017/03/My-Image-1.jpg"
srcset="
http://your-wordpress-site.com/wp-content/uploads/sites/2/2017/03/My-Image-1-150x150.jpg 150w,
http://your-wordpress-site.com/wp-content/uploads/sites/2/2017/03/My-Image-1-300x225.jpg 250w,
http://your-wordpress-site.com/wp-content/uploads/sites/2/2017/03/My-Image-1-600x600.jpg 200w,
http://your-wordpress-site.com/wp-content/uploads/sites/2/2017/03/My-Image-1-1280x720.jpg 320w ">
Same as srcSet
but uses height values.
Takes the closest image that covers the height/width passed as param:
Output:
http://your-wordpress-site.com/wp-content/uploads/sites/2/2017/03/My-Image-1-300x225.jpg
The same as srcMediaFitsHeight / srcMediaFitsWidth but passing custom field's (acf) media as param.
Embeds post object as using Handlebars builtin helper #with with some useful new variables:
Contains the post media reference post._embedded.wp:featuredmedia.0.
for a smarter code when calling image helpers:
instead of
###toArray Converts passed params to array:
Output:
[param1, param2, param3]
Parses urls from text and converts them to tag.
Output:
My url is <a class="myClass" href="http:example.com">http:example.com</a>
Renders singular or plural word depending on the count passed as param.
{{pluralize count, singular, plural}}
Example:
<span>{{pluralize 5, 'banana', 'bananas'}}</span>
Output:
<span>bananas</span>
Sets the variables needed for the pagination nav.
Example:
Output:
<ul>
<li><a href="/news/page/1">first page</a></li>
<li><a href="/news/page/6">last</a></li>
<li><a href="/news/page/5">5</a></li>
<li><a href="/news/page/6">6</a></li>
<li class="active"> <a>7</a></li>
<li><a href="/news/page/6">6</a></li>
<li><a href="/news/page/7">7</a></li>
<li><a href="/news/page/8">next</a></li>
<li><a href="/news/page/20">last</a></li>
</ul>
- express-hbs: Express 3 handlebars template engine complete with multiple layouts, partials and blocks.
ISC