{bb_image} Print

The {bb_image} module can be used on Web Pages, Page Templates, and Module Layouts throughout BlueberryCMS to dynamically process and optimize images and can be configured in a variety of ways. 

Syntax

This example will generate an entire <img> element with all the appropriate attributes. By omitting the generate="" attribute the {bb_image} tag will just return a URL you can use.

{bb_image source="/Images/MyImage.jpg" generate="img" height="200" width="300" quality="45" format="jpg"}

<img src="{bb_image source='/Images/MyFile.jpg'}" alt="" class="" />

Parameters

• source - (Required) Fill in the relative path the any image. 

  <!-- For images stored in File Manager -->
  
  source="/Images/MyImage.jpg"
  
  <!-- For images stored in Data Collections. 
  If a field is titled Image, then add 'Url' at the 
  end of it to return just the URL. -->
  
  source="{{imageUrl}}"

• width - If omitted, the image processor will automatically set the appropriate width of the image based on device type. For mobile phones the width is 600, for tablets 1600, and 3200 for regular computers. Set to a numerical value if you wish to specifically set the pixel width. 
  Options:
  • Number - Enter in a numerical pixel value from 1 to 6000 such as width="300"
• height - Accepts a numerical value to specifically set the pixel height.
  Options:
  • Number - Enter in a numerical pixel value from 1 to 6000 such as height="300" 
• quality
  • Number - Enter in a numerical percentage value from 1 to 100. The lower the value, the quicker the image will load, however the more compression will be added. By default the value is set to 45 percent which is often suitable for most situations and helps you images load faster.
• format
• alt - If you're using the generate="img" option, this alt attribute allows you to specify the alternative text displayed in the <img> element itself. This can be useful in Data Collections layouts in this format: alt="{{dataItemName}} which would dynamically fill in the alternate text with the name of a Data Collection Item. 
• fill - Will completely fill the parent container the image is located in. 
• id - Same as above, accept this adds id="Your-Id" to the <img> element.
• class - If you're using the generate="img" option, the class attribute adds class="your-class" to the <img> element.

Areas Available

The {bb_image} module tag can be placed within these areas.

• Page Templates
• Web Pages
• Landing Pages
• Content Holders

Liquid Tags

None.