gistfile1.txt

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}


<f:section name="tab">
	<div class="QuoteAndPictureBlockAnchor">
		<f:if condition="{image}">
			<div class="QuoteAndPictureBlockAnchor-Image">
				<media:image asset="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" allowCropping="{allowCropping}" allowUpScaling="{allowUpScaling}" />
			</div>
		</f:if>
	</div>
</f:section>

<f:section name="accordion">
	<div class="QuoteAndPictureBlockAnchor">
		<div class="row">
			<div class="small-4 columns">
				<f:if condition="{image}">
					<div class="QuoteAndPictureBlockAnchor-Image">
						<media:image asset="{image}" alt="{alternativeText}" title="{title}" maximumWidth="{maximumWidth}" maximumHeight="{maximumHeight}" allowCropping="{allowCropping}" allowUpScaling="{allowUpScaling}" />
					</div>
				</f:if>
			</div>
			<div class="small-8 columns" style="padding-left:0">
				<div class="QuoteAndPictureBlockAnchor-AuthorName color-section">
					{authorName -> f:format.raw()}
				</div>
				<div class="QuoteAndPictureBlockAnchor-AuthorDescription">
					{authorDescription -> f:format.raw()}
				</div>
			</div>
		</div>
	</div>
</f:section>

<f:section name="panel">
	<div class="QuoteAndPictureBlock">
		<div class="row">
			<div class="large-6 columns">
				<div class="QuoteAndPictureBlock-AuthorName color-section hide-for-small-only">
					{neos:contentElement.editable(property: 'authorName')}
				</div>
				<div class="QuoteAndPictureBlock-AuthorDescription hide-for-small-only">
					{neos:contentElement.editable(property: 'authorDescription')}
				</div>
				<div class="QuoteAndPictureBlock-Text">
					{neos:contentElement.editable(property: 'text')}		
				</div>
			</div>
			<div class="large-6 columns">
				<div class="QuoteAndPictureBlock-Image">
					{picture -> f:format.raw()}
				</div>
			</div>
		</div>
	</div>
</f:section>

gistfile2.txt

prototype(Sfi.Sfi:QuoteAndPictureBlock) {
    sectionName = ${section}
    node = ${q(node).get(0)}
    @override.theNode = ${this.node}

    picture = TYPO3.Neos.NodeTypes:Image{
		@override.node = ${q(theNode).children('picture').get(0)}
	}
}

gistfile3.txt

'Sfi.Sfi:QuoteAndPictureBlock':
  superTypes:
    - 'Sfi.Sfi:QuoteBlock'
  childNodes:
    picture:
      type: 'TYPO3.Neos.NodeTypes:Image'
  ui:
    label: 'Quote with Picture'
    icon: 'icon-edit'