Report Blog Entry
Hover over an album to see its title!
I couldn't fit in all my albums because this code needs some tinkering (it's not very flexible or mobile friendly yet), but I'll get to that some other time.
Update (16/09/2023): I'm really happy to see you guys use my code to display your collections (or favourites, or whatever else...!), I see you!! I promise a better code is inbound, I just get distracted alot. Thank you to the people who link back to this post and give credit as well, it's not required but very very much appreciated. ^__^
For as long as I don't feel this code is ready for the Layouts page, you can find the code on my website.
Occasionally Asked Questions (updated 17/01/2024)
Make sure you copied both the HTML and CSS, putting the CSS between a <style> and </style> tag. Without the CSS the albums will show up as a plain list. It should not matter whether you paste the HTML or CSS code first.
When putting the code in a blog post, make sure you switch over to the HTML editor (<> icon on the left top) before pasting, and switching back to the visual editor (eye icon in the same place) to see if it works.
It's still not showing up!
You may have deleted some of the HTML tags while editing on accident. It may be easier to copy the code and fill it in again. Mind that all the tags serve a function and the only text you have to change is the url to the image (between src=" and ") and the title of the album (between <div class="title"> and </div>).
The images are squashed!
As far as I know this only happens if you put the code on a SpaceHey profile, in which case replace the CSS with this CSS instead. Although this works this fix is only temporary... mostly because I'm not happy with it right now, lol.
The images aren't loading!
Check if the host you used is allowed on SpaceHey (right click -> open image in new tab: if it says permission denied or something along those lines, it's not allowed). The safest bet is to host images for yourself on a free image hosting site or a website you own.
I've encountered another visual bug
This code is still (and I'm sorry about that) not fully finished - one glaring example is the albums spilling over outside the section you put them in. This is on my to-do list, but don't be afraid to tinker with the CSS to your liking!
The solutions above didn't work...
Don't be afraid to reach out! Even if it takes a few days for me to respond I don't mind helping out and appreciate the feedback, for some bugs i may not even have encountered myself yet!
Comments
Displaying 20 of 93 comments ( View all | Add Comment )
cvpidzcvrse ♱
For anyone who wants to use this code and get it working properly, what I did was add the CSS code first inbetween the "style" coding, then pasted the HTML code underneath!
how? sorry i'm still new to this spacehey thing i joined yesterday
by tomás 𖤐; ; Report
like this
/* Vinyl Showcase - www.kazimariusz.com */
#vinyl-gallery * {
all: unset;
}
#vinyl-gallery {
all: initial;
width: 100%;
height: 230px;
margin: 30px 0;
display: flex;
flex-direction: row;
position: relative;
margin-left: -6px;
}
#vinyl-gallery .vinyl {
perspective: 500px !important;
width: 18px;
transition: width 0.5s;
}
#vinyl-gallery .vinyl:hover {
width: 148px;
}
#vinyl-gallery img {
transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s;
width: 180px;
height: 180px;
transform: rotateX(0deg) rotateY(25deg);
transform-style: preserve-3d;
border-radius: 4px;
border: 2px solid rgba(0, 0, 0, 0.1);
}
#vinyl-gallery .vinyl:hover img {
transform: rotateX(0deg) rotateY(10deg);
width: 188px;
height: 188px;
margin-top: -2px;
}
#vinyl-gallery .title {
display: block;
visibility: hidden;
position: absolute;
bottom: 0px;
text-align: center;
width: 100%;
padding-left: 6px;
}
#vinyl-gallery .vinyl:nth-child(n):hover + .title {
visibility: visible;
}
by CHERRY; ; Report
kewwlbeans
using!! but js asking, does anyone know how to change the text of the album info thingy? i wanna be able to customise it to fit the rest of my page. much appreciated of any1 can help :33
xx.denialisariver.xx
using !!
corazon de bocadillo
using tysm!!!!!!!!!
⋆. 𐙚˚࿔ Silene 𝜗𝜚˚⋆
Using :3
Oliver!
using!
marcosxd
Can someone send me the complete code? When I try to use it, I only get errors.
how did you get the code to work i need help T-T
by kaykay; ; Report
SpudChud
using
𝔟𝔦𝔟𝔦
cant someone just send me the whole code how its supposed to be and the only thing i have to do is change the links and names bc when i do it myself it fails and i kinda lost motivation T_T
That's exactly what I want too lol
by 𝐌𝐫. 𝐍𝐨𝐫𝐭𝐡; ; Report
That's exactly what I want too lol
by 𝐌𝐫. 𝐍𝐨𝐫𝐭𝐡; ; Report
That's exactly what I want too lol
by 𝐌𝐫. 𝐍𝐨𝐫𝐭𝐡; ; Report
I tried to fix the code, but i have no idea what to do.
by ☽⛧⋆⁺♰Andy♰‧⁺⋆⛧☾; ; Report
Janani Banani
using tyyyy
Janani Banani
using tyyyy
RAY CACTYS
is there a way to get this under my profile comments instead of in my about me?
anomaly
usingg!
belugamos
using
Icarus_theartist
using!!! THX
ChyTheeHomosapien
Totally using this is perfect (..◜ᴗ◝..)
Nirinnit
Using! :3
<RebElzBAŧZ>
Using !!
Hexiee
PERFECTO ESTA BUENISIMO
sasa
using !!