Change Music Artist “Included In” section to “Songs” style?

[user24 245]

Hi all, I was wondering if anyone knows how to do the following with CSS..?

I can sometimes manage some very basic changes, but this is a bit too complex for me... is it even possible???

Presently, the Music Artist (and Album Artist and Composer) detail pages show a smaller image layout for “Songs” and a larger image layout for “Albums”, “Appears On”, “Included In” and “More Like This”.

(Note: typically, at 100% zoom level, the “Songs” section is three rows high, but on my screenshot examples below, the zoom level is set to 50% to fit ‘everything’ vertically and this has automatically changed “Songs” to being two rows high.)

I would like to make the “Included In” section must less prominent than “Albums” and “Appears On” to more easily differentiate Album covers from Collection and Playlist icons. To keep the overall UI consistent, copying the “Songs” style would be ideal.

Is it possible to make the “Included In” section the same style as the “Songs" section?

Here is a mock-up example of what I am imagining:

If anyone knows how to do this, that would be brilliant!

If it’s not technically possible with CSS (or any other simple 'workaround' method), then I’ll submit a Feature Request for the future... Cheers!

Edited December 29, 2024 by user24

[Happy2Play 9446]

Looks like you would have to edit the html to mirror the other section and probably js file also but didn't look.

I guess you could resize the section.  Just the text issue.

div.appearsOnListsSection {
@supports (width: max(10em,5vw)) {

    .squareCard-horiz {
        width: calc(50vw / max((var(--square-cards) + var(--user-cards-size-adjust)),2));
    }
    }
}

.

 

[user24 245]

16 hours ago, Happy2Play said:

I guess you could resize the section.  Just the text issue.

Thank you kindly, sir! That’s a very good simple-to-implement idea (better than mine) and I think will ultimately lead to a viable ‘keeper’ solution...

The underlying text being ‘chopped off’ isn’t really a concern, as all my Collections/Playlists/Genres/Tags have custom icons that are easily for me to recognise, as a small size, at a glance. Therefore, I’ve tried a bit more experimenting...

• Re-sized the images/icons to be the same height as the “Play” row of buttons (45.81vw).
• Removed the heading and underlying text to just leave the icons.
• Rearranged the order of the vertical sections.
• Adjusted the absolute positioning of the “Included In” section and all sections below

This is what I have working so far (not a mock-up, and not final, by any means):

Of course, the non-targeted absolute positioning plays havoc as soon as the window size is adjusted, or another page is viewed (but this was a quick-and-dirty experiment to judge the look & feel).

I have two follow-up questions:

1. Is it possible (for the example above) to target only the Artist/Album Artist/Composer pages and position the “Included In” section relative to the above “Overview” section to allow for responsive changes? (If this is not easy, no big deal, I can revert back to having a standard LHS-justified row, which I have already tried, and it works.)
2. While the “vw” value can be adjusted to exactly match the icons size to any other preferred element, is there also a way to independently adjust the spacing between the “Included In” icons without affecting the size?

Thanks again for your help so far...

[Happy2Play 9446]

16 hours ago, user24 said:

Is it possible (for the example above) to target only the Artist/Album Artist/Composer pages

Unfortunately, not that that can see as they (itemdetails) are all "view-item-item".

As for Position since they are different containers it isn't that easy

 

16 hours ago, user24 said:

is there also a way to independently adjust the spacing between the “Included In” icons without affecting the size?

I don't think so.  You can target (div.appearsOnListsSection .cardbox) margins but may have to adjust size again. 

Little targeted as it is limited to div.itemMainScrollSlider-nopaddingtop but has affects on other content types.

div.view-item-item div.itemMainScrollSlider-nopaddingtop div.details-additionalContent {
	display: flex;
	flex-flow: column;}
	
div.view-item-item div.itemMainScrollSlider-nopaddingtop div.appearsOnListsSection {
@supports (width: max(10em,5vw)) {

    .squareCard-horiz {
        width: calc(30vw / max((var(--square-cards) + var(--user-cards-size-adjust)),2));
    }
    }
	order: -1;
	padding-left: 20vw;
}

div.view-item-item div.itemMainScrollSlider-nopaddingtop div.appearsOnListsSection .cardBox {margin:.2em;}
div.view-item-item div.itemMainScrollSlider-nopaddingtop div.appearsOnListsSection h2 {display: none;}
div.view-item-item div.itemMainScrollSlider-nopaddingtop div.appearsOnListsSection .cardText {display: none;}

example from movies

Edited December 31, 2024 by Happy2Play

[Happy2Play 9446]

Edit a little more targeted ignoring the Movie example

div.view-item-item div.itemMainScrollSlider-nopaddingtop div.details-additionalContent:not(.darkContentContainer-tv .details-additionalContent) {
	display: flex;
	flex-flow: column;}
	
div.view-item-item div.itemMainScrollSlider-nopaddingtop div.appearsOnListsSection:not(.darkContentContainer-tv .appearsOnListsSection:) {
@supports (width: max(10em,5vw)) {

    .squareCard-horiz {
        width: calc(30vw / max((var(--square-cards) + var(--user-cards-size-adjust)),2));
    }
    }
	order: -1;
	padding-left: 20vw;
}

div.view-item-item div.itemMainScrollSlider-nopaddingtop div.appearsOnListsSection .cardBox:not(.darkContentContainer-tv .appearsOnListsSection .cardBox) {margin:.2em;}
div.view-item-item div.itemMainScrollSlider-nopaddingtop div.appearsOnListsSection h2:not(.darkContentContainer-tv .appearsOnListsSection h2) {display: none;}
div.view-item-item div.itemMainScrollSlider-nopaddingtop div.appearsOnListsSection .cardText:not(.darkContentContainer-tv.appearsOnListsSection .cardText) {display: none;}

 

[user24 245]

@Happy2Play Thanks for trying a few more things. I managed to get your first revised code working and played around with it a bit. Much more elegant than what I had cobbled together. I couldn't get the second revised code working, but didn't persevere too long with it. In hindsight, simpler is much better and your first answer is the best (I will mark it as the solution.)

The only minor change I now have is (vw=53) which gives an image size approx. 50% of the Album image size in my standard screen/view.Therefore I can fit 14 Collections in the same horizontal space as 8 Albums (I will very likely run with this for quite a while now):

Thanks for all your assistance in 2024. It's appreciated greatly by me and I'm sure by many others as well. All the best for 2025!!!

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

On a completely different subject, I noticed that your "The Beatles" screenshot shows a track count to the LHS of Genres. Is this a music library setting I don't know about, or is it custom??? I'm really interested in seeing Album Counts and Song Counts summarised at a higher level, and posted a Feature Request a while back:

[Happy2Play 9446]

9 minutes ago, user24 said:

On a completely different subject, I noticed that your "The Beatles" screenshot shows a track count to the LHS of Genres. Is this a music library setting I don't know about, or is it custom???

Slight change in beta to show that value on itemdetails page.