Change Primary Image for Live TV

[AstroGeek 2]

I recently found some primary images that others here had created and they look really good.

I set a primary image for Live TV, like I did for all my other libraries, but it still shows the generic folder icon.

 

Does anyone know if it's actually possible to set an image for this one?

Edited August 8, 2022 by AstroGeek

[GrimReaper 3286]

Try clearing browser cache. 

[Luke 37049]

Hi, try setting the thumb image type and see if that helps.

[Happy2Play 8273]

Did you refresh the page?

Might need to see a server log of when you added the image but not seeing an issue here as just applied this image via edit images.

2022-08-08 14:40:58.806 Info Server: http/1.1 POST http://‌‍‍localhost‌:8097/emby/Items/2b2bca16aacc8a14d53a11bb829eafa5/Images/Primary/0/Url?X-Emby-Client=Emby Web&X-Emby-Device-Name=Microsoft Edge Windows&X-Emby-Device-Id=a865b1ee-559a-49b6-ad70-f096d996e01c&X-Emby-Client-Version=4.7.6.0&reqformat=json. UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36 Edg/104.0.1293.47
2022-08-08 14:40:58.810 Debug SqliteItemRepository: GetInternalId from 2b2bca16-aacc-8a14-d53a-11bb829eafa5
2022-08-08 14:40:58.812 Info HttpClient: GET https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDrYc2RgGaJ7Jqpruzi390JbcEnf8ZNeZmvNqcIKOEtcAPg9tT4w2zevIkJmTafVssJeM&usqp=CAU
2022-08-08 14:40:59.000 Debug ProviderManager: Saving image to C:\Users\Media\Desktop\Stable\programdata\metadata\views\livetv\poster.jpg

 

[AstroGeek 2]

Yeah, refreshed, cleared browser cache. I should note that I'm also seeing the default Live TV icon in Emby running on my Shield TV.

I did try setting the thumb image and didn't see any change.

Edited August 8, 2022 by AstroGeek

[Happy2Play 8273]

Only guess would be issue saving to your \metadata\views\livetv folder.  Path will be prevalent to platform installed on.  You can see path via top section of a server log or Dashboard three dot menu next to power button.

[AstroGeek 2]

It's definitely writing to the appropriate folder. I deleted the images, saw that directory was empty, added both the primary and thumbnail back and can see that they're showing in the directory with the correct owner:group and read permissions for all users.

root@nas:/var/lib/docker/volumes/emby/metadata/views/livetv# ls -la
total 8
drwxr-xr-x 2 docker users 4096 Aug  8 16:10 .
drwxr-xr-x 3 docker users 4096 Aug  8 16:10 ..
root@nas:/var/lib/docker/volumes/emby/metadata/views/livetv# ls
poster.jpg
root@nas:/var/lib/docker/volumes/emby/metadata/views/livetv# ls
landscape.jpg  poster.jpg
root@nas:/var/lib/docker/volumes/emby/metadata/views/livetv# ls -la
total 872
drwxr-xr-x 2 docker users   4096 Aug  8 16:11 .
drwxr-xr-x 3 docker users   4096 Aug  8 16:10 ..
-rw-r--r-- 1 docker users 440917 Aug  8 16:11 landscape.jpg
-rw-r--r-- 1 docker users 440917 Aug  8 16:10 poster.jpg

 

[Happy2Play 8273]

Don't know permission that well but shouldn't it be emby not docker?

Are the permissions the same when looking at other items in \metadata folder?

Are there permissions errors in your server log?

[AstroGeek 2]

With my setup this is correct. I use UID 1000, GID 100, which maps to docker:users.

One thing I just saw when looking at the HTML, the button object for Live TV and Playlists is different. Playlists contains an <img> item inside the button, but Live TV doesn't. Not sure if it's just because Emby is having issues with the image or something else.

Playlists

#good
<div data-id="816620" data-index="11" tabindex="0" draggable="true" class="card smallBackdropCard smallBackdropCard card-hoverable focusable">
    <div class="cardBox cardBox-touchzoom cardBox-bottompadded">
        <button type="button" data-action="link" tabindex="-1" class="itemAction cardContent-button cardContent cardImageContainer cardContent-shadow cardContent-bxsborder-fv coveredImage cardScalable cardPadder-smallBackdrop">
            <img
                draggable="false"
                alt=" "
                class="cardImage coveredImage"
                loading="lazy"
                decoding="async"
                src="https://emby.astrogeek.info/emby/Items/816620/Images/Primary?maxHeight=169&amp;maxWidth=300&amp;tag=63dd818666193f26a5457f615805dae1&amp;quality=90"
            />
            <div is="emby-itemrefreshindicator" class="hide progressring" data-progress="0" data-status="undefined">
                <div class="progressring-bg">
                    <div class="progressring-text">0%</div>
                </div>
                <div class="spiner-holder-one animate-0-25-a">
                    <div class="spiner-holder-two animate-0-25-b" style="transform: rotate(-90deg);">
                        <div class="progressring-spiner"></div>
                    </div>
                </div>
                <div class="spiner-holder-one animate-25-50-a">
                    <div class="spiner-holder-two animate-25-50-b" style="transform: rotate(-90deg);">
                        <div class="progressring-spiner"></div>
                    </div>
                </div>
                <div class="spiner-holder-one animate-50-75-a">
                    <div class="spiner-holder-two animate-50-75-b" style="transform: rotate(-90deg);">
                        <div class="progressring-spiner"></div>
                    </div>
                </div>
                <div class="spiner-holder-one animate-75-100-a">
                    <div class="spiner-holder-two animate-75-100-b" style="transform: rotate(-90deg);">
                        <div class="progressring-spiner"></div>
                    </div>
                </div>
            </div>
        </button>
        <div class="cardOverlayContainer itemAction cardScalable cardPadder-smallBackdrop cardPadder-margin" data-action="link">
            <label tabindex="-1" title="Multi-Select" aria-label="Multi-Select" data-action="multiselect" class="chkItemSelectContainer chkCardSelectContainer cardOverlayButton cardOverlayButton-hover itemAction emby-checkbox-label">
                <input tabindex="-1" class="chkItemSelect chkCardSelect emby-checkbox emby-checkbox-notext" is="emby-checkbox" type="checkbox" data-classes="true" /><span class="checkboxLabel chkCardSelect-checkboxLabel"></span>
            </label>
            <div class="cardOverlayButton-br">
                <button
                    tabindex="-1"
                    type="button"
                    title="More"
                    aria-label="More"
                    is="paper-icon-button-light"
                    class="paper-icon-button-light cardOverlayButton cardOverlayButton-hover itemAction md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover"
                    data-action="menu"
                >
                    
                </button>
            </div>
        </div>
        <div class="cardText cardTextCentered cardText-first-padded cardText-first">
            <button tabindex="-1" title="Playlists" type="button" class="itemAction textActionButton cardTextActionButton emby-button button-link" data-action="link">Playlists</button>
        </div>
    </div>
</div>

 

LIVE TV

<div data-id="2" data-index="12" tabindex="0" draggable="true" class="card smallBackdropCard card-hoverable focusable">
    <div class="cardBox cardBox-touchzoom cardBox-bottompadded">
        <button
            type="button"
            data-action="link"
            tabindex="-1"
            class="cardContent-button cardContent cardImageContainer cardContent-shadow cardContent-bxsborder-fv defaultCardBackground defaultCardBackground0 cardScalable cardPadder-smallBackdrop itemAction"
        >
            <div is="emby-itemrefreshindicator" class="hide progressring" data-progress="0" data-status="undefined">
                <div class="progressring-bg">
                    <div class="progressring-text">0%</div>
                </div>
                <div class="spiner-holder-one animate-0-25-a">
                    <div class="spiner-holder-two animate-0-25-b" style="transform: rotate(-90deg);">
                        <div class="progressring-spiner"></div>
                    </div>
                </div>
                <div class="spiner-holder-one animate-25-50-a">
                    <div class="spiner-holder-two animate-25-50-b" style="transform: rotate(-90deg);">
                        <div class="progressring-spiner"></div>
                    </div>
                </div>
                <div class="spiner-holder-one animate-50-75-a">
                    <div class="spiner-holder-two animate-50-75-b" style="transform: rotate(-90deg);">
                        <div class="progressring-spiner"></div>
                    </div>
                </div>
                <div class="spiner-holder-one animate-75-100-a">
                    <div class="spiner-holder-two animate-75-100-b" style="transform: rotate(-90deg);">
                        <div class="progressring-spiner"></div>
                    </div>
                </div>
            </div>
            <i class="cardImageIcon cardImageIcon-center md-icon autortl"></i>
        </button>
        <div class="cardOverlayContainer itemAction cardScalable cardPadder-smallBackdrop cardPadder-margin" data-action="link">
            <label tabindex="-1" title="Multi-Select" aria-label="Multi-Select" data-action="multiselect" class="chkItemSelectContainer chkCardSelectContainer cardOverlayButton cardOverlayButton-hover itemAction emby-checkbox-label">
                <input tabindex="-1" class="chkItemSelect chkCardSelect emby-checkbox emby-checkbox-notext" is="emby-checkbox" type="checkbox" data-classes="true" /><span class="checkboxLabel chkCardSelect-checkboxLabel"></span>
            </label>
            <div class="cardOverlayButton-br">
                <button
                    tabindex="-1"
                    type="button"
                    title="More"
                    aria-label="More"
                    is="paper-icon-button-light"
                    class="paper-icon-button-light cardOverlayButton cardOverlayButton-hover itemAction md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover"
                    data-action="menu"
                >
                    
                </button>
            </div>
        </div>
        <div class="cardText cardTextCentered cardText-first-padded cardText-first">
            <button tabindex="-1" title="Live TV" type="button" class="itemAction textActionButton cardTextActionButton emby-button button-link" data-action="link">Live TV</button>
        </div>
    </div>
</div>

 

[Happy2Play 8273]

16 minutes ago, AstroGeek said:

Playlists contains an <img> item inside the button, but Live TV doesn't. Not sure if it's just because Emby is having issues with the image or something else.

This in normal until an actual image is applied as the class changes.

default image

class="cardContent-button cardContent cardImageContainer cardContent-shadow cardContent-bxsborder-fv defaultCardBackground defaultCardBackground0 cardScalable cardPadder-smallBackdrop itemAction"

applied image

class="itemAction cardContent-button cardContent cardImageContainer cardContent-shadow cardContent-bxsborder-fv coveredImage cardScalable cardPadder-smallBackdrop"

 

[AstroGeek 2]

Happy to report this is working now.

I restarted Emby to grab a clean log to attach, after the restart the image began showing.