Sharepoint Online: Display publishing image and created by fields in dispform.aspx via csr

Question

I've applied a csr js file to overwrite the rendering of dispform.aspx for a simple list. This displays every field correctly except for a publishing image and the created by fields which return "undefined" indicating they are not available as ctx objects. When applied to a list view rather than a list form, the 2 fields do display.

(function () {
/*
 * Initialize the variable that store the overrides objects.
 */
var overrideCtx = {};
overrideCtx.Templates = {}; 
//  Assign functions or plain html strings to the templateset objects:
//  header, footer and item.
//  This template is assigned to the CustomItem function.
overrideCtx.Templates.Item = CustomItem;


//       Register the template overrides.

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();


function CustomItem(ctx) {
// Build a listitem entry for every item in the list.

var ret = "<div class='news ms-blog-postBody'><div class='fright col-md-3 
col-sm-3 panel panel-white'>" + ctx.CurrentItem.Publishing_x0020_Image + " 
<div class='center'><span class='ms-rteStyle-Emphasis ms-textSmall'>" + 
ctx.CurrentItem.Author[0].title + "<br />" + 
ctx.CurrentItem.Job_x0020_Title + "<br />" + 
ctx.CurrentItem.Business_x0020_Unit_x0020__x002f + " </span></div></div>-- 
more logic here--- " 
</div>";
    return ret;
}

Answer 1

You can get the author of the current user from ctx.ListData in the display form.

ctx.ListData.Items[0]["Author"]

To retrieve the value of a publishing image field, you may need to use client object model.

var listname='<list name>';
var itemId =<current item id>; 
var clientContext ;
var oItem;

ExecuteOrDelayUntilScriptLoaded(getPublishingImage, "sp.js");

function getPublishingImage() {

    var clientContext = new SP.ClientContext();
    var oList = clientContext.get_web().get_lists().getByTitle(listname);
    oItem = oList.getItemById(itemId);

    clientContext.load(oItem);

    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceededRetrieve), 
        Function.createDelegate(this, this.onQueryFailed)
    ); 
}

function onQuerySucceededRetrieve(sender, args) {
    // get item information
    var image = oItem.get_item('Publishing_x0020_Image');
    var user = oItem.get_item('Author');    
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

SharePoint Online: Retrieve list items from SharePoint list using client object model

Update: Some screenshots of ctx object in display form