CSS for movie library cast crew thumbs in grid view

[zelpi]

I think the thread title says it all. Can someone of the experts post a code for this? I searched desperately on the web and found to my surprise nothing. A grid imo would be much better as overview for a movie’s involved persons images than the current horizontal scroll view…

[TheDreadPirate]

Something like this?

Code:

#castContent .card.overflowPortraitCard {
  width: 4.2cm;
  font-size: 90%;
}
#castContent .personCard {
  width: auto;
}
#castContent .personCard .cardBox {
  margin-bottom: 0px;
  margin-right: 0px;
}
#castContent {
    flex-wrap: wrap;
}
.itemDetailPage .cardText {
  text-align: left;
}
.itemDetailPage .textActionButton {
  text-align: left;
}

   

[zelpi]

Looks good, thank you. I will test it and give feedback.

Maybe a slight change: A small gap between the thumbs ?

[zelpi]

Another issue concerning cast/crew integration. Would this be the right nfo-file for writing a person into the cast of the movie profile?

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<movie>
<title> Oblivion </title>
<originaltitle> Oblivion </originaltitle>
<actor>
<name> Tom Cruise </name>
<role> Jack </role>
</actor>
</movie>

[TheDreadPirate]

An example from my test instance.

Code:

<tvshow>
  <actor>
    <name>Mike Judge</name>
    <role>Hank Hill / Boomhauer (voice)</role>
    <type>Actor</type>
    <sortorder>2</sortorder>
    <thumb>/config/metadata/People/M/Mike Judge/folder.jpg</thumb>
  </actor>
</tvshow>

---

Looks good, thank you. I will test it and give feedback.

Maybe a slight change: A small gap between the thumbs ?

You'd change the two margin lines to be however many pixels of buffer you want.

[zelpi]

After inserting the css code all went as expected. Thank you very much!

[zelpi]

@TheDreadPirate - would you please post a css code for putting also the Special Features into a grid?

[TheDreadPirate]

Special features? Can you show a screenshot of what you want in a grid?

[zelpi]

When a movie has more than 4 or 5 clips as bonus material, you have to scroll horizontally.

You see this for example in this video at 3:05.
https://www.youtube.com/watch?v=mn18xFVXogc

With a grid, that would not be necessary any more.

[TheDreadPirate]

Code:

#specialsContent {
    flex-wrap: wrap;
}