Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • johnsmithweb 9 posts 30 karma points
    Mar 09, 2024 @ 19:23
    johnsmithweb
    0

    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.

    Block Grid Editor showing image width

    However, when the page is viewed the image takes up the full available width of the page: enter image description here

    And the appropriate template snippet is:

    <section>
    <div>
        @await Html.GetBlockGridHtmlAsync(Model.Body)
    </div>
    

    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?

  • Frans de Jong 548 posts 1840 karma points MVP 4x c-trib
    Mar 12, 2024 @ 21:01
    Frans de Jong
    0

    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.

  • johnsmithweb 9 posts 30 karma points
    Mar 12, 2024 @ 23:08
    johnsmithweb
    0

    Thanks for responding Frans. I had thought of two approaches to try and solve this:

    1. Use the same 'large-displaying' image on the home page to see if it resized properly.
    2. 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.

    Backoffice rendering of Block grid

    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

    Configuration settings

    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.

  • Frans de Jong 548 posts 1840 karma points MVP 4x c-trib
    Mar 13, 2024 @ 08:08
    Frans de Jong
    0

    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

  • johnsmithweb 9 posts 30 karma points
    Mar 13, 2024 @ 20:38
    johnsmithweb
    0

    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/

    enter image description here

Please Sign in or register to post replies

Write your reply to:

Draft