Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • rn4j0r 15 posts 85 karma points
    Jul 16, 2014 @ 21:13
    rn4j0r
    0

    Best Image gallery for Umbraco 7 ?

    Basically I'm looking for what would be best to use as an image gallery slider on an inner page.

    Is there a pre installed Macro that will do this for me or is it something I will have to install? 

    Thanks in advance!

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Jul 16, 2014 @ 21:34
    Dennis Aaen
    0

    Hi rn4j0r,

    I would try to help you, don´t know if it the best gallery solution for Umbraco 7, but it´s a way how you could do it.

    In Umbraco 7 is there a Razor code snippet for listing images from a folder. By this you can get all images from a folder.

    @inherits Umbraco.Web.Macros.PartialViewMacroPage

    @*
        Macro Parameters To Create, for this macro to work:
        Alias:mediaId     Name:Media Folder ID    Type:Single Media Picker
    *@

    @if (Model.MacroParameters["mediaId"] != null)
    {
         @* Get the media folder as a dynamic node *@
        var mediaFolder = Umbraco.Media(Model.MacroParameters["mediaId"]);
       
        if (mediaFolder.Children.Any())
        {
            <ul>
                @* for each item in children of the selected media folder *@
                @foreach (var mediaItem in mediaFolder.Children)
                {
                    <li><img src="@mediaItem.umbracoFile" alt="@mediaItem.Name" /></li>
                }
            </ul>
        }
    }

    In this code snippet, you need to add a parameter to the macro, as it says in the comments for the file. If you don´t how to add a parameter to a macro you can find the documentation here. http://our.umbraco.org/documentation/reference/templating/macros/razor/using-macro-parameters

    For the gallery thing you can e.g use the jquery lightbox plugin http://lokeshdhakar.com/projects/lightbox2/, or another similar plugin.

    You could consider to use the ImageGen for the image, By using the ImageGen pakcage you can use the same image in different size. ImageGen automatically resizes photos, screenshots, and images from icon to thumbnail to full-screen retina sizes. You can find the ImageGen package here:

    http://our.umbraco.org/projects/website-utilities/imagegen

    Hope this helps,

    /Dennis

Please Sign in or register to post replies

Write your reply to:

Draft