Blox Frontend Markup

blox_markup_image.html

/**
 * Example frontend markup for a Local static image block
 */
<div id="blox_1572" class="blox-container blox-content-image blox-theme-default blox-scope-local">
	<div class="blox-wrap">
		<div class="blox-image-container custom">
			<div class="blox-image-wrap">
				<a href="http://www.example.com" target="_blank" title="The Link Title">
					<img src="https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image.jpg" >
				</a>
				<div class="blox-caption-container">
					<div class="blox-caption-wrap">A Sample Caption</div>
				</div>						
			</div>
		</div>
	</div>
</div>

blox_markup_image_background.html

/**
 * Example frontend markup for a Local static image block with the image set as a background image
 */
<div id="blox_1572" class="blox-container blox-content-image blox-theme-default blox-scope-local">
	<div class="blox-wrap">
		<div class="blox-image-container custom">
			<div class="blox-image-wrap blox-image-background" style="background-image: url(https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image.jpg)">
				<a href="http://www.example.com" target="_blank" title="The Link Title"></a>
				<div class="blox-caption-container">
					<div class="blox-caption-wrap">A Sample Caption</div>
				</div>						
			</div>
		</div>
	</div>
</div>