Okay, so i got this task, where i had to customize a list view web part to show the latest  title, details and rules of a list item along with its image from the library. So here is what i did:
1) Create a view showing the latest record (make sure that the item limit is set to one)
2) Add a list view web part of the list/library you wanna show in a site page (set the view the one you created having only one record)
3) Now create a .js file having the below code
window.TESTOBJECT = window.TESTOBJECT || {};
var CustomItemHTML = “”;
window.TESTOBJECT.CustomItem = {
    customItemHtml: function (ctx) {
        CustomItemHTML = “<img src='” + ctx.CurrentItem.AssociatedImage+ “‘ />”;
        CustomItemHTML += “

” + ctx.CurrentItem.CustomDetails + “

“;

        CustomItemHTML += “

” + ctx.CurrentItem.CustomRules + “

“;

        return CustomItemHTML ;
    }
};
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = “

“;
    overrideCtx.Templates.Item = window.TESTOBJECT.CustomItem.customItemHtml;
    overrideCtx.Templates.Footer = “

“;

    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 101;
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
$(document).ready(function () {
        $(“#idCustom”).find(‘#scriptBodyWPQ2’).remove();
});
4) Now add the URL to the js in the JS Link section of your list view web part properties
5) Save and Done
Now i will not explain you the layout, i believe you can understand it.
Check the below link for better understanding,