{"id":227709,"date":"2021-04-07T14:17:17","date_gmt":"2021-04-07T13:17:17","guid":{"rendered":"https:\/\/devowl.io\/?post_type=knowledge-base&#038;p=227709"},"modified":"2021-04-07T15:58:02","modified_gmt":"2021-04-07T14:58:02","slug":"real-media-library-ordner-dateien-in-website-frontend","status":"publish","type":"knowledge-base","link":"https:\/\/devowl.io\/de\/knowledge-base\/real-media-library-folders-files-in-website-frontend\/","title":{"rendered":"Anzeige von Ordnern und Dateien im Website-Frontend (mit Medialist)"},"content":{"rendered":"<section class=\"l-section wpb_row height_medium\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_flex valign_top type_default stacking_default\"><div class=\"vc_col-sm-12 wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p>You want to show files organized in folders with Real Media Library to your website visitors (in the frontend)? Real Media Library itself only offers galleries for images. However, the free plugin <a href=\"https:\/\/wordpress.org\/plugins\/media-list\/\" target=\"_blank\" rel=\"noopener\">Medialist<\/a> offers an integration with Real Media Library folders that allows you to create file lists from folders. We explain how you should proceed!<\/p>\n<h2>What do you need to display folders\/file lists in the frontend?<\/h2>\n<p>You should have <a href=\"https:\/\/devowl.io\/wordpress-real-media-library\/\" target=\"_blank\" rel=\"noopener\">Real Media Library<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/media-list\/\" target=\"_blank\" rel=\"noopener\">Medialist<\/a> installed in your WordPress website. These two plugins allow us to create folders and display their contents in the front end of your website.<\/p>\n<p>Also, you should have already created a (normal) folder in your WordPress media library where you have sorted files. Medialist can output the following file types if they are in a Real Media Library folder (as of April 2021):<\/p>\n<p>pdf, doc, ppt, xls, txt, csv, cal, mp3, wav, wma, jpg, gif, png, bmp, tiff, icon, odt, odp, ods, exe, sql, xml<\/p>\n<h2>Insert file lists from Real Media Library folder into page\/post<\/h2>\n<p>Medialist provides a shortcode to display a list of media. You can place the shortcode in any post, page etc. and it will be automatically converted to the media list in the frontend.<\/p>\n<p>It is important that you specify <code class=\"\" data-line=\"\">globalitems=1<\/code> and <code class=\"\" data-line=\"\">rml_folder=(folder ID)<\/code> as parameters in the shortcode, so that Medialist knows from which folder you want to display all files. <code class=\"\" data-line=\"\">globalitems=1<\/code> is required so that Medialist displays all files from the folder and not just the files attached to the post. Further parameters, e.g. for sorting the files, number of files, pagination or a search, can be found in the <a href=\"https:\/\/wordpress.org\/plugins\/media-list\/\" target=\"_blank\" rel=\"noopener\">documentation of Medialist<\/a>.<\/p>\n<p>You can find the Real Media Library folder ID by selecting the desired folder in your WordPress media library and clicking on &#8220;&#8230;&#8221; in the folder toolbar to display further options for the folder. The folder ID is displayed in the lower-right corner of the modal.<\/p>\n<\/div><\/div><div class=\"w-image us_custom_92b2762d align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/finding-the-real-media-library-folder-id.png\" aria-label=\"Finding the Real Media Library folder ID\" class=\"w-image-h\"><img decoding=\"async\" width=\"890\" height=\"585\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/finding-the-real-media-library-folder-id-890x585.png\" class=\"attachment-large size-large\" alt=\"Finding the Real Media Library folder ID\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/finding-the-real-media-library-folder-id-890x585.png 890w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/finding-the-real-media-library-folder-id-326x214.png 326w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/finding-the-real-media-library-folder-id-16x12.png 16w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/finding-the-real-media-library-folder-id-652x429.png 652w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/finding-the-real-media-library-folder-id-1780x1170.png 1780w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/finding-the-real-media-library-folder-id.png 1920w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/a><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p>Now we just need to add the shortcode to display the media list. It could look like this.<\/p>\n<pre><code class=\"language-http\" data-line=\"\">[medialist globalitems=1 rml_folder=18]<\/code><\/pre>\n<\/div><\/div><div class=\"w-image us_custom_92b2762d align_none\"><a ref=\"magnificPopup\" href=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/list-of-file-of-a-real-media-library-folder-in-the-frontend.png\" aria-label=\"List of file of a Real Media Library folder in the frontend\" class=\"w-image-h\"><img decoding=\"async\" width=\"890\" height=\"434\" src=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/list-of-file-of-a-real-media-library-folder-in-the-frontend-890x434.png\" class=\"attachment-large size-large\" alt=\"List of file of a Real Media Library folder in the frontend\" loading=\"lazy\" srcset=\"https:\/\/devowl.io\/wp-content\/uploads\/blog\/list-of-file-of-a-real-media-library-folder-in-the-frontend-890x434.png 890w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/list-of-file-of-a-real-media-library-folder-in-the-frontend-326x159.png 326w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/list-of-file-of-a-real-media-library-folder-in-the-frontend-16x8.png 16w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/list-of-file-of-a-real-media-library-folder-in-the-frontend-652x318.png 652w, https:\/\/devowl.io\/wp-content\/uploads\/blog\/list-of-file-of-a-real-media-library-folder-in-the-frontend.png 1742w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"template":"","topic":[31],"class_list":["post-227709","knowledge-base","type-knowledge-base","status-publish","hentry","topic-common-issues-rml"],"acf":[],"_links":{"self":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/knowledge-base\/227709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/knowledge-base"}],"about":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/types\/knowledge-base"}],"version-history":[{"count":14,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/knowledge-base\/227709\/revisions"}],"predecessor-version":[{"id":227726,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/knowledge-base\/227709\/revisions\/227726"}],"wp:attachment":[{"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/media?parent=227709"}],"wp:term":[{"taxonomy":"topic","embeddable":true,"href":"https:\/\/devowl.io\/de\/wp-json\/wp\/v2\/topic?post=227709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}