Jump to content

Options for image / doc display on detailed audio track page


Recommended Posts



I note it is already possible to add a custom image on a per-audio-track basis in Music libs,

these images are then displayed in the detailed Track page on Playback.


This seems to be aimed as display of CD Cover images, there seem to be size / height/width

limitations (with images which are not roughly sqaure ?) - I noted a portrait-format image was

displayed on the left of the playback bar at the bottom, but not on the main page.


What I'm wondering is:


 - what are the image limitations for display?


 - what formats are supported ?


 - would it be possible to support document formats (.odt or .doc or .pdf)?


What I'm trying to achieve:


It's common for peeps making music to practice along to recorded tracks, and it would be really nice

if there was a convenient way for Emby to display musical notation of the track in whatever format

to aid the learning process. Currently when the track changes & I need to fumble with paper-based folders

to find the next track before I can start playing ...


In my case I have the chords written in textual form in Office documents. I have been able to convert

such a file to pdf - then from pdf to jpeg - then cropped it to be roughly square ... pretty manual process

but it did work with said limitations.


It would be great if I could display (the first page of) an .odt or .pdf file in A4 (or US Letter) format.


Would this be  possible - or perhaps someone has an alternate idea which might achieve something similar?




Link to comment
Share on other sites

Ok, the aspect ratio of the img is maintained - which is good. However there is a height limitation - looks like on a percentage basis (changing the height of the browser changed img height,

but the max height is only ~50% of the window height. For very simple tracks this works - but for portrait data approaching a paper page size, scaling just makes the text too small to read - 

pls see attached 2 image samples. This is a shame as I thing this could be a really nice feature(that nobody else supports). 


Would it be poss to allow to explicitly set greater height percentages via either a config pram, or possibly a naming convention of the img file (maybe imagename_a4.jpg or imagename_80% ....) ?


 Or maybe a way to provide some css for the containing div??


Well - I know the answer - of course it's possible ;) - but is there a realistic chance of it happening? 



Edited by FredFrin
Link to comment
Share on other sites

This is a little outside the normal use case so i think your best bet will be figuring something out with our custom css feature.

Link to comment
Share on other sites

  • 3 weeks later...

So, I played around with the CSS for an hour and the result is quite nice (see screenshot). 

Side effect is that CD cover images for 'standard' CDs also appear larger. Since their resolution
is often relatively small this may cause more evident blurring.
I havn't seen the library name or album folder as an html-id in the song details page anywhere -
this would be really nice enhancement it would allow library-specific css.

/* Resize Media Images - quick method to check css changes made here work ... 
#homeTab .section0 .smallBackdropCard {
    width: 10%;

/* This reduces the padding around the header row, but this space is not
     available to the poster image. The gain is not large anyway - and we get
     misalignment with the playlist column header - best skip this ....
.headerTop {
  padding: 0 !Important;

/* Increase available height of poster image - this makes a lot of vertical space available! */
.osdPoster-img {
   max-height: 100% !Important;

/* Reduce top & bottom margins around Song title */
.videoOsdText-remotecontrol {
   margin: 0.2em 0 !Important;

/* Reduce padding around bottom controls */ 
.videoOsdBottom-buttons {
  padding: 0.2em !Important;



Link to comment
Share on other sites

  • 2 weeks later...

There's always another question ... ;)


@Luke: You say "They need to be image files." - wasn't sure what formats that includes ... I thought svg would provide really crisp text, so I tried setting an svg via 'Edit Images' on a track in chrome:


 - the Upload file selection browser includes .svg extensions as image files, so I selected one

 - on selection of 'Upload' the url is set to http://<local emby-server ip>:8096/web/index.html?uploadImage=Tiger-Rag.svg&selectImageType=Primary#!#dlg1581857250056

 - the app reloads - I see nothing in the app-log, in the browser console there appear no errors on re-load - but at the end of the re-load I see this js error: 

 page.js?v= Uncaught (in promise) TypeError: Cannot read property 'fn' of undefined    at Function.page.dispatch (page.js?v=
    at Function.page.replace (page.js?v=
    at Function.page.start (page.js?v=
    at page (page.js?v=
    at router.js?v=

At this point the js-app seems crashed.


So there are 2 issues:


 - the app could be made more robust to avoid crashes

 - can svg be supported ;) ??? HTML5 supports <svg> tags, so perhaps it's not too difficult ... I think due to it's great display properties, svg usage is only going to grow (but that's opinion of course ..)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...