Hi Fahad,

Perhaps you can use the code snippet that we call Gallery. It looks like this

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@*
    Macro to display a gallery of images from the Media section.
    Works with either a 'Single Media Picker' or a 'Multiple Media Picker' macro parameter (see below).

    How it works:
        - Confirm the macro parameter has been passed in with a value
        - Loop through all the media Ids passed in (might be a single item, might be many)
        - Display any individual images, as well as any folders of images

    Macro Parameters To Create, for this macro to work:
    Alias:mediaIds     Name:Select folders and/or images    Type: Multiple Media Picker
                                                            Type: (note: You can use a Single Media Picker if that's more appropriate to your needs)
*@

@{ var mediaIds = Model.MacroParameters["mediaIds"] as string; }

@if (mediaIds != null)
{
    <div class="row">
        @foreach (var mediaId in mediaIds.Split(','))
        {
            var media = Umbraco.TypedMedia(mediaId);

            @* a single image *@
            if (media.DocumentTypeAlias == "Image")
            {
                @Render(media as Image);
            }

            @* a folder with images under it *@
            foreach (var image in media.Children<Image>())
            {
                @Render(image);
            }
        }
    </div>
}

@helper Render(Image item)
{
    <div class="col-xs-6 col-md-3">
        <a href="@item.Url" class="thumbnail">
            <img src="@item.GetCropUrl(width:200, height:200)" alt="@item.Name" />
        </a>
    </div>
}

Hope this can help you.

Best, -Dennis