I am looking for a bit of advice on how to design a block item. The block item will have two properties. A media image property and an RTE property. The layout will be either Image on top of RTE, image on left of RTE (floated so the text wraps the image), or image on right of RTE. I thought of two ways to approach this. First would be to make three different block types the second is a single block type with a “position” property then in the template check that property in an IF statement and render different code based on that position.
I am looking for suggestions from the experianced pros in how to approach this. Thanks
Have you ever experimented with the Block Grid, as it could be exactly what you needed?
Also if you’re using viewcomponent to render your block, you could make something like:
return View($"MyViewName_{Position}", model) so a different view is rendered based on the position you have selected
Otherwise, your solutions could also work, only the first one basically gives three exactly the same Models and mostly the exact same Block back, which seems quite overkill. If between those two I’d create a “Image Position” property for that matter.
I am not too familiar with Block Grid but from what I can understand it is more for overall page layout. The intent of these blocks would be to have 2 or more of them on a page rendering different information so was thinking block list. For example a page that lists the actors in a movie. Each block would be a headshot, Actors Name, and a small bio and there would be mutiple blocks on the page.
Depends wholly on requirements; block grid is great but I stick with block list (allowing users to put components in different areas causes me a lot of pain when testing, but maybe that’s just me…)
I’d almost always opt for option 2, where you have a ‘layout’ option in the block and then flip the output. This is normally a trivial update to do through CSS (using flex-direction or grid templates).