k- Banner Standard t4 programmable layout

_text-html-programmable

try {
	importClass(com.terminalfour.publish.utils.BrokerUtils); // this is so that you can process t4tags
	importPackage(com.terminalfour.template);
	importPackage(com.terminalfour.sitemanager);

	var chosenFormatterTag = '<t4 type="content" name="Choose variant" output="normal" modifiers=""  />'; // update tag info
	var chosenFormatter = BrokerUtils.processT4Tags (dbStatement, publishCache, section, content, language, isPreview, chosenFormatterTag);


	var tid = content.getTemplateID();
	var tempManager = com.terminalfour.template.TemplateManager.getManager();
  	var formatter = chosenFormatter;
	var format = tempManager.getFormat(dbStatement,tid,formatter); //bring back an object of this template
	var formatString = format.getFormatting(); //render the content on that object
	document.write(com.terminalfour.publish.utils.BrokerUtils.processT4Tags(dbStatement, publishCache, section, content, language, isPreview, formatString));
  
} catch(err){
		document.write(err);
	//	this is just to output any processing errors, it can be commented out while in production
}

text-formatterone

<div class="module banner align-centre">
<t4 type="fix-url" element="Variant 1: Optional URL link" />

    <picture>
        <source srcset="<t4 type="content" name="Image 1600x600" output="file" modifiers"htmlentities" />" media="(min-width: 480px)"/>
        <source srcset="<t4 type="content" name="Image 480x180" output="file" modifiers"htmlentities" />">
        <img src="<t4 type="content" name="Image 1600x600" output="file" modifiers"htmlentities" />" alt="<t4 type="content" name="Image alt text" output="normal" modifiers="striptags"  />">
    </picture>

    <!-- Captions start -->
    <t4 type="content" output="selective-output" process-format="true" modifiers="" name="Variant 1: Lead caption" format="<div class=&quot;inner&quot;>
        <div class=&quot;banner__content&quot;>
            <p class=&quot;kcaption&quot;>
                <span class=&quot;kcaption__lead&quot;>$value</span>
                <span class=&quot;kcaption__text&quot;><t4 type=&quot;content&quot; name=&quot;Variant 1: Caption text&quot; output=&quot;normal&quot; modifiers=&quot;striptags&quot;  /></span>
            </p>
        " />

    <!-- Selective link -->
    <t4 type="content" output="selective-output" process-format="true" modifiers="medialibrary, nav_sections" name="Variant 1: Optional Section link" format="<a href=&quot;<t4 type=&quot;content&quot; name=&quot;Variant 1: Optional Section link&quot; output=&quot;linkurl&quot; />&quot; class=&quot; link-arrow&quot;>
    <t4 type=&quot;content&quot; name=&quot;Variant 1: Link text&quot; output=&quot;normal&quot;/> <svg viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot; height=&quot;16&quot; class=&quot;icon-arrow&quot;><path d=&quot;M7.2 12.73l-1.41-1.41 3.29-3.29-3.29-3.29L7.2 3.32l4.71 4.71-4.71 4.7z&quot;></path></svg></a>" />
    <!-- or URL link -->
    <t4 type="content" output="selective-output" process-format="true" modifiers="medialibrary, nav_sections" name="Variant 1: Optional URL link" format="<a href=&quot;<t4 type=&quot;content&quot; name=&quot;Variant 1: Optional URL link&quot; output=&quot;normal&quot; />&quot; class=&quot; link-arrow&quot;>
    <t4 type=&quot;content&quot; name=&quot;Variant 1: Link text&quot; output=&quot;normal&quot;/> <svg viewBox=&quot;0 0 16 16&quot; width=&quot;16&quot; height=&quot;16&quot; class=&quot;icon-arrow&quot;><path d=&quot;M7.2 12.73l-1.41-1.41 3.29-3.29-3.29-3.29L7.2 3.32l4.71 4.71-4.71 4.7z&quot;></path></svg></a>" />
                
    

    <!-- Caption close divs -->
    <t4 type="content" output="selective-output" process-format="true" modifiers="" name="Variant 1: Lead caption" format="</div>
    </div>" />    

</div>

text-formmattertwo

<div class="module banner align-centre">

    <picture>
        <source srcset="<t4 type="content" name="Image 1600x600" output="file" modifiers"htmlentities" />" media="(min-width: 480px)"/>
        <source srcset="<t4 type="content" name="Image 480x180" output="file" modifiers"htmlentities" />">
        <img src="<t4 type="content" name="Image 1600x600" output="file" modifiers"htmlentities" />" alt="<t4 type="content" name="Image alt text" output="normal" modifiers="striptags"  />">
    </picture>
    
    <t4 type="content" output="selective-output" process-format="true" modifiers="" name="Variant 2: Shield text" format="<div class=&quot;inner&quot;>

    <div class=&quot;hero-shield&quot;>
        <div class=&quot;fact-card shield&quot;>
            <div class=&quot;shield__content&quot;>
                <p class=&quot;fact-card__content&quot;>
                    <span class=&quot;fact-card__large&quot;>$value</span>
                    <svg class=&quot;svg-icon &quot; width=&quot;48px&quot; height=&quot;48px&quot;>
                        <use xlink:href=&quot;/media/svg/sprite.svg#icon-rosette&quot;></use>
                    </svg>
                </p>
            </div>
        </div>
    </div>
</div>" />
</div>