NOTE:

This is in document is still being worked on. You can post your comments on this card: https://app.hubspot.com/contacts/487227/deal/1149340271/

Last Updated: 2019-11-27

Please take note that for the sample codes, we only used single curly braces for displaying Hubl variables and calling Hubl macro functions as the blog post is interpreting these codes instead of displaying them as simple text when typed with double curly braces. For the comment and logic we added a space between the curly braces and the percent sign as well as between the curly braces and pound sign.

nf_Image

This is the copy snippet of the image module converted into a macro. Users can use this function and just pass the image field value. Below is the Hubl snippet of the nf_Image macro:

{ # Image macro # }
{ % macro nf_Image(option) % } 
  { % if option.src % }
    { % set sizeAttrs = 'width="{ option.width }" height="{ option.height }"' % }
    { % if optionsize_type == 'auto' % }
      { % set sizeAttrs = 'style="max-width: 100%; height: auto;"' % }
    { % elif option.size_type == 'auto_custom_max' % }
      { % set sizeAttrs = 'width="100%" height="auto" style="max-width: { option.max_width }px; max-height: { option.max_height }px"' % }
    { % endif % }
    <img src="{ option.src }" alt="{ option.alt }" { sizeAttrs }>
  { % endif % }
{ % endmacro % }

convertColor

This macro converts color field values (Color + Opacity) into rgba values so users can implement the color with opacity value on an element's CSS with just one macro call. To use this, simple supply the color field value to the convertColor macro. Below is the Hubl snippet of the convertColor macro:

{ % macro convertColor(color) % } rgba({ color.color|convert_rgb }, {color.opacity}%) { % endmacro % }