Need to switch an image (from image A to image B) based on a selection from a column in a custom list

Question

I work for the gov't and we sometimes have to lower our flag to half-staff (or half-mast for you Navy types). Our HQ wants to be able to normally display an image (jpeg) of the flag at fullstaff (image A) but on those days when it needs to be at halfstaff (image B) they want the graphic to switch automatically based on switching the choice column from FULL to HALF. Both images are the same size and in the same library and all on the same site collection. Is this most easily solved with JavaScript or a customized Webpart?

Answer 1

Use Jquery/Javascript to achieve the same. Render the images based on column values i.e.Half/Full

  $('#choicecolumn).click(function(){
    if($(this).attr("title")=="Full")
    {
        if(($(this).attr('checked')) == 'checked')
        {
            //show full image
        }

    }
    else if($(this).attr("title")=="Half")
    {
        if(($(this).attr('checked')) == 'checked'){
            //show half image   
        }
    }
}
    }

Answer 2

In case if solution is required in a list view. Suppose the list has two columns Staff (Full, Half) and Flag (Single line of text). A JSLink can display the image in the Flag column. The sample code is below.

(function () {
    var fieldCtx = {};

    fieldCtx.Templates = {};
    fieldCtx.Templates.Fields = {
        "Flag": 
        {
            "View": DisplayFlag 
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldCtx);
})();
var fullFlag = "<img src='/sites/lib/flag1.png'/>"
var halfFlag = "<img src='/sites/lib/flag2.png'/>"

function DisplayFlag(ctx) {
    return ctx.CurrentItem.Staff == 'Full' ? fullFlag : halfFlag;
}

Output:-