Hi, I'm redeveloping my Umbraco 8 site using Umbraco v13.1.1 and I have an issue using the Block Grid Editor. I have it displaying okay on my Home page but when I've tried using the Block Grid Editor for the content of my blog pages, it doesn't appear to honour the sizing for any block e.g. a RichText block or an Image block. In the screenshot below, the image block has been resized to 4 columns.
However, when the page is viewed the image takes up the full available width of the page:
I thought initially, it was because I had the GetBlockGridHtmlAsync call inside of a Bootstrap row but even after moving it into a standalone
it is still full width. The original media image is 889 pixels width but I have an 800 pixel wide image on my home page, in a similar Block Grid block and its behaving as expected i.e. taking up half the width.
Any ideas anyone?
I'ts not really enough information to work with but it sounds like a front-end issue.
Is there a class on the media item that contains styling like max-with:100%?
Thanks for responding Frans.
I had thought of two approaches to try and solve this:
Use the same 'large-displaying' image on the home page to see if it resized properly.
Compare the html of both pages to try and spot where the issue might be.
I tried the first option and the image did resize okay which confirms your suspicion of a front-end styling issue. Then, comparing the html, all the html blocks looked the same between the pages but I did spot that the home page (where the images were displaying okay) had an additional css file referenced.
I had been trying to learn how to apply css styles and html templates to the blocks so that they would render in the backoffice as they are supposed to look on the front end, to make a better editing experience and I had used the standard two column layout css as the base and then had started to add an additional class to try and style a call-out button and set that css file as the custom stylesheet for my Call-To-Action block (in the Advanced settings) - that is why, I think it got included on the home page's html template.
However, I had thought that if I didn't put any custom css on the blocks that they would still render/ layout correctly using the default css which the blocks have - or perhaps I have inadvertently deleted the default twocolumnlayout stylesheet when I used it as the base for my experiment (and it is now no longer available for any block grids which try to use the TwoColumnLayout Block).
In the Advanced area of blocks, the Custom View is used to overwrite how the block appears in the backoffice - and I assumed that the Custom stylesheet setting was also specifically for the backend, but I'm not so sure (and there's no hint)
It's also not obvious where these default block stylesheet and template files are located - when I tried to follow the location shown in the custom view path, it doesn't really exist e.g.
~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoTwoColumnLayoutBlock.html
I think I shall experiment a bit more, especially with the standard demo block, until I fully understand what drives front-end styling and what drives backend styling.
Custom view and Custom styling is for the backoffice preview.
The front-end styling comes from your site stylesheet.
If for example you use bootstrap the classes on the HTML rendered by blocklist should correspond with the bootstrap classes.
Thanks Frans,
Yeah, I appreciate that. I had been following the Umbraco Deep Dive: Block Grid Editor series of posts and although I had done everything in Part 1, what I didn't appreciate was that you have to take a copy of the default layout stylesheet that's being used to render the Block Grid Editor in the backoffice and copy it into your wwwroot/css/ folder and reference it on your page html so that it renders correctly in the front-end - as per this article: https://umbraco.com/blog/deep-dive-block-grid-editor-part-1/
Block grid sizing not honoured on published page
Hi, I'm redeveloping my Umbraco 8 site using Umbraco v13.1.1 and I have an issue using the Block Grid Editor. I have it displaying okay on my Home page but when I've tried using the Block Grid Editor for the content of my blog pages, it doesn't appear to honour the sizing for any block e.g. a RichText block or an Image block. In the screenshot below, the image block has been resized to 4 columns.
However, when the page is viewed the image takes up the full available width of the page:
And the appropriate template snippet is:
I thought initially, it was because I had the GetBlockGridHtmlAsync call inside of a Bootstrap row but even after moving it into a standalone
I'ts not really enough information to work with but it sounds like a front-end issue. Is there a class on the media item that contains styling like max-with:100%?
That should do the trick.
If not i'd like to see more detailed html.
Thanks for responding Frans. I had thought of two approaches to try and solve this:
I tried the first option and the image did resize okay which confirms your suspicion of a front-end styling issue. Then, comparing the html, all the html blocks looked the same between the pages but I did spot that the home page (where the images were displaying okay) had an additional css file referenced.
I had been trying to learn how to apply css styles and html templates to the blocks so that they would render in the backoffice as they are supposed to look on the front end, to make a better editing experience and I had used the standard two column layout css as the base and then had started to add an additional class to try and style a call-out button and set that css file as the custom stylesheet for my Call-To-Action block (in the Advanced settings) - that is why, I think it got included on the home page's html template.
However, I had thought that if I didn't put any custom css on the blocks that they would still render/ layout correctly using the default css which the blocks have - or perhaps I have inadvertently deleted the default twocolumnlayout stylesheet when I used it as the base for my experiment (and it is now no longer available for any block grids which try to use the TwoColumnLayout Block). In the Advanced area of blocks, the Custom View is used to overwrite how the block appears in the backoffice - and I assumed that the Custom stylesheet setting was also specifically for the backend, but I'm not so sure (and there's no hint)
It's also not obvious where these default block stylesheet and template files are located - when I tried to follow the location shown in the custom view path, it doesn't really exist e.g. ~/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoTwoColumnLayoutBlock.html
I think I shall experiment a bit more, especially with the standard demo block, until I fully understand what drives front-end styling and what drives backend styling.
Custom view and Custom styling is for the backoffice preview.
The front-end styling comes from your site stylesheet. If for example you use bootstrap the classes on the HTML rendered by blocklist should correspond with the bootstrap classes.
You can change the html rendered by blocklist by adding your own views
Thanks Frans, Yeah, I appreciate that. I had been following the Umbraco Deep Dive: Block Grid Editor series of posts and although I had done everything in Part 1, what I didn't appreciate was that you have to take a copy of the default layout stylesheet that's being used to render the Block Grid Editor in the backoffice and copy it into your wwwroot/css/ folder and reference it on your page html so that it renders correctly in the front-end - as per this article: https://umbraco.com/blog/deep-dive-block-grid-editor-part-1/
is working on a reply...