@futronline, thanks for writing in and for the kind words! There are a few things going on here that given some context will hopefully help to illuminate what’s going on. This isn’t an issue, rather, a reality of how things are setup to work for this particular example.
To being, an important goal for us with the “Looper” paradigm was effectively to be able to give users the ability to design their own looped information (typically archival content) with our native Elements (e.g. rows, columns, images, text, buttons, et cetera). This was important to us because certain looks or effects will require very specific layouts to achieve that desired result.
As for the prefabricated “Posts” Elements that we created, each of these was built out in a way to demonstrate different ideas of what is possible using these Elements. For example, the “Minimal” example is slightly more traditional in its setup while still demonstrating some cool concepts like internal flex layouts and conditional content with the featured image, while the “List” example is meant to work for smaller contexts (perhaps in a sidebar or something like that).
The “Tiles” example you’re referencing above was built to demonstrate a few different ideas and achieve a particular look. First, this particular look has a very simple approach with the date up top and the title below. We knew with this simple amount of content we could experiment with how we get this layout a bit. If you’ll look at the Posts Element in the layout which is a Column, we’ve hardcoded some dimensions on here:
-
height of 44vh
-
min-height of 320px
-
max-height of 400px
This allows these tiles to grow slightly with the screen that is viewing it, while setting a sensible floor and ceiling on the layout. Additionally, this is where the permalink is set for the post.
Because the permalink is set on that post, if we want to add an article Element around our content (by no means required but it is helpful on the semantic HTML front) we will have to do this by adding another Element. To achieve this, the “Article” in the outline is a Div Element that has had it’s tag swapped to article and its dimensions set like so:
-
width to 100%
-
height to 100%
That Div Element also has its internal flex positioning turned on and set to a Column layout with both its horizontal and vertical alignments set to Start. Next, the title inside there has a margin-top: auto; value, which is what is pushing that text to the bottom of each tile (a look not possible without flexbox).
Finally, the background image is set using an actual Image Element that is inside another nested Div Element. Now, we could achieve this look with using the advanced background properties of either the “Post” or “Article” Elements, but you’ll notice on hover this image scales up and brightens up slightly. This is not possible natively with the background layouts, so we used the nested “Featured Image” Div to use position: absolute; and then set its top, left, right, and bottom, values all to 0px (to have it stretch to the far bounds of the container), and then set z-index: -1; to push it behind everything. Next, we scaling effect on the Div to happen when hovering over the Element.
I outline all of this for a couple of reasons:
- Your point where it was difficult to select the “Post” Element parent of “Article” without any margins or paddings is true, however, it’s simply a reality of achieving this particular look with the Effect and the proper semantic HTML markup. This whole structure could be greatly simplified if the need for the nested
<article> tag is not required or the scaling effect not needed. In that case you could effectively structure everything in one layer and it would be much simpler. So there are trade-offs in all of these situations.
- Your issue you provided of how adding
margin-top to the “Article” Element does not move the image is again due in part to how this prefab was setup. That article is intended to take up the whole width and height of the parent, so adding margins creates issues like pushing the text out of view. However, if you wanted the image to move with it, you could go to that Element (the Div) and set it’s Position to relative instead of static, this would make the nested image position relative to that and not the “Post” Element.
All that being said, the main point to take away with loopers is that truly, nearly anything is possible, it’s simply down to your imagination with what you’re wanting to accomplish and we tried to demonstrate some of these ideas creatively with these prefabricated “Posts” Elements. Even as I mentioned above that I wouldn’t recommend setting margin on the “Article,” you could do something like the following to achieve a cool alternate look:
- Set a margin of
10px (or whatever you want) on “Article.”
- Set the
width and height of that Div to calc(100% - 20px) (the 20px value comes from subtracting the two sides of 10px on each axis of our Element.
Then, depending on how you set the Position on the “Article” you can get two totally different looks, if kept static so that the Image flows to the edges of the “Post” Element, you would get this:
This is a cool variation where you get sort of a border out of the image. Or, if you set the Position to relative on the “Article,” you would get this:
In this scenario, the black background of the "Post* is seen as a border around everything, but when you hover, the image will scale beyond the box and into the black. It’s a cool effect, but you might need to adjust the scaling to ensure it grows enough to fill out the space.
Hopefully this helps to shed a bit of light on things with the Loopers. Effectively, you can make things as simple or complex as you want or need. Additionally, when working with the prefabricated Posts Elements, always make sure to review the entire structure and how it’s setup as that will help to inform any decisions you make in wanting to adjust them.
If you have a specific idea in mind, definitely experiment with the layout possibilities as they are truly endless! And don’t hesitate to let me know if you have any further questions that I can assist with making clearer.
