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 19 of 19 comments ( View all | Add Comment )
´ ཀ`) ︵ ͜ ♱
I have done everything right in the "Occasionally Asked Questions" section and it still comes out as a list for me and I don’t know what I’ve done wrong
hello! you can dm me your code and ill look it over
by Kazimir; ; Report
𝚔𝚢𝚕𝚎𝚎 🗝️
thank youuuuu so much for posting this! i've been trying to find this code for so long! i got it to work on my profile, but i just had one question - is there any way to change the font color for the titles? the background on my profile layout is black so the titles blend in and u can't see them :(
yes! the titles are under the class .title, you can add whatever styles you want to the code or just make a new css block called .title (im not sure if anything on the spacehey profile page already uses that class but i dont think so)
by Kazimir; ; Report
saffo 🏳️🌈
this is amazing, thanks for sharing!
is there a way to make the size of the covers smaller for singles?
thank you! itd definitely be possible, if you gave albums and singles a different class, its also something i could look into implementing!
the width and height in '#vinyl-gallery img' and '#vinyl-gallery .vinyl:hover img' control the size of the covers (because of the perspective i made it a little bigger on hover), and '#vinyl-gallery .vinyl:hover' controls how much of the cover you see when hovering over it. but im willing to look into adding it soon, idk when but its not much work to add i think
by Kazimir; ; Report
✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭
How I do I put the code in my blog Ik I click the <> to put code in there but everytime I do it starts to just put the photos on there and not looking the code :(
dont forget to copy the CSS and put it between , if thats what you mean?
by Kazimir; ; Report
OH! TYSM Im dumb XC
by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; ; Report
Im so lost how to put the code? do u put the Html then the css at the bottom? bc everytime I do that it shows the css code when I get out of the coding thing.
by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; ; Report
dw abt that! and in that case give me a minute, ill put a tutorial on this post on how to add it to a blog
by Kazimir; ; Report
Tysm 🙏🏼 bc I dont know how to code
by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; ; Report
lol ok i think i got it, you need to put the css between , or the site wont know its supposed to be css! (doesnt matter whether you put the html or css first). ill be putting the tutorial in the blog... tomorrow. lol
by Kazimir; ; Report
ugh wait. i meant <style> </style>
by Kazimir; ; Report
Ohhhh I forgot that part! Tysm!
by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; ; Report
okay i did that and when I put the codes both in there and then look its just blank :(
by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; ; Report
hey i just checked, the </style> tag goes after the css but before <div id="vinyl-gallery"> . whats happening right now is the browser thinks the html portion is part of the css, and it doesnt know what to do with it, hence why its blank. after that it should work :)
by Kazimir; ; Report
Okay tysm
by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; ; Report
Omg im so srry I keep asking 4 help! i did those things u said to do and its still not poping up :(
Could u show how the code would look If thats fine with u! bc its still not working and i did all the things u said to do :(
by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; ; Report
https://pastebin.com/ZXBmGEVG here u go. if this doesnt work im kinda also at a loss...
by Kazimir; ; Report
Omg tysm!!! that work! :3
by ✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭; ; Report
thank god lol!! enjoy! ^__^
by Kazimir; ; Report
Stardust Sleep
im trying to get this on my profile but it's being all fucky, it works on the preview but otherwise it tells me to fuck off
my dms are open, i can try and help you through it perhaps ?
by Kazimir; ; Report
scarcrossed
love this code! n u have great taste in music! using ur code :D
thank you thank you!! ( ＾ω＾)
by Kazimir; ; Report
XxCL0WN_FUCKH3RxX
would give this kudos but its at 69 rn
someone broke the equilibrium already
by Kazimir; ; Report
clowngyal
I WANT TOO ＞︿＜
corpseofvenus
THATS AWESOME!!!! Luv it fr, i hope i can have a vinyl collection some day
WardenBlack
what a sick collection!
Jasmine
OOOOOOO this is so nice!!!
ty!!!
by Kazimir; ; Report
𝓗𝓸𝓽𝓽𝓸𝓹𝓲𝓬 𝓦𝓪𝓷𝓷𝓪𝓫𝓮
You have such a good taste!! And how did u make this code??? Kinda want to use it for my CD collection lol
why thank you! I just added the code as it is right now to the blog post. There will be a better code down the line (give or take 2 weeks)
by Kazimir; ; Report
ceru ❋
Omg love this code did u put it together?
yep! planning to make a spacehey layout for it, though I'm going on vacation first. you're free to inspect element and see how the code is put together though.
by Kazimir; ; Report
🪩disco🪩
sick! i love alice in chains, good taste :) i also really love the code, it's super funky
:D
by Kazimir; ; Report
qzxamf
AHHHHHHHHHH I LOVE SYSTEM OF A DOWN !!!!!!!!!!!
WOO
by Kazimir; ; Report
kiki :3
first of all : Nice collection! brazil mentioned too so thats bonus points
second of all : nice way to show it . ur a css wizard omg
thank you (sepultura ruless) and thank you!!
by Kazimir; ; Report
Glub
Omg I love ur collection so much! I really want Human on vinyl but I do have Individual Thought Patterns, Also I really Love the way ur collection is set up!
Lolol I want Individual Thought Patterns too, I love the splatters in the vinyl, thank you!!
by Kazimir; ; Report
☆ emma
Whaaat this is soooo sick! I've wanted to show off my collection for a while, but I didn't know if I was going to write a list or post pics. But this is soooo cool. How did you do that?
CSS! :) I tried adding the raw code to this blog post but it won't let me, but I was planning to make a layout post with the code when I finish it! What you can do in the meantime is right click > inspect element to see what the HTML and CSS looks like, and you're free to copy it for your own use. Sorry if this wasn't that helpful..!
by Kazimir; ; Report
Thank youuu..! You were really helpfull, no worries !! <3
by ☆ emma; ; Report
But can't wait for you to post the layout !!
by ☆ emma; ; Report
KUPIDD.XOXO
WOAH!! This is such a cool way to show off your collection!!
Where do you usually get your vinyls? Online, or in-store?
Thank you!! I get them in store, but metal records are both uncommon and expensive so half the time I leave the store without buying anything, lol. I do like buying vinyls that are cheap based on nothing but the cover but most stores in my area are either too curated or don't have stuff I'd listen to... :/ I'm not much of an online shopper but I do want to save up to buy more of my favourites!
by Kazimir; ; Report