« SpaceHey Forum

Here's a code for a moodboard or collage.

Posted by ᙅɾყᑲᥲᑲყ ᖇɩ♡t

posted
updated

Forum: SpaceHey

This code will add squared versions of linked images in neat rows. The images will link back to the originals, with the links opening in a new tab. I used Pinterest images for mine. 



Just copy an image URL and then make sure you paste it in place of both IMAGE_URL and LINK_URL in the code.


<!-- Moodboard Code (c) Riot Doll (Replace IMAGE_URL and LINK_URL with image source link) -->


<div style="display:flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%;">

  

  <style>

    .moodboard-img {

      width: 110px;

      height: 110px;

      object-fit: cover;

    }

  </style>


  <a href="LINK_URL_1" target="_blank">

    <img class="moodboard-img" src="IMAGE_URL_1" />

  </a>


  <a href="LINK_URL_2" target="_blank">

    <img class="moodboard-img" src="IMAGE_URL_2" />

  </a>


  <a href="LINK_URL_3" target="_blank">

    <img class="moodboard-img" src="IMAGE_URL_3" />

  </a>


  <a href="LINK_URL_4" target="_blank">

    <img class="moodboard-img" src="IMAGE_URL_4" />

  </a>


</div>



There are four in this example, but you can add as many as you want. In my layout, 110px fits neatly in rows of four. If your sections are a different width from mine, you might have to tweak the width and height settings at the top of the code. 

I wanted to do a masonry layout, but that requires script, and Spacehey doesn't allow that. 


Report Topic

1 Reply

Reply by rhubarmia

posted

This is lovely, thank you!


Permalink Report Reply