Standard Blocks

Last Updated: 2018-10-17

Please note that even though we try to give the editors the best experience possible when editing their content, there's no correlation between how blocks are rendered in the manager and in your application.

If you want the block styled in the same way as in your web application, you need to add custom styles to the manager.

Read About Custom Resources

One Column HTML

Piranha.Extend.Blocks.HtmlBlock

The block has a single HtmlField that you can access from your code in the same way as any Html field.

using Piranha.Extend.Blocks;

var page = MyPage.Create(api);

page.Blocks.Add(new HtmlBlock
{
Body = "<p>This is some HTML</p>"
});

The block is displayed as a one column HTML-editor in the manager. You can read more about the default HTML-editor Piranha uses here.

Two Columns HTML

Piranha.Extend.Blocks.HtmlColumnBlock

The block has two HtmlField properties for each column that you can access from your code in the same way as any Html field.

using Piranha.Extend.Blocks;

var page = MyPage.Create(api);

page.Blocks.Add(new HtmlColumnBlock
{
Column1 = "<p>This is the first column</p>",
Column2 = "<p>This is the second column</p>"
});

The block is displayed with two HTML-editors in the manager. The content of the columns can be swapped by pressing the switch button in the block toolbar.

Image

Piranha.Extend.Blocks.ImageBlock

The block as a single ImageField that you can access from your code in the same way as any Html field.

using Piranha.Extend.Blocks;
using Piranha.Models;

var page = MyPage.Create(api);
var image = api.Media.GetAll().First(m => m.Type == MediaType.Image);

page.Blocks.Add(new ImageBlock
{
Body = image
});

The block displays the selected image, or a placeholder in case no image is selected in the manager. When hovering the block the filename together with buttons for opening the media dialog and removing the currently selected image is shown.

Quote

Piranha.Extend.Blocks.QuoteBlock

Text

Piranha.Extend.Blocks.TextBlock