Block Grid Example Website - [object Object] in back end Umbraco #help-with-umbraco

Block Grid Example Website - [object Object] in ba...

MobyDog

05/15/2024, 4:56 PM

Having a play with Block Grid which I hadn't really delved into before. I installed the Block Grid Example Website as a brand new website using 13.3.0 Front end looks fine, images and headlines look fine but Rich Text just has [object Object], whether it's part of a Card Component or its own one. There don't appear to be any errors, neither in the console nor in the command line. Any ideas what I'm missing? Thanks

Mike Chambers

05/15/2024, 5:16 PM

looks like a change is required...

ng-bind-html="block.data.richText.markup"

in https://github.com/umbraco/Umbraco.BlockGrid.Example.Website/blob/main/UmbracoBlockGrid/App_Plugins/UmbracoBlockGrid/BlockViews/richText.html Though you can't simple change your local file as on build the files are set as immutable so are replaced... You have to create a new blockpreview file. say

richTextNew.html

and then change the custom prieview for the block setting in the backoffice.

Mike Chambers

05/15/2024, 5:16 PM

https://cdn.discordapp.com/attachments/1240347083672649778/1240352226212577352/image.png?ex=66463f87&is=6644ee07&hm=f7435bf595de4487024fd00c34a203847e7a23e184fc4f76b374bb3cc268d078&

Mike Chambers

05/15/2024, 5:17 PM

click the x to remove and then browse to add your new one.

Mike Chambers

05/15/2024, 5:17 PM

https://cdn.discordapp.com/attachments/1240347083672649778/1240352420723167342/image.png?ex=66463fb5&is=6644ee35&hm=b02ba1a9c6ea128c36d22cae60a405d1a26e10e09e1989e2e42c394c88a7cbba&

Mike Chambers

05/15/2024, 5:18 PM

card block preview should be similar.. https://github.com/umbraco/Umbraco.BlockGrid.Example.Website/blob/main/UmbracoBlockGrid/App_Plugins/UmbracoBlockGrid/BlockViews/card.html#L29

Mike Chambers

05/15/2024, 5:18 PM

<div ng-bind-html="block.data.richText"></div>

should become

<div ng-bind-html="block.data.richText.markup"></div>

Mike Chambers

05/15/2024, 5:21 PM

as this is supposed to be a playground.. might be nice to allow for playing with the views etc.. https://github.com/umbraco/Umbraco.BlockGrid.Example.Website/blob/main/UmbracoBlockGrid/buildTransitive/Umbraco.BlockGrid.Example.Website.targets#L11 could be changed to add a condition to only copy once and ignore if files exist/are changed 🙂

Mike Chambers

05/15/2024, 5:23 PM

Copy code

xml
 <Copy SourceFiles="@(UmbracoBlockGridContentFiles)" DestinationFiles="@(UmbracoBlockGridContentFiles->'$(MSBuildProjectDirectory)\App_Plugins\UmbracoBlockGrid\%(RecursiveDir)%(Filename)%(Extension)')" SkipUnchangedFiles="true" />

over to ...

Copy code

xml
 <Copy Condition="!Exists('$(MSBuildProjectDirectory)\App_Plugins\UmbracoBlockGrid\%(RecursiveDir)%(Filename)%(Extension)') SourceFiles="@(UmbracoBlockGridContentFiles)" DestinationFiles="@(UmbracoBlockGridContentFiles->'$(MSBuildProjectDirectory)\App_Plugins\UmbracoBlockGrid\%(RecursiveDir)%(Filename)%(Extension)')" SkipUnchangedFiles="true" />

Dean Leigh

05/15/2024, 7:18 PM

Please have a look at Umbootstrap where I have used Block grid for both layout and features https://umbootstrap.com/

MobyDog

05/15/2024, 7:38 PM

Thanks @Mike Chambers that's perfect. Thanks a million!

MobyDog

05/15/2024, 7:39 PM

Will definitely have a look at that Dean, thank you!

huwred

05/16/2024, 7:30 AM

Can highly recommend Dean's Umbootsrap, it's a fantastic template for using the blockgrid

32 Views

Previous Next