New Hom Page Layout card sizes
-
We've gone back and forth on this one. The big issue is that not all articles have thumbnails. Previously I had placeholders that represented the article type, but I'm so, so over that. It added no value. So the decision was made to show articles with thumbnails large than articles without - with the hope that authors would spend a moment to add a nice thumbnail. But again the issue then comes down to heading wrapping. Long headings mean more room. We can trim, or add ellipsis, but neither are great. We could place the items in a grid. That would be...OK. But there'd be odd whitespace. Or we do what we do and we have, well, odd alignment (but a fairly standard newspaper-ish style). Or we go back to 1 column and have awful whitespace. My preference is definitely for a denser layout. Background vs shadow. My true preference was neither, and I may yet remove the background shade and border. We just needed a way to delineate the items clearly. More whitespace is the better solution.
cheers Chris Maunder
Yeah, hard one ... a placeholder image for no image would be the go-to. The staggered/mason layout is not that pretty. Heading, yeah, that is a tough one. I used flex, that allows for scaling the layout easily for media breakpoints. It is also easy to place sections... Heading Image, Description, & Tag are fixed [scalable] sizes ... the Title & Descriptions are top-aligned and ellipsed are a certain number of lines. for the heading, maybe bottom aligned... Want me to mock something? As for the card edge, drop shadow is more modern. If not that, don't use border as it affects layout calculations, use outine instead.
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
We've gone back and forth on this one. The big issue is that not all articles have thumbnails. Previously I had placeholders that represented the article type, but I'm so, so over that. It added no value. So the decision was made to show articles with thumbnails large than articles without - with the hope that authors would spend a moment to add a nice thumbnail. But again the issue then comes down to heading wrapping. Long headings mean more room. We can trim, or add ellipsis, but neither are great. We could place the items in a grid. That would be...OK. But there'd be odd whitespace. Or we do what we do and we have, well, odd alignment (but a fairly standard newspaper-ish style). Or we go back to 1 column and have awful whitespace. My preference is definitely for a denser layout. Background vs shadow. My true preference was neither, and I may yet remove the background shade and border. We just needed a way to delineate the items clearly. More whitespace is the better solution.
cheers Chris Maunder
Chris Maunder wrote:
We could place the items in a grid. That would be...OK. But there'd be odd whitespace.
Unless you used
grid-auto-flow: row dense;:) grid-auto-flow - CSS: Cascading Style Sheets | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
"These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer
-
Chris Maunder wrote:
We could place the items in a grid. That would be...OK. But there'd be odd whitespace.
Unless you used
grid-auto-flow: row dense;:) grid-auto-flow - CSS: Cascading Style Sheets | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Yes, there is that too, but now we are looking at the blades of grass deep in the forest of trees... ;P Grid is my preferred over flex for a lot of things too... :-D
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
Chris Maunder wrote:
We could place the items in a grid. That would be...OK. But there'd be odd whitespace.
Unless you used
grid-auto-flow: row dense;:) grid-auto-flow - CSS: Cascading Style Sheets | MDN[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
An item with a nice thumbnail next to an item without will result in a chunk of ugly whitespace. That's specifically what I was trying to avoid. Still - it's 2 seconds to play around and see how it looks.
cheers Chris Maunder
-
Yeah, hard one ... a placeholder image for no image would be the go-to. The staggered/mason layout is not that pretty. Heading, yeah, that is a tough one. I used flex, that allows for scaling the layout easily for media breakpoints. It is also easy to place sections... Heading Image, Description, & Tag are fixed [scalable] sizes ... the Title & Descriptions are top-aligned and ellipsed are a certain number of lines. for the heading, maybe bottom aligned... Want me to mock something? As for the card edge, drop shadow is more modern. If not that, don't use border as it affects layout calculations, use outine instead.
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
I'm more than happy to take suggestions so would love to see your ideas.
cheers Chris Maunder
-
I'm more than happy to take suggestions so would love to see your ideas.
cheers Chris Maunder
I'll try and knock something together later today...
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
I'm more than happy to take suggestions so would love to see your ideas.
cheers Chris Maunder
I took the liberty to change the layout so that changes to the html & css are minimal. Elements keep their order in the html code. Also, I have used a placeholder image where the author supplies none (sorry Fred for replacing your image :cool:). Have a look at this:
I had to remove (comment out) the div wrapper around the image and text and rename a div class from texttodescription- see below:[](/Articles/5338801/Build-NFT-Collection-Web3-Application-with-Hardha) Use React and hardhat typescript to build a NFT contract web3 application from scratchThen used the following scss:
.homepage {
.timeline {
.message-list {
padding-bottom: 10px;
font-size: 16px !important;
}.container-col2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 0 !important; gap: 1rem; >div { width: calc(50% - 0.5rem); padding: 16px 20px 0px !important; box-shadow: rgb(0 0 0 / 8%) 2px 4px 8px 2px; outline:rgb(0 0 0 / 8%) solid 1px; border-radius: 0.4rem; background-color: #fff; } .content-list-item { display: flex; flex-direction: column; align-items: stretch; min-height: 100%; padding-bottom: 1em; &.medium { margin: 0 5px 14px 0; .title { flex-shrink: 0; order: 2; padding: 0; margin-top:.5em; // added extra padding font-size: 22px !important; line-height: 125%; font-weight: 500; a { -
The size of the card is incosistent and causing staggered layout - see second row.
IMHO, this is not a clean look. Also, the darkened card background and borger looks a bit aged, sorry. As a suggestion, I would be more inclined to do the following: 
.homepage .timeline .container-col2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0 !important;
gap: 1rem;
}then for each card:
.homepage .timeline .container-col2>div {
width: calc(50% - 3rem);
padding: 16px 20px 0px !important;
box-shadow: rgb(0 0 0 / 8%) 2px 4px 8px 2px;
border-radius: 0.4rem;
}Then push the tags to the bottom of the card so they all line up... But that is just me ... :cool:
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
cheers Chris Maunder
Yeah, placeholder image is required. Moving Title to under the image also fixes ugly misalignments. It was worth a try ...
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
I took the liberty to change the layout so that changes to the html & css are minimal. Elements keep their order in the html code. Also, I have used a placeholder image where the author supplies none (sorry Fred for replacing your image :cool:). Have a look at this:
I had to remove (comment out) the div wrapper around the image and text and rename a div class from texttodescription- see below:[](/Articles/5338801/Build-NFT-Collection-Web3-Application-with-Hardha) Use React and hardhat typescript to build a NFT contract web3 application from scratchThen used the following scss:
.homepage {
.timeline {
.message-list {
padding-bottom: 10px;
font-size: 16px !important;
}.container-col2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 0 !important; gap: 1rem; >div { width: calc(50% - 0.5rem); padding: 16px 20px 0px !important; box-shadow: rgb(0 0 0 / 8%) 2px 4px 8px 2px; outline:rgb(0 0 0 / 8%) solid 1px; border-radius: 0.4rem; background-color: #fff; } .content-list-item { display: flex; flex-direction: column; align-items: stretch; min-height: 100%; padding-bottom: 1em; &.medium { margin: 0 5px 14px 0; .title { flex-shrink: 0; order: 2; padding: 0; margin-top:.5em; // added extra padding font-size: 22px !important; line-height: 125%; font-weight: 500; a {That's interesting. Having the image top, then the heading, avoids image mis-alignment (mostly). I'm not a fan of image placeholders (one of the reasons for this design tweak). If an author doesn't provide an image that's suitable for a thumbnail, then maybe it's just not a visual article and we should leave it at that. Sean is going through articles and adding appropriate thumbnails where it makes sense, but we're erring on the side of a light touch on this.
cheers Chris Maunder
-
That's interesting. Having the image top, then the heading, avoids image mis-alignment (mostly). I'm not a fan of image placeholders (one of the reasons for this design tweak). If an author doesn't provide an image that's suitable for a thumbnail, then maybe it's just not a visual article and we should leave it at that. Sean is going through articles and adding appropriate thumbnails where it makes sense, but we're erring on the side of a light touch on this.
cheers Chris Maunder
Chris Maunder wrote:
I'm not a fan of image placeholders (one of the reasons for this design tweak).
I do hear you, but does throw out card alignment... I guess masonry is the only option then. As for the (mostly) Image alignment in my sample, that was due to the
height: autocalulation was266.667px... Here is the placeholder that I used, just in case you want to have a better look:
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
cheers Chris Maunder
Oh wow, it is live ... :omg: I gather you're going to compact the articles that have no image... I still think that the tags should be pushed to the bottom of the card and leave the gap with the description > text.
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
Chris Maunder wrote:
I'm not a fan of image placeholders (one of the reasons for this design tweak).
I do hear you, but does throw out card alignment... I guess masonry is the only option then. As for the (mostly) Image alignment in my sample, that was due to the
height: autocalulation was266.667px... Here is the placeholder that I used, just in case you want to have a better look:Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
I was thinking about masonry but I can't help think that's probably overkill. I'm sure we can dodgy something up that will achieve a reasonable layout without the overhead
cheers Chris Maunder
-
The size of the card is incosistent and causing staggered layout - see second row.
IMHO, this is not a clean look. Also, the darkened card background and borger looks a bit aged, sorry. As a suggestion, I would be more inclined to do the following: .homepage .timeline .container-col2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0 !important;
gap: 1rem;
}then for each card:
.homepage .timeline .container-col2>div {
width: calc(50% - 3rem);
padding: 16px 20px 0px !important;
box-shadow: rgb(0 0 0 / 8%) 2px 4px 8px 2px;
border-radius: 0.4rem;
}Then push the tags to the bottom of the card so they all line up... But that is just me ... :cool:
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
While I ponder what to do about missing thumbnails, variable length titles, and whether to compact or be spacious or get Masonry to do magic, I added a complication at the bottom of the homepage feed that may be of interest to some.
cheers Chris Maunder
-
While I ponder what to do about missing thumbnails, variable length titles, and whether to compact or be spacious or get Masonry to do magic, I added a complication at the bottom of the homepage feed that may be of interest to some.
cheers Chris Maunder
I like the swapping and remembering the choice... Would it not be better to put it at the top? Maybe as well as the bottom... As for the image, maybe a faded version of the image that I suggested. Better than a blank area while you decide...
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
