Image

Code example:

@Html.IntelligenceBankMediaItem(Model,"ibImagePicker", new { @class="img-fluid"})

Image with custom attributes

Code example:

@Html.IntelligenceBankMediaItem(Model,"ibImagePickerCustom", new { @class="img-fluid", alt="Custom text"})

Audio

Code example:

@Html.IntelligenceBankMediaItem(Model,"ibAudioPicker")

Application

Code example:

@Html.IntelligenceBankMediaItem(Model,"ibApplicationPicker")

Video

Code example:

@Html.IntelligenceBankMediaItem(Model,"ibVideoPicker", new { width="800", height="370"})

RTE old style

Nothing new is needed to render the RTE. Standard Umbraco approach. Code example:

@Model.Value("rteOldStyle")

RTE new style

Nothing new is needed to render the RTE.Standard Umbraco approach. Code example:

@Model.Value("rteNewStyle")

Grid

Nothing new is needed to render the Grid. Standard Umbraco approach. Code example:

@Html.GetGridHtml(Model, "gridComponent")

You can use transform parameter to transform the media item. ( transform:"{transformation_parameter}" - where 'transformation_parameter'' is the transformation parameter you want to use).

Use the next method to manually change the preset by preset 'id'' for the media item :

@Html.IntelligenceBankMediaItem(Model,"ibImagePicker", htmlAttributes: new { width="500"}, transform:"preset=VOEb")

Here's a summary of the available parameters that can be used in the media query parameter:

• Extension (ext): Change the image format.
  Accepted values: jpeg, jpg, bmp, gif, png, webp.
  Example: transform: "ext=png"
• Size (size): Resize the image to a specific width and height or percentage.
  Accepted Value: Width x Height or Width or xHeight or Xpercent
  Resize with &ignore: Ignore aspect ratio and also match.
  Resize with &nolarge: Ignore aspect ratio but never enlarge.
  Example: transform: "size=500x500&ignore"
• Crop (crop & cropgravity): Select a custom crop position or use predefined crop gravity.
  Accepted values: crop=a{{HORIZONTALSTARTPOINT}}xa{{VERTICALSTARTPOINT}} (custom crop position)
  Accepted values for cropgravity: center, east, northeast, north, northwest, south, southeast, southwest, west
  Example: transform: "crop=northwest"
• Extent (extentbackground & extentgravity): Extend the image canvas and specify a color background.
  Accepted values: extent={{Width}}x{{Height}} (canvas size)
  Accepted values for extentbackground: Any common color (e.g., skyblue), rgba or rgb color code.
  Accepted values for extentgravity: center, east, northeast, north, northwest, south, southeast, southwest, west
  Example: transform: "extent=500x500&extentbackground=skyblue&extentgravity=center"
• Rotate (rotate): Rotate the image by a specified angle.
  Accepted values: 0 to 360 (rotation goes clockwise)
  Example: transform: "rotate=90"
• Flip (flip): Flip the image horizontally or vertically.
  Accepted values: hor (for horizontal flip), ver (for vertical flip)
  Example: transform: "flip=hor"
• Quality (quality): Adjust the image quality.
  Applicable formats: jpg, jpg2, bpg, djvu, djv, icer, jbig, pgf, jxr, hdp, wdp Accepted values: 1 to 100 (original quality)
  Example: transform: "quality=50"
• Compression Type (compresstype): Apply pixel compression specified by type.
  Accepted values: B44, B44A, BZip, DWAA, DXT1, DXT3, DXT5, Fax, Group4, JBIG1, JBIG2, JPEG, JPEG2000, Lossless, LosslessJPEG, LZMA, LZW, None, Piz, Pxr24, RLE, Zip, RunlengthEncoded, WebP, ZipS, Ztsd
  Example: transform: "compresstype=JPEG"
• Color Space (colorspace): Change the image color space.
  Accepted values: CIELab, CMY, CMYK, Gray, HCL, HCLp, HSB, HSI, HSL, HSV, HMB, Lab, LCH, LCHab, LCHuv, LinearGray, LMS, Log, Luv, OHTA, Rec601YCbCr, Rec709YCbCr, RGB, scRGB, sRGB, Transparent, xyY, XYZ, YCbCr, YDbDr, YCC, YIQ, YPbPr, YUV
  Example: transform: "colorspace=RGB"
• Density (density): Set the image resolution.
  Accepted values: 1 or higher
  Example: transform: "density=300"

To utilize these parameters in the IntelligenceBankMediaItem, you can pass them as a query string in the 'transform' parameter. For example, in the provided code snippet, transform: "size=500x500" sets the size of the displayed image to 500 pixels width and 500 pixels height.

Example #1:

@Html.IntelligenceBankMediaItem(Model,"ibImagePicker", transform:"size=500x500")

will render:

---

You can combine multiple parameters in the transform parameter using the & character as a separator. For example, "size=400x400&crop=200x200&cropgravity=East" would resize the image to 400x400 and crop it.

Example #2:

@Html.IntelligenceBankMediaItem(Model,"ibImagePicker", transform:"size=400x400&crop=200x200&cropgravity=East")

will render:

---

Example #3 (RTE, Grid):

If you want to use transformation for RTE or Grid, call the Transform method. Make sure that @using IntelligenceBank.Umbraco.Connector.Core.Models; is included.
But keep in mind that the transformation will be applied to all objects inside. That means if you insert 2 images into the Grid from IntelligenceBank and apply the transformation, it will be applied to both of the IntelligenceBank images.
Example for RTE: @Model.Value("rteNewStyle").Transform("size=300x200")

will render:

The next example shows how to use the Transform method for the Grid component: @Html.GetGridHtml(Model, "gridComponent").Transform("size=200x200")

will render:

---

More detail

For more detail on the available parameters, please refer to the following article:

https://help.intelligencebank.com/hc/en-us/articles/360013682011-Manual-Transformations-of-Images-via-Public-Share-URLs

Media picker

A direct call to the field (standard Umbraco approach) will always return a string to the CDN

You can also call any property of the IntelligenceBankMediaItem element.

Available properties:

• ResourceType
• Name
• Type
• Thumbnail
• Url
• FileName
• FileType
• FileSize
• Width
• Height
• IBId
• FileHash
• VersionNumber
• Sid
• Preset
• PresetFileSize
• PresetCustomWidth
• PresetCustomHeight
• PresetName

Methods:

• Trnasform("parameters")

Code example #1:

@Model.Value("ibImagePicker")

will return:

https://cdn.intelligencebank.com/us/share/4zK1AG/ble6/z9jE/original/Weyne+Yew+Flinders+Street https://cdn.intelligencebank.com/us/share/4zK1AG/ble6/z9jE/original/Weyne+Yew+Flinders+Street

---

Code example #2:

<img src="@Model.Value("ibImagePicker")" />

will return:

<img src="https://cdn.intelligencebank.com/us/share/4zK1AG/ble6/z9jE/original/Weyne+Yew+Flinders+Street" />

---

Code example #3:

@Html.Raw(Model.Value<IntelligenceBankMediaItem>("ibImagePicker").FileName">

will return:

weyne-yew-iFdPrhOPI_E-unsplash.jpg

---

Code example #4:

Use Transform() method to apply the transformation

@Html.Raw(Model.Value<IntelligenceBankMediaItem>("ibImagePicker").Transform("size=400x400"))">

will return:

https://cdn.intelligencebank.com/us/share/4zK1AG/ble6/z9jE/size=400x400/Weyne+Yew+Flinders+Street