Flyfish's Blog

A Polaroid Style Image Gallery for Bearblog, Rewritten

While browsing through Sylvia’s blog post, I came across an interesting technique for creating a Polaroid-style image gallery. It seemed like a fun way to showcase photos on my website, so I decided to give it a try.

However, after I copied and pasted the CSS into my website’s code, the result wasn’t quite what I was expecting:

the photo of doomed style

“Well,” I thought to myself, “looks like I’ll have to rewrite this.”

And this is the result! My version of this Polaroid-style Image Gallery, compatible even with the Default theme.

See it for yourself:

Light style < Dark style >

How-to

So let’s figure out how to create this on our own. If you just want the code, just skip to there.

HTML&Markdown code for reference 
<section class=“tiny-photos”>
   <ul>
      <li>
         <img src=“https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/img_0293.webp” alt=“IMG_0293”>
         <ul>
            <li>Cloud☁️</li>
         </ul>
      </li>
      <li>
         <img src=“https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/img_0930.webp” alt=“IMG_0930”>
         <ul>
            <li>Sunset🌇</li>
         </ul>
      </li>
      <li>
         <img src=“https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/img_8530.webp” alt=“IMG_3”>
         <ul>
            <li>Sign🪧 &amp; Cloud on some unknown highway</li>
         </ul>
      </li>
      <li>
         <img src=“https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/image-1.webp” alt=“image”>
         <ul>
            <li>被作业硬控</li>
         </ul>
      </li>
   </ul>
</section>

<section class="tiny-photos">

+ ![IMG_0293](https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/img_0293.webp)
    + Cloud☁️
+ ![IMG_0930](https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/img_0930.webp)
    + Sunset🌇
+ ![IMG_3](https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/img_8530.webp)
    + Sign🪧 & Cloud on some unknown highway
+ ![image](https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/image-1.webp)
    + 被作业硬控

</section>

At the beginning, let’s give image a background color to mimic a frame look. Also, we need elements in <li> flex vertically:

.tiny-photos > ul > li {
    background-color: var(—tp-frame-color);
    box-shadow: 0px 3px 3px var(—tp-shadow-color);
    display: flex;
    flex-direction: column;
    width: min-content;
    height: min-content;
}

Result:

Result 1

Then try to arrange <li>, making them flex horizontally in the <ul>, and center the <ul> element.

.tiny-photos > ul {
    display: flex;
    padding: var(—space-s);
    gap: var(—space-3xs);
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

It should look like this:

Result 2

Wow! It’s starting to come together!

Let’s continue. Now add margin and padding to the <img> and text inside <ul>, as well as remove the list indicator in <ul>.

It’s worth noting that for the <img> element, in order to display it at correct and appropriate ratio and size, you should apply auto to both height and width while setting the max-{height|width} to your desired number.

.tiny-photos > ul > li img {
    height: auto; 
    width: auto; 
    max-width: 20rem; 
    max-height: 20rem;
    margin: 0.7em;
    margin-bottom: -0.1rem;
}

.tiny-photos > ul > li ul {
    margin: 0.4em;
    margin-left: 0;
    padding-left: 1em;
}

.tiny-photos ul {
    list-style: none;
    font-family: "FusionPix"; /* change as you wish */
    font-size: var(--fs--1);
    color: var(--text-color);
}

Now it should be looked almost the same as what we want at the beginning :)

Result 3

Finally make it flex around the center and add rotation, which gives the impression that the photos are placed casually. (A touch of Skeuomorphism)

.tiny-photos > ul {
    display: flex;
    padding: var(--space-s);
    gap: var(--space-3xs);
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.tiny-photos {
    width: 80vw;
    position: relative;
    left: calc(-40vw + 50%);
}

/* Rotation, credit sylvia.bearblog.dev */
.tiny-photos > ul > li:first-child {
    rotate: -3deg;
}
.tiny-photos > ul > li:nth-child(odd) {
    margin-right: 1em;
}
.tiny-photos > ul > li:nth-child(even) {
    rotate: -1deg;
    margin-top: 1em;
}
.tiny-photos > ul > li:nth-child(3n) {
    rotate: -3deg;
}
.tiny-photos > ul > li:nth-child(5n) {
    rotate: 1deg;
    margin-top: 1.5em;
}
.tiny-photos > ul > li:nth-child(7n) {
    rotate: 4deg;
    margin-bottom: 1em;
}
.tiny-photos > ul > li:nth-child(11n) {
    rotate: 2deg;
    margin-top: 0.5em;
}
.tiny-photos > ul > li:nth-child(3),
.tiny-photos > ul > li:nth-child(13n) {
    rotate: 6deg;
}
.tiny-photos > ul > li:nth-child(17n) {
    rotate: -5deg;
}

/* Hover effect, only on larger screens */
@media (min-width: 799px) {
    .tiny-photos > ul > li:hover {
        z-index: 99;
        transform: scale(1.3);
        box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
                    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
                    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
                    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
                    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
                    100px 100px 80px rgba(0, 0, 0, 0.07);
    }
    .tiny-photos > ul > li {
        transition: 300ms ease;
    }
}

Final Code

It’s hard to write the code and the article, if it had helped you, please upvote, thank you.

/* Polaroid-style image gallery */
/* You need to set variables yourself to make it running correctly */
.tiny-photos {
    width: 80vw;
    position: relative;
    left: calc(-40vw + 50%);
}

.tiny-photos ul {
    list-style: none;
    font-family: “FusionPix”;
    font-size: var(—fs—1);
    color: var(—text-color);
}

.tiny-photos > ul {
    display: flex;
    padding: var(—space-s);
    gap: var(—space-3xs);
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.tiny-photos > ul > li {
    background-color: var(—tp-frame-color);
    box-shadow: 0px 3px 3px var(—tp-shadow-color);
    display: flex;
    flex-direction: column;
    width: min-content;
    height: min-content;
}

.tiny-photos > ul > li img {
    height: auto; 
    width: auto; 
    max-width: 20rem; 
    max-height: 20rem;
    margin: 0.7em;
    margin-bottom: -0.1rem;
}

.tiny-photos > ul > li ul {
    margin: 0.4em;
    margin-left: 0;
    padding-left: 1em;
}

/* Rotation */
.tiny-photos > ul > li:first-child {
    rotate: -3deg;
}
.tiny-photos > ul > li:nth-child(odd) {
    margin-right: 1em;
}
.tiny-photos > ul > li:nth-child(even) {
    rotate: -1deg;
    margin-top: 1em;
}
.tiny-photos > ul > li:nth-child(3n) {
    rotate: -3deg;
}
.tiny-photos > ul > li:nth-child(5n) {
    rotate: 1deg;
    margin-top: 1.5em;
}
.tiny-photos > ul > li:nth-child(7n) {
    rotate: 4deg;
    margin-bottom: 1em;
}
.tiny-photos > ul > li:nth-child(11n) {
    rotate: 2deg;
    margin-top: 0.5em;
}
.tiny-photos > ul > li:nth-child(3),
.tiny-photos > ul > li:nth-child(13n) {
    rotate: 6deg;
}
.tiny-photos > ul > li:nth-child(17n) {
    rotate: -5deg;
}

/* Hover effect, only on larger screens */
@media (min-width: 799px) {
    .tiny-photos > ul > li:hover {
        z-index: 99;
        transform: scale(1.3);
        box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
                    6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
                    12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
                    22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
                    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
                    100px 100px 80px rgba(0, 0, 0, 0.07);
    }
    .tiny-photos > ul > li {
        transition: 300ms ease;
    }
}

#bearblog #code #post