The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
| Latest revision | Your text | ||
| Line 14: | Line 14: | ||
It's otherwise pretty self-explanatory, especially when one looks at the [[ProleWiki:User guide/Library|user guide]] for the new library. Everything works with simple HTML and CSS. | It's otherwise pretty self-explanatory, especially when one looks at the [[ProleWiki:User guide/Library|user guide]] for the new library. Everything works with simple HTML and CSS. | ||
The grayscale and scaling effect is realized in CSS in the library_homepage stylesheet, so you need to upload colorized pictures (we just did it with free AI tools online for older pictures). If you don't specify a picture for the big cards a placeholder image will be used instead, but it won't be centred properly. To fix this we should just upload a placeholder picture in the correct aspect ratio. | The grayscale and scaling effect is realized in CSS in the library_homepage stylesheet, so you need to upload colorized pictures (we just did it with free AI tools online for older pictures). If you don't specify a picture for the big cards a placeholder image will be used instead, but it won't be centred properly. To fix this we should just upload a placeholder picture in the correct aspect ratio. Mini cards don't have a default placeholder image. | ||
--- | --- | ||
In the library page, we have div containers for every heading and subheading. ''.library-container'' is used for the big | In the library page, we have div containers for every heading and subheading. ''.library-container'' is used for the big cards and ''.library-container-mini'' is used for the mini cards. You just open this div tag and put the appropriate templates inside it, one after the other. Each container can only be used for its appropriate card type. The CSS of these containers is controlled from the library_homepage template. | ||
The big cards are simply flexboxes displays, but the mini cards had to be CSS grids to display properly. | |||
--- | --- | ||
| Line 32: | Line 34: | ||
(all dimensions doubled to look good on smartphone [Retina] displays + added 5 extra pixels in both dimensions to make sure the pictures fit correctly). | (all dimensions doubled to look good on smartphone [Retina] displays + added 5 extra pixels in both dimensions to make sure the pictures fit correctly). | ||
As much as possible, pictures for the cards should be cropped to this size. This is because HTML loads the full-size picture, which increases page | As much as possible, pictures for the cards should be cropped to this size. This is because HTML loads the full-size picture, which increases page time and size. In other words if we have a 1500x3000px image for a card, it will load the entire picture and then scale it down to the size we need for the card, loading possibly megabytes of data when we could just load the smaller, lighter picture. | ||
The only solution to load properly-cropped picture is to crop them yourself on your device. | The only solution to load properly-cropped picture is to crop them yourself on your device. | ||
| Line 47: | Line 49: | ||
This also means the grayscale effect gets repeated for both the library card and the mini card in the CSS, but it's the same filter for both cards (it goes from 100% grayscale to 3% on hover). This is because I organized the common CSS file with library card styling, mini styling, mobile styling in this order. | This also means the grayscale effect gets repeated for both the library card and the mini card in the CSS, but it's the same filter for both cards (it goes from 100% grayscale to 3% on hover). This is because I organized the common CSS file with library card styling, mini styling, mobile styling in this order. | ||
If you want to change the filters, you need to do it for | If you want to change the filters, you need to do it for both cards (look for img:hover clauses preceded by a class). | ||
Mini cards don't have the scale-in effect applied because they're so small it would barely change anything. | Mini cards don't have the scale-in effect applied because they're so small it would barely change anything. | ||
| Line 69: | Line 71: | ||
=== Mid cards === | === Mid cards === | ||
Mid cards are a subsection of big cards because they work exactly the same way (same HTML and CSS) except they | Mid cards are a subsection of big cards because they work exactly the same way (same HTML and CSS) except they look different. They also use the same container div in the library (.library-container). | ||
I had to declare CSS specific to the mid cards though (which are contained in the .library-card-mid div) for it all to work properly. This CSS is still in the [[Template:Essays homepage/style.css]] page. There is only little overlap between the big cards and mid cards in the CSS. | I had to declare CSS specific to the mid cards though (which are contained in the .library-card-mid div) for it all to work properly. This CSS is still in the [[Template:Essays homepage/style.css]] page. There is only little overlap between the big cards and mid cards in the CSS. | ||
They also don't take the '''top''' and '''left''' parameters but a '''scale''' parameter that zooms into (if >1) or out (if <1). Can use decimals up to the third | They also don't take the '''top''' and '''left''' parameters but a '''scale''' parameter that zooms into (if >1) or out of (if <1). Can use decimals up to the third, so 1.344 is a valid scaling in. | ||
Images are centred vertically and horizontally in the mid cards, if the "subject" of the picture (what you want to appear in the middle of the card) is not centred in the original picture, such as this one below, then it will be off-centred on the card and would require manually cropping the picture. | Images are centred vertically and horizontally in the mid cards, if the "subject" of the picture (what you want to appear in the middle of the card) is not centred in the original picture, such as this one below, then it will be off-centred on the card and would require manually cropping the picture. | ||
[[File:China monument.jpg|center|thumb|Here we see the monument is off-centred to the right in the picture.]] | |||
== Mini cards == | == Mini cards == | ||
The mini card images repeat the same CSS, namely the grayscale filter (but no scale-in effect or box-shadow). They also use many more parameters in their template because you can type in any kind of text you want and add the links yourself. That is to say, the mini card doesn't | The mini card images repeat the same CSS, namely the grayscale filter (but no scale-in effect or box-shadow). They also use many more parameters in their template because you can type in any kind of text you want and add the links yourself. That is to say, the mini card doesn't need to link to a category. | ||
They also use the same <nowiki><h6> trick as the big cards.</nowiki> | They also use the same <nowiki><h6> trick as the big cards.</nowiki> | ||