Basic Image rendering in frontend from Fluid Template

gistfile1.phtml

{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}
<f:layout name="Page" />
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
	 xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
	 xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
	 xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">



	<f:section name="Configuration">
		<flux:form id="page" label="Generic Page">
			<flux:field.input name="settings.bannerTitle" label="Banner Title" />
			<flux:field.file name="settings.bannerImage" label="Banner Image" allowed="jpg,jpeg" multiple="FALSE" showThumbnails="TRUE"/>
			<flux:field.checkbox name="settings.bannerDisplay" label="Display Banner?" default="1" />
		</flux:form>
		<flux:grid>
			<flux:grid.row>
				<flux:grid.column colPos="0" name="Main Content" />
			</flux:grid.row>
		</flux:grid>
	</f:section>



	<f:section name="PageBanner">
		<f:if condition="{settings.bannerDisplay}">
			<div class="banner">
				<div class="wrapper">
					<v:media.image src="{settings.bannerImage}" height="{settings.bannerHeight}c" width="980c" alt="{settings.bannerTitle}" treatIdAsReference="TRUE" />
				</div>
			</div>
		</f:if>
	</f:section>



	<f:section name="Main">
		<v:page.content.render column="0" />
	</f:section>

</div>