Published by cat_dragged_in

published 1741759785

Privacy: Link-only
Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

add music albums

this one has a few steps, follow along:

TO GET THE ALBUM COVER ART:

1. go to https://rateyourmusic.com/

2. search up an album you want. for example, I'll do Taylor Swift's "Fearless".

3. click that album.

4. click that album's cover. you should be on a screen that says "you must be logged in to view the full-size cover art". under that is a link that says "here". click.

5. copy the HTML in the top box. you should get this:

6. most of this is garbage, you don't need it. delete everything but the bolded part.

7. you should have this.

//e.snmc.io/i/300/s/e3ab943936c01e3b5ee1d3c5911ec088/2431642

8. put that into this section of the code:

</style>

</div>

<div class="title">Artist Name - Album Name</div>

NOTE:

If you copy more than just the //e.snmc.io/i/300/s/(letters and numbers), your images will be off-center, don't do it.

I've had some issues with this that and they were solved by just deleting the code for the last album in the list. IDK.

You can add/subtract any number of albums.

NOTICE THE QUOTATION MARKS AROUND THE "//e.snmc.io/i/300/s/(letters and numbers)" !!!! KEEP THEM IN!!!

CODE:

note: the first part will set up the way it looks. scroll down to see the bold parts where you input what albums you want.

<style>

#vinyl-gallery * {

all: unset;

}

#vinyl-gallery {

all: initial!important;

width: 100%!important;

height: 230px!important;

margin: 30px 0!important;

display: flex!important;

flex-direction: row!important;

position: relative!important;

margin-left: -6px!important;

}

#vinyl-gallery .vinyl {

all:unset!important;

perspective: 500px !important;

width: 18px!important;

transition: width 0.5s!important;

}

#vinyl-gallery .vinyl:hover {

width: 148px!important;

}

#vinyl-gallery img {

all:unset!important;

transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;

width: 180px!important;

height: 180px!important;

transform: rotateX(0deg) rotateY(25deg)!important;

transform-style: preserve-3d!important;

border-radius: 4px!important;

border: 2px solid rgba(0, 0, 0, 0.1)!important;

object-fit: cover!important;

}

#vinyl-gallery .vinyl:hover img {

transform: rotateX(0deg) rotateY(10deg)!important;

width: 188px!important;

height: 188px!important;

margin-top: -2px!important;

}

#vinyl-gallery .title {

color: #000000;

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;

}

</style>

</div>