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 44 comments ( View all | Add Comment )
✨Orionnn✨
Using! This is actually super cool!
chelsy 📷
hello!! I was just wondering what the code would be to change the artist and title text color to white if its possible thank you!!
#vinyl-gallery .title is responsible for the text! simply add color:white; to that block (or make a new one)
by Kazimir; ; Report
chelsy 📷
using thank you!!
ariel <33
Using !! Thanks!
cry!babyjellipie𓏲 ๋࣭ ࣪ ˖🎐
if it's only squashed when you put it on the spacehey PROFILE, then where do i put the code so it won't be squished together?
please help ! much appreciated :)
or is it only not squashed together if you put it on a blog?
by cry!babyjellipie𓏲 ๋࣭ ࣪ ˖🎐; ; Report
https://pastebin.com/5rbrhakv use this css instead! im yet to figure out what makes it squash on profiles... but this works for the time being
by Kazimir; ; Report
thank you thank you for answering !! thx to you I've learned more about vinyls ♡
by cry!babyjellipie𓏲 ๋࣭ ࣪ ˖🎐; ; Report
love to hear it!!
by Kazimir; ; Report
p1n_backed_punk
Hey quick question, on your website it said you got the album images from RateYourMusic and i tried to do the same but couldn't figure it out. How did you get a link of the album cover to put into the code?
oh lol i meant i downloaded them from rateyourmusic, i host them on my website for myself, rateyourmusic even if youd be able to link them will break the links after a while. if i were you id host it from your own website if you have one or find a website like freeimagehost!
by Kazimir; ; Report
Oh alright! Yeah I found an image site that worked for a while but then it also broke the links... I’ll try the site you mentioned!
by p1n_backed_punk; ; Report
Clinky
Using :-)
H43LA
using !!
Cookie, the jar clown :D
Using tysmmmmm
Sahej2po
I don't get how to change the albums to my own stuff :I
within the html change the urls (within src=" ") to the images and the album titles
by Kazimir; ; Report
I think I was close, I just didn't understand how to find my own images and make them apply correctly. It just showed up as nothing. Maybe I'll try again another time. Thank you tho
by Sahej2po; ; Report
ooh in that case, (if i understand correctly) if the link you used didnt work the website may have blocked outside linking Or spacehey blocks images from that site, in which case finding another place to host them from works
by Kazimir; ; Report
Oh that makes sense, thank you. Your page looks so nice I can tell you know a lot about this kind of stuff I'm just scratching the surface 'x)
by Sahej2po; ; Report
LOL thank you
by Kazimir; ; Report
misstokenmetal
using
<Llkor!
Thanks for sharing :3 using!!!
𝔯𝔢𝔱𝔦𝔠𝔢𝔫𝔱𝔠𝔯𝔦𝔢𝔰.
this is soo good!! thnx for sharing this (using) ^_^!!
SYDNEY !! ٩(^ᗜ^ )و ´-
using!! ^_^
𝐤𝖆𝖙𝖍𝖊𝖗𝖎𝖓𝖊 ☆⋆｡𖦹°‧★
using, but quick question, how do you change the color of the font when you click the album cover?
that would be by adding a style to #vinyl-gallery .title, like so:
#vinyl-gallery .title {
color:magenta;
}
by Kazimir; ; Report
thank you so so much!!
️
by 𝐤𝖆𝖙𝖍𝖊𝖗𝖎𝖓𝖊 ☆⋆｡𖦹°‧★; ; Report
pi3rcethe_adri
Using
S1ilver.Bull3ts
anytime i try to use the codes, it does stack but js rotates
you can send a dm with your code and ill check whats up
by Kazimir; ; Report
Wren Dynastay ੈ♡˳
It keeps coming out as a list no matter what I do pls help!! :(
if youre still having this issue, you can send a dm and ill have a look. (are you sure you didnt forget to copy paste the css, too?)
by Kazimir; ; Report
Remiii ⋆｡°✩
i'll be using!! :)
alex !! 💫🦈
can someone share the code in here? the website is down
lol its up again! sorry for the inconvenience
by Kazimir; ; Report
thanks !!
by alex !! 💫🦈; ; Report