Display an Icon on a Sitecore page (MVC) - icons

Question

As the question states I just want to display an Icon on my page.
I have a Model Called Driver:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace TestSitecore.Models
{
public class Driver
{
// Single-Line Text
public HtmlString Heading { get; set; }
// Multi-Line Text
public HtmlString MainContent { get; set; }
// Image
public HtmlString MainImage { get; set; }
// Single-Line Text
public HtmlString Firstname { get; set; }
// Single-Line Text
public HtmlString Surname { get; set; }
// Date
public HtmlString DateOfBirth { get; set; }
// Single-Line Text
public HtmlString Nationality { get; set; }
// Icon
public HtmlString NationalityFlag { get; set; }
}
}
In my model I have defined these fields as HtmlStrings as I want to enable page editor support, but I have added comments above each field to show the Sitecore field type.
I have a controller called DriverController:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestSitecore.Repositories;
namespace TestSitecore.Controllers
{
public class DriverController : Controller
{
// GET: Driver
public ActionResult Featured()
{
var repository = new DriverRepository();
var driver = repository.GetDriver();
return View(driver);
}
}
}
The DriverController uses a repository to populate the Models Data and return it to the view.
I have a repository called DriverRepository:
using Sitecore.Mvc.Presentation;
using Sitecore.Web.UI.WebControls;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using TestSitecore.Models;
namespace TestSitecore.Repositories
{
public class DriverRepository
{
public Driver GetDriver()
{
var driver = new Driver();
var rendering = RenderingContext.Current.Rendering;
var datasource = rendering.Item;
driver.Heading = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_HEADING));
driver.MainImage = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_MAIN_IMAGE));
driver.Firstname = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_FIRSTNAME));
driver.Surname = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_SURNAME));
driver.DateOfBirth = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_DATE_OF_BIRTH));
driver.Nationality = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_NATIONALITY));
driver.NationalityFlag = new HtmlString(FieldRenderer.Render(datasource, Constants.FIELD_NATIONALITY_FLAG));
return driver;
}
}
}
The repository utlises the FieldRenderer.Render method which enables the Page editor support.
And finally I have a view called Featured:
#using TestSitecore.Models
#model Driver
<div class="highlight">
<h2>#Model.Heading</h2>
<div class="row">
#Model.MainImage
</div>
<div class="row">
<div class="col-md-12 col-lg12">
#Constants.FIELD_NAME: #Model.Firstname
<br />
#Constants.FIELD_SURNAME: #Model.Surname
<br />
#Constants.FIELD_DATE_OF_BIRTH: #Model.DateOfBirth
<br />
#Constants.FIELD_NATIONALITY: #Model.Nationality
<br />
#Constants.FIELD_NATIONALITY_FLAG: #Model.NationalityFlag
<br />
</div>
</div>
</div>
When I view the output on my page the Icon field just displays the Sitecore Path to the icon and does not render the image. But it does displays the Main Image field correctly. You can see this from the screen shot below:
I also tried sending back just a plain string rather than HtmlString but that just returns the raw value.
I guess what I'm asking is how do I display my Icon on the page and not the Path in the case of Icons? Or should I just switch the Field type to Image and add the Icons as Images in the media library?

Answer 1

As those flags are not in a Sitecore image field, the renderer will not create the img tag for you. So you have 2 options:
switch the field type to Image and add the flags to Sitecore (as you mentioned)
change the html to display the img tag: <img src="#Model.NationalityFlag"/> (note that you will need to provide a edit posibility for the editors in this case - you could alter the output when in edit mode or use an edit frame)