Симпатичный список файлов, загружаемых к ресурсу через MIGX

TV Поле migx_documents — вкладки формы

[
  {
  "caption": "Заголовок",
  "fields": [
    {
    "field": "file",
    "caption": "Файл",
    "inputTVtype": "file",
    "sourceFrom": "migx"
    },
    {
    "field": "class",
    "caption": "Тип документа",
    "inputTVtype": "listbox",
    "inputOptionValues": "Word==doc_word||PDF==doc_pdf"
    },
    {
    "field": "name",
    "caption": "Название",
    "inputTVtype": "text"
    }
  ]
  }
]

TV Поле migx_documents — разметка колонок

[{
  "sourceFrom": "migx",
  "header": "Файл",
  "dataIndex": "file"
},
    {
  "header": "Название",
  "dataIndex": "name"
    },{
  "header": "Тип документа",
  "dataIndex": "class"
}]

Чанк migx_documents_tpl

<li class="[[+class]]">
  <a href="[[+file]]" target="_blank">[[+name]]</a>
  <span class="filesize">[[+file:FileSize]]</span>
</li>

Вызов на странице:

<ul class="document_page_list">
[[!getImageList?
	&tvname=`migx_documents`
	&tpl=`migx_documents_tpl`
	&docid=`[[*id]]`
	&limit=`999`
]]
</ul>

Сниппет FileSize

В заметке [MODX] Узнать размер файла

CSS

Кстати, симпатичные иконки я нагло взял в интерфейсе почты mail.ru..

.document_page_list{
  margin: 0 auto;
}
.document_page_list li {
  list-style-type: none;
  padding: 10px 0 10px 85px;
  font-size: 16px;
  margin-bottom: 7px;
}
.document_page_list li a{
  text-decoration: none;
  border-bottom: 1px solid;
}

.document_page_list li span{
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}

.document_page_list li.doc_pdf{
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAgMTYwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNjAgMTYwIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0Y5NjY1NyIgZD0iTTEyMy44MzMgMEgxMEM0LjQ3NyAwIDAgNC41IDAgMTB2MTQwYzAgNS41IDQuNSAxMCAxMCAxMGgxNDBjNS41MjMgMCAxMC00LjQ3NyAxMC0xMFYzNi4xNjdDMTQ5LjMzMyAyNS41IDEyOSA1LjIgMTIzLjggMHoiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzk5MjExMiIgZD0iTTEyNCAwbDM2IDM2aC0yNmMtNS41MjMgMC0xMC00LjQ3Ny0xMC0xMFYweiIvPjxwYXRoIGZpbGw9IiM5OTIxMTIiIGQ9Ik01OC44NTggNjYuOTljLS41MjItMS41OTUtMS44MDYtMy4wMTUtMi45NDYtNC4yNi0xLjE0LTEuMjQ1LTIuNjE4LTEuNzktNC40MzQtMi41NS0xLjgxNy0uNzU4LTYuNjEtMS4xMzctNi42MS0xLjEzN2wtMTQuOTE1LjEyNHY0MS43ODhoOC4xMDV2LTExLjg5aDYuODFjMi41OSAwIDQuNzkyLS4zOCA2LjYxLTEuMTM4IDEuODE1LS43NTggMy4yOTMtMS43NiA0LjQzMy0zLjAwNSAxLjE0LTEuMjQ0IDMuMzMtMi45NzggMy44NTQtNC41OTMuNTIyLTEuNjE2LjMzLTYuMjU0LjMzLTcuOTI4IDAtMS43MDMtLjY5My0zLjgwMy0xLjE5My01LjQxM3pNNDkuNzEgNzcuOThjLS40NDUuODE2LTEuMDM0IDEuNDQ4LTEuNzY4IDEuOS0uNzM1LjQ0Ny0xLjU4NS43NS0yLjU1LjkwNC0uOTY3LjE1Ni0xLjk3Mi4yMzMtMy4wMTUuMjMzSDM4LjA2VjY3LjEyNWg0LjMxOGMxLjA0MyAwIDMgLjIgMyAuMnMxLjgxNi41IDIuNi45MDVjLjczMy40IDEuMyAxLjEgMS44IDEuODk2LjQ0NC44LjcgMiAuNyAzLjMtLjEgMS4zNzQtLjI3OCAzLjc3NC0uNzc4IDQuNTUzem00Ny42NTctNy4zODRjLS45NDctMi41NjctMi43MTMtNC43MDYtNC4zOTQtNi40MTgtMS42ODItMS43MS0zLjY3Mi0yLjk5NS01Ljk3Mi0zLjg1LTIuMjk3LS44NTYtNC43OC0xLjI4NC03LjQ0Ny0xLjI4NGgtMTMuNTZ2NDEuOTEyaDEzLjU2YzMuMTY4IDAgNS45Mi0uNTM0IDguMjYtMS42MDUgMi4zMzgtMS4wNjcgNC44OTQtMi42NiA2LjQ2LTQuNTMgMS41NjQtMS44NjUgMi44ODMtNC4wODIgMy42NTctNi42NS43NzMtMi41NjcuNzA3LTcuNDk1LjcwNy0xMC41MyAwLTMuNDQtLjMzNy00LjQ0LTEuMjM3LTcuMDQzek04OC4zNjQgODYuNGMtLjU4IDEuNTk1LTEuMzUzIDIuODg4LTIuMzIgMy44OHMtMi4wNjcgMS43MDItMy4zMDMgMi4xM2MtMS4yMzUuNDI4LTIuNTEuNjQyLTMuODI0LjY0MmgtNC44NDJWNjcuMjI1aDMuMjJjMi4yNCAwIDQuMS4zIDUuNy45NjIgMS41MjUuNiAyLjggMS42IDMuNyAyLjc3Mi45MjYgMS4yIDEuNiAyLjcgMiA0LjMuNDA1IDEuNy42IDMgLjYgNS4wNzctLjA2IDIuMzYyLS4zOTMgNC40NjItLjg5MyA2LjAzNHptNDEuNjgyLTI3LjM1NmgtMjYuMDc0djQxLjkxMmg4LjA4Vjg1LjA4aDkuOTY1di04LjA4MmgtOS45NjVsLS4wNTYtOS44OThoMThsLjA1LTguMDU2eiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
}
.document_page_list li.doc_word{
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAgMTYwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNjAgMTYwIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzc0QjVFMyIgZD0iTTEyMy44MzMgMEgxMEM0LjQ3NyAwIDAgNC41IDAgMTB2MTQwYzAgNS41IDQuNSAxMCAxMCAxMGgxNDBjNS41MjMgMCAxMC00LjQ3NyAxMC0xMFYzNi4xNjdDMTQ5LjMzMyAyNS41IDEyOSA1LjIgMTIzLjggMHoiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzM5NTVCOCIgZD0iTTEyNCAwbDM2IDM2aC0yNmMtNS41MjMgMC0xMC00LjQ3Ny0xMC0xMFYwek00NyA1MC4wMDJoMTEuODIybDYuNjczIDM5LjI1Mkw3NC4zNiA1MGgxMS40MjRsNy4xMzggMzguNyA2LjkwOC0yOC43MDRoLTYuODFWNTBIMTEzbC0xNC4zNzggNjAuMDNoLTExLjRMNzkuNTEgNzUuMDc2bC04LjAzIDM0Ljk0Nkg1OS4zNTdMNDcgNTAuMDAyeiIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
}