https://discord.umbraco.com logo
#help-with-umbraco
blocklist vs block grid
# help-with-umbraco
d

daisy157

02/12/2024, 3:24 PM
I am starting project in Umbraco 13 and wanted to use blocklist. Any suggestions what’s easy to use and expendable in future. Need to create responsive site which content user needs to manage so how can I use blocklist? Any video series or blogs would be helpful to get started. TIA
r

Rob Schall

02/12/2024, 10:01 PM
Daisy, to really utilize the blocklist functionality, you'll need to create a view that will loop through all of the blocks added to a given blocklist editor. As long as you add all of your views into a specific folder and keep the naming convensions straight forward, you should be able to do something as easy as putting all your views in /Views/Shared/Blocks/SomeBlockName/index.cshtml And then when you loop through the elements in the blocklist editor, you can look at the model "name" to determine the element type and render out your partial.
The additional nice thing with the blocklists in this scenario is that you can nest them really easily. For example, we create a variety of "layouts" (full width, 2 column, etc) and then each of those "columns" have a blocklist in them. Not only does this help you determine how to lay things out on the front end, but it also lets you control the type of blocks that can be put in different scenarios (maybe you only want a certain block available in a full width layout), etc.
d

deanleigh

02/13/2024, 7:51 AM
Hi Daisy, Block List and Block Grid are both very useful and can be used in combination e.g. You can have Block Grid Layouts containing Block Grid Areas with Block List Components inside them. I have created a site that exemplifies working this way so that the Back Office mirrors the Front End making it very intuitive for editors. Credit: @User for his Block Preview Package. You can install my example as a starter kits and see how it's constructed: https://marketplace.umbraco.com/package/umbraco.community.templates.umbootstrap
2 Views