--- title: Home url: 'https://demo.getgrav.org/downloads-pro/' markdown: 'https://demo.getgrav.org/downloads-pro/index.md' date: '2022-01-29' description: 'Downloads Pro Premium Plugin Demo This is a demo site for Downloads Pro based on Quark theme. Throughout the site we have highlighted numerous ways Downloads Pro can be used by either downloads page types and through [download /] and [downloads /] shortcodes. Website Documentation Get This Demo…' --- # Downloads Pro ## Premium Plugin Demo This is a demo site for [Downloads Pro](https://getgrav.org/premium/downloads-pro) based on Quark theme. Throughout the site we have highlighted numerous ways **Downloads Pro** can be used by either `downloads` page types and through `[download /]` and `[downloads /]` **shortcodes**. [ Website](https://getgrav.org/premium/downloads-pro)[ Documentation](https://getgrav.org/premium/downloads-pro/docs)[ Get This Demo](https://github.com/trilbymedia/grav-skeleton-downloads-demo) ## Structure of the Site This [skeleton ](https://github.com/trilbymedia/grav-skeleton-downloads-demo) features a [Downloads](https://demo.getgrav.org/downloads-pro/downloads) page that we organized in a nested structure, to showcase how you can organize different categories in different Grav pages. To demonstrate the powerful access level integration with Grav, we created a **Protected** category page that will require a proper authenticated user in order to be accessed. Additionally, we also included individual *protected* assets in areas that are public. These assets will require user authentication. ## You are in control Shortcodes in Downloads Pro serve an important role and provide a powerful mechanism to integrate downloads anywhere on your site, wherever you can place content. For example, to embed the downloads as we see them in the dedicated [Downloads](https://demo.getgrav.org/downloads-pro/downloads) page, we can use the `[downloads /]` shortcode with the layout `list-folders`. ``` [downloads route="/downloads" layout="list-folders" /] ``` - [ Photos ](https://demo.getgrav.org/downloads-pro/downloads/photos) - [ Software ](https://demo.getgrav.org/downloads-pro/downloads/software) - [ Documents ](https://demo.getgrav.org/downloads-pro/downloads/documents) ## Embed Individual Downloads Downloads Pro comes with various built-in layouts that can be utilized with your content. Layouts can be also easily created to satisfy any need. More about layouts can be found in the [documentation](https://getgrav.org/premium/downloads-pro/docs). ### Button Layout This layout renders a button with a customizable title that can be clicked to download the asset. Because it renders as an `` tag, this particular layout can be also used inline with your content, if needed. ``` [download="/downloads/photos/nature/miroslav-skopek-4c82fCful4c-unsplash.jpg" title="Download Nature Photo" layout="button" /] [download filename="harold-wainwright-Bqip9io1wgg-unsplash.jpg" route="/downloads/photos/urban" title="Download Urban Photo" layout="button" /] [download filename="/downloads/photos/people/windows-wpIYy2lZ04s-unsplash.jpg" title="Download People Photo" layout="button" /] ``` [ Download Nature Photo ](https://demo.getgrav.org/downloads-pro/downloads/photos/nature/id:fd21e04a8f4ebad9647443e209bae88d) [ Download Urban Photo ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:57786239fb00f2c15367ed5a7a35fde8) [ Download People Photo ](https://demo.getgrav.org/downloads-pro/downloads/photos/people/id:a2d6a3554286bb0294d29a5a7d5b9a9d) The file value has been specified in 3 different ways, they are all equivalent. ### Card Layout [ ![](https://demo.getgrav.org/downloads-pro/images/a/c/4/9/2/ac492d99d20083a562ce846fd6b9dd0f799f9183-miroslav-skopek-4c82fcful4c-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/nature/id:fd21e04a8f4ebad9647443e209bae88d) new hot [miroslav-skopek-4c82fCful4c-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/nature/id:fd21e04a8f4ebad9647443e209bae88d) Size 1.02 MB Downloads 1256 [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/nature/id:fd21e04a8f4ebad9647443e209bae88d) #### Simple and beautiful The `card` layout is a great way to present a download in a modern and appealing way. It can be placed inline, like in this example to blend nicely with your content. Adding a card to your content can be done through the `download` shortcode, as you can see from the sample below: ``` [download filename="/downloads/photos/nature/miroslav-skopek-4c82fCful4c-unsplash.jpg" layout="card" width="300" /] ``` ## Embedded Grid and Table Downloads Finally, you can also embed a full list of downloads. *Downloads Pro* provides 2 layouts for this, `list` and `grid`. By default these layouts will also include the folders' navigation. Most likely this is not something expected when embedding, for that you can use the targeted layout version: `list-files` and `grid-files`. Note that the [Photos / Urban](https://demo.getgrav.org/downloads-pro/photos/urban) page, has a protected asset *lawless-capture (protected example)*, which you will only be able by [logging in](https://demo.getgrav.org/downloads-pro/sign-in). ### Cards Grid Layout An example of a grid layout in use. Which is a replica of the [Photos / Urban](https://demo.getgrav.org/downloads-pro/photos/urban) section of this skeleton. ``` [downloads route="/downloads/photos/urban" layout="grid-files" width="300" /] ``` [ ![](https://demo.getgrav.org/downloads-pro/images/e/6/7/6/f/e676fb733e3a2639983deec402b4aa48e65e54cf-hannah-gibbs-vchztlpcpba-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:e54fb4d92b824a306797cdf70b60b385) new hot [hannah-gibbs-VChzTLPcPBA-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:e54fb4d92b824a306797cdf70b60b385) Size 5.39 MB Downloads 1213 [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:e54fb4d92b824a306797cdf70b60b385) [ ![](https://demo.getgrav.org/downloads-pro/images/2/9/b/2/6/29b266f03c61c07454013b45661bf6351e40efc4-harold-wainwright-bqip9io1wgg-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:57786239fb00f2c15367ed5a7a35fde8) featured new hot [harold-wainwright-Bqip9io1wgg-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:57786239fb00f2c15367ed5a7a35fde8) Size 6.09 MB Downloads 1139 [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:57786239fb00f2c15367ed5a7a35fde8) [ ![](https://demo.getgrav.org/downloads-pro/images/1/6/2/d/4/162d4917d3a8f7e0d4e6c5c5f7356ba1646e9e2e-ilya-bronskiy-c8pe6vzv-o8-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:666c5075736064d66b41bcc14a2e5e7e) new hot [ilya-bronskiy-c8pE6vzV-o8-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:666c5075736064d66b41bcc14a2e5e7e) Size 3.01 MB Downloads 1163 [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:666c5075736064d66b41bcc14a2e5e7e) [ ![](https://demo.getgrav.org/downloads-pro/images/2/0/f/e/c/20fec440946c302b3d160c9de5bfeec663e0ed6f-mak-m8g--echdny-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:0473921f9987959f41c54b1a3183704b) new hot [mak-M8G--eCHdnY-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:0473921f9987959f41c54b1a3183704b) Size 3.78 MB Downloads 1082 [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:0473921f9987959f41c54b1a3183704b) [ ![](https://demo.getgrav.org/downloads-pro/images/5/5/4/8/3/55483de9ad6cdcee221adb679e788db95a05316c-tim-hufner-mqweiocd6ms-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:d151ab2f60d03dd13bfe71aefd63570e) new hot [tim-hufner-MqWeiOCd6ms-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:d151ab2f60d03dd13bfe71aefd63570e) Size 1.17 MB Downloads 1092 [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:d151ab2f60d03dd13bfe71aefd63570e) ### Table List Layout Now let's look at the same Grid example above, this time by using the `list-files` layout. ``` [downloads route="/downloads/photos/urban" layout="list-files" width="300" /] ``` | | Name | Size | Downloads | Modified | | |---|---|---|---|---|---| | [ ![](https://demo.getgrav.org/downloads-pro/images/3/1/2/d/a/312dae1e253c739a6186f22857cb42d329a46bfc-hannah-gibbs-vchztlpcpba-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:e54fb4d92b824a306797cdf70b60b385) | [hannah-gibbs-VChzTLPcPBA-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:e54fb4d92b824a306797cdf70b60b385) hot | 5.39 MB | 1213 | 5 yrs ago | [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:e54fb4d92b824a306797cdf70b60b385) | | [ ![](https://demo.getgrav.org/downloads-pro/images/8/6/f/8/2/86f82a494e53a2bbd8ed3bc7126373eb255d27cc-harold-wainwright-bqip9io1wgg-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:57786239fb00f2c15367ed5a7a35fde8) | [harold-wainwright-Bqip9io1wgg-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:57786239fb00f2c15367ed5a7a35fde8) featured hot | 6.09 MB | 1139 | 5 yrs ago | [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:57786239fb00f2c15367ed5a7a35fde8) | | [ ![](https://demo.getgrav.org/downloads-pro/images/4/b/6/a/b/4b6ab505f80d17840841a26c0eab830b2e3d4f38-ilya-bronskiy-c8pe6vzv-o8-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:666c5075736064d66b41bcc14a2e5e7e) | [ilya-bronskiy-c8pE6vzV-o8-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:666c5075736064d66b41bcc14a2e5e7e) hot | 3.01 MB | 1163 | 5 yrs ago | [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:666c5075736064d66b41bcc14a2e5e7e) | | [ ![](https://demo.getgrav.org/downloads-pro/images/a/8/b/d/1/a8bd182c14ddf78f2c49d61d22ac292f38f60c42-mak-m8g--echdny-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:0473921f9987959f41c54b1a3183704b) | [mak-M8G--eCHdnY-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:0473921f9987959f41c54b1a3183704b) hot | 3.78 MB | 1082 | 5 yrs ago | [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:0473921f9987959f41c54b1a3183704b) | | [ ![](https://demo.getgrav.org/downloads-pro/images/1/d/d/c/d/1ddcd64f4696cf5ae67108ed2f35960bacf5fc6d-tim-hufner-mqweiocd6ms-unsplash.jpg) ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:d151ab2f60d03dd13bfe71aefd63570e) | [tim-hufner-MqWeiOCd6ms-unsplash.jpg](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:d151ab2f60d03dd13bfe71aefd63570e) hot | 1.17 MB | 1092 | 5 yrs ago | [ Download ](https://demo.getgrav.org/downloads-pro/downloads/photos/urban/id:d151ab2f60d03dd13bfe71aefd63570e) | --- ## Navigation - Next: [Downloads](https://demo.getgrav.org/downloads-pro/downloads.md)