build promoted link programatically

Question

I need to fetch information from my promoted list and build webpart which has same look and feel as we have when we see promoted links. I will have some custom Logic hence need to create webpart so could have just created OTB webpart to fetch those links.

I just wrote normal code to fetch info from promoted

SPSite site = SPContext.Current.Site;
            using (SPSite spSite = new SPSite(site.Url))
            {
                using (SPWeb spWeb = spSite.OpenWeb())
                {
                    SPList list = spWeb.Lists["Promoted Links"];
                    SPListItemCollection items = list.GetItems();
                    if (items.Count != 0)
                    {
                        foreach (SPListItem item in items)
                        {
                            var title = item["Title"].ToString();
                            var linkLocation = item["LinkLocation"].ToString();
                            var description = item["Description"].ToString();

                        }
                    }
                }
            }

How can i build same Interface?

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<style>

    .imagecontainer a:visited {
        color: white;
    }

    .imagecontainer a {
        text-decoration: none;
    }
    /*for displaying text on image*/
    /*Add this class to the container which will hold image and anchor tag
        In this case container is td*/
    .imagecontainer {
        height: 110px;
        width: 110px;
        position: relative;
        padding-left: 10px;
        padding-top: 10px;
    }
    /*Add this class to image tag within the container*/
    .imagecontent {
        position: absolute;
        left: 0;
        top: 0;
        height: 110px;
        width: 110px;
        padding-left: 10px;
        padding-top: 10px;
    }
    /*Add this class to anchor tag within the container*/
    .imagetext {
        z-index: 100;
        position: absolute;
        color: white;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.60);
        width: 102px;
        height: 35px;
        bottom: 1px;
        padding-left: 8px;
        margin-bottom: -1px !important;
        transition: height 1500ms;
        -moz-transition: height 1500ms, -moz-transform 1500ms; /* Firefox 4 */
        -webkit-transition: height 1500ms, -webkit-transform 1500ms; /*Safari and Chrome */
        -o-transition: height 1500ms, -o-transform 1500ms; /* Opera */
    }
    /*this class will be applied when mouse is hovered on the class having imagetext i.e. anchor tag.
         This trick is to apply the sliding effect*/
    .imagecontainer:hover .imagetext {
        height: 110px;
        transition: height 750ms;
        -moz-transition: height 750ms, -moz-transform 750ms; /* Firefox 4 */
        -webkit-transition: height 750ms, -webkit-transform 750ms; /*Safari and Chrome */
        -o-transition: height 750ms, -o-transform 750ms; /* Opera */
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        GetTestLink();
    });

    /// this method read the link list from SharePoint using REST API 
    //and will the append the rows to the html table having id "tblLinks"
    function GetTestLink() {
        var temURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TestLink')/items";
        $.ajax({
            url: temURL,
            method: "GET",
            headers: {
                "Accept": "application/json; odata=verbose",
                "content-type": "application/json; odata=verbose"
            },
            success: function (data) {
                var linkshtml = "";

                var j = 0
                //below json resultsset loop will append maximum three columns in every row.
                //Since i wanted only three columns in each row i am dividing the length by three so
                //that we will get only that many rows.     
                for (var i = 0; i < (data.d.results.length) / 3; i++) {
                    linkshtml += "<tr>";

                    //this to set 0 value to j during first loop
                    if (i == 0) {
                        j = 0;
                    }
                    //below line will set the value in k, so that it will read results till that index
                    var k = (j + 3);
                    for (j; j < k && j < data.d.results.length; j++) {
                        //below line will simply create td and will be stored in linkshtml  
                        linkshtml += "<td class='imagecontainer' ><img src='/SiteAssets/images.png' alt='' class='imagecontent'/><a class='imagetext' href='"
                        + data.d.results[j].URL.Url + "'>" + data.d.results[j].URL.Description + "</a></td>";
                    }
                    linkshtml += "</tr>";
                }
                //below line will append rows to table
                $("#tblLinks").append(linkshtml);
            },
            error: function (jqxr, errorCode, errorThrown) {
                alert(jqxr.responseText);
            }
        });
    }
</script>
<div style="padding-bottom: 40px; border-width: 2px; border-color: #ccc; border-style: solid; border-radius: 4px">
    <table id="tblLinks"></table>
</div>

Answer 2

You can make a call through REST API and built up the interface through HTML/CSS. Here is the sample code. What this is doing is making a call and fetching details from the from list to display in a different format. I have three fields in the list i.e. Title, URL and Image.

    $(document).ready(function () {
    var i = 0;
    $.ajax({
        url: "/_api/web/lists/GetByTitle('MyList')/items",
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if (data.d.results.length > 0) {
                $.each(data.d.results, function (index, value) {

                    s = "<div class=\"myitems\">";
                    s += "<a href='" + value.url.Url + "' title='" + value.Title + "'\>" + "<img src=\"" + value.icon.Url + "\" /></a><br />";
                    $('#Myitems').append(s);
                    i++;
                });
            }
            else {
                $('#Myitems').append("No data in the List");
            }
        },
        error: function (error) {
            console.log(JSON.stringify(error));
        }
    });
});