I want to add lines to an OOTB display template, pic on left and 3 lines on right. Am I missing something? I can post the OOTB template for Pic on left 3 lines on right if needed. Do I need to include something else or have I made a syntax/info error?
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Picture on left, 4 lines on right</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">'Picture URL'{Picture URL}:'PublishingImage;PictureURL;PictureThumbnailURL','Link URL'{Link URL}:'Path','Line 1'{Line 1}:'','Line 2'{Line 2}:'','Line 3'{Line 3}:'','Line 4'{Line 4}:'','SecondaryFileExtension','ContentTypeId'</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">This Item Display Template will show a 100x100 picture of the item on the left. The title and the default item description will display to the right of the picture with an additional line that is available for a custom managed property.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F3851066030020C84A64EF861C4F9C49F8004D50EE47</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://MyCompanyDomain.com/sites/ViewingSite/_catalogs/masterpage/Display Templates/Content Web Parts/Item_Picture4Lines.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<!--
Warning: Do not try to add HTML to this section. Only the contents of the first <div>
inside the <body> tag will be used while executing Display Template code. Any HTML that
you add to this section will NOT become part of your Display Template.
-->
<script>
$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
</script>
<!--
Use the div below to author your Display Template. Here are some things to keep in mind:
* Surround any JavaScript logic as shown below using a "pound underscore" (#_ ... _#) token
inside a comment.
* Use the values assigned to your variables using an "underscore pound equals"
(_#= ... =#_) token.
-->
<div id="Item_Picture4Lines">
<!--#_
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_picture3Lines_");
var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);
var line1 = $getItemValue(ctx, "Line 1");
var line2 = $getItemValue(ctx, "Line 2");
var line3 = $getItemValue(ctx, "Line 3");
var line4 = $getItemValue(ctx, "Line 4");
var pictureURL = $getItemValue(ctx, "Picture URL");
var pictureId = encodedId + "picture";
var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 100, 100, ctx.CurrentItem, "cbs-picture3LinesImg", line1, pictureId);
line1.overrideValueRenderer($contentLineText);
line2.overrideValueRenderer($contentLineText);
line3.overrideValueRenderer($contentLineText);
line4.overrideValueRenderer($contentLineText);
var containerId = encodedId + "container";
var pictureLinkId = encodedId + "pictureLink";
var pictureContainerId = encodedId + "pictureContainer";
var dataContainerId = encodedId + "dataContainer";
var line1LinkId = encodedId + "line1Link";
var line1Id = encodedId + "line1";
var line2Id = encodedId + "line2";
var line3Id = encodedId + "line3";
var line4Id = encodedId + "line4";
var dataDisplayTemplateTitle = "ItemPicture4Lines";
_#-->
<div class="cbs-picture3LinesContainer" id="_#= containerId =#_" data-displaytemplate="_#= $htmlEncode(dataDisplayTemplateTitle) =#_">
<div class="cbs-picture3LinesImageContainer" id="_#= pictureContainerId =#_">
<!--#_
if(!linkURL.isEmpty)
{
_#-->
<a class="cbs-pictureImgLink" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">
<!--#_
}
_#-->
_#= pictureMarkup =#_
<!--#_
if(!linkURL.isEmpty)
{
_#-->
</a>
<!--#_
}
_#-->
</div>
<div class="cbs-picture3LinesDataContainer" id="_#= dataContainerId =#_">
<a class="cbs-picture3LinesLine1Link" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">
<h2 class="cbs-picture3LinesLine1 ms-accentText2 ms-noWrap" id="_#= line1Id =#_"> _#= line1 =#_</h2>
</a>
<!--#_
if(!line2.isEmpty)
{
_#-->
<div class="cbs-picture3LinesLine2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_" > _#= line2 =#_</div>
<!--#_
}
if(!line3.isEmpty)
{
_#-->
<div class="cbs-pictureLine3 ms-textSmall ms-noWrap" id="_#= line3Id =#_" title="_#= $htmlEncode(line3.defaultValueRenderer(line3)) =#_">_#= line3 =#_</div>
<!--#_
}
_#-->
<!--#_
}
if(!line4.isEmpty)
{
_#-->
<div class="cbs-pictureLine3 ms-textSmall ms-noWrap" id="_#= line4Id =#_" title="_#= $htmlEncode(line4.defaultValueRenderer(line4)) =#_">_#= line4 =#_</div>
<!--#_
}
_#-->
</div>
</div>
</div>
</body>
</html>
And my error is
Display Error: The display template had an error. You can correct it by fixing the template or by changing the display template used in either the Web Part properties or Result Types.
Template '~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Item_Picture4Lines.js' not found or has syntax errors. (LoadTemplate: ~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Group_Content.js)
Is there a way to check this? Because currently I am editing, publishing, and then going into page edit mode and applying it to the CSWP and only receiving an unhelpful error message. If there is a tool for checking validity of display templates please let me know!
