Hi all, I've followed both the Umbraco TV guide, and this guide https://24days.in/umbraco-cms/2016/custom-list-view-layouts/ And I just can't seem to get the image to work.

In my document type, it's a Media Picker, with an ID of 'picture'

In my custom list view, the column is called Image ID (don't think this is important)

View is this:

<div ng-controller="My.ListView.Layout.SongsLayoutController as vm"
     ng-if="items"
     class="my-songs-layout__cards">

   <div
      class="my-songs-layout__card"
      ng-repeat="item in items"
      ng-class="{'-selected':item.selected}"
      ng-click="vm.selectItem(item, $event, $index)"
      ng-style="{'background-image': 'url(' + item.picture + ')'}">

      <div class="my-songs-layout__overlay">
        <div class="my-songs-layout__released">{{ item.authorName }}</div>
        <div class="my-songs-layout__artist">{{ item.authorName }}</div>
        <div class="my-songs-layout__name">{{ item.authorName }}</div>
        <div class="my-songs-layout__genre">{{ item.authorName }}</div>
      </div>

      <div class="my-songs-layout__button" ng-click="vm.clickItem(item)">View song</div>

   </div>

</div>

Controller is this:

(function () {
    "use strict";

    function SongsLayoutController($scope, listViewHelper, $location, mediaResource, mediaHelper) {

        var vm = this;

        vm.selectItem = selectItem;
        vm.clickItem = clickItem;

        // Init the controller
        function activate() {

            // Load background image for each item
            angular.forEach($scope.items, function (item) {
                getBackgroundImage(item);
            });

        }

        // Load background image
        function getBackgroundImage(item) {
            mediaResource.getById(item.picture)
                .then(function (media) {
                    // find the image thumbnail
                    item.picture = mediaHelper.resolveFile(media, true);
                });
        }

        // Item select handler
        function selectItem(selectedItem, $event, index) {

            // use the list view helper to select the item
            listViewHelper.selectHandler(selectedItem, index, $scope.items, $scope.selection, $event);
            $event.stopPropagation();

        }

        // Item click handler
        function clickItem(item) {

            // change path to edit item
            $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id);

        }

        activate();

    }

    angular.module("umbraco").controller("My.ListView.Layout.SongsLayoutController", SongsLayoutController);

})();

So you can see in the controller above I have the item.picture referenced but it's coming through with errors like this:

https://gyazo.com/cc84d77812c1ff957c8478dc2d2c15f3

And

https://gyazo.com/e0c72166df4c885f76231945cc6cac88

The Listview in console comes out like so

ng-style="{'background-image': 'url(' + item.picture + ')'}" style="background-image: url("umb://media/c4797bb5fd464057b19d3be6e0841a0a");"

For good measure, here is the manifest

{
    javascript: [
        '~/App_Plugins/AuthorLayout/authorlayout.controller.js'
    ],
    css: [
        '~/App_Plugins/AuthorLayout/authorlayout.css'
    ]
}

And here is the CSS

.my-songs-layout__cards {
    display: flex;
    flex-wrap: wrap;
}

.my-songs-layout__card {
    background-color: #ffffff;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    height: 200px;
    border: 5px solid transparent;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    margin: 10px;
    user-select: none;
    position: relative
}

.my-songs-layout__card.-selected {
    border-color: #2e8aea;
}

.my-songs-layout__card:hover {
    cursor: pointer;
}

.my-songs-layout__overlay {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
}

.my-songs-layout__released {
    margin-bottom: 5px;
    opacity: 0.5;
}

.my-songs-layout__genre {
    font-size: 11px;
}

.my-songs-layout__name {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3em;
}

.my-songs-layout__button {
    background: #2e8aea;
    color: #ffffff;
    font-size: 12px;
    text-transform: uppercase;
    display: flex;
    padding: 5px 15px;
    border: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    align-self: flex-start;
}

.my-songs-layout__button:hover {
    background: #177ce8;
}

And here is the file structure: https://gyazo.com/96d0f33a151c29a03cf0382b72611b6c

The logs don't really say much in my eyes, it almost looks like they're talking about a different issue;

https://gyazo.com/c6587fb535be62be0c4abd684ab68c6b

Id also like to be able to rename the controller and the view, but every time I change them both, the view no longer works.

Thanks!