Skip to content

Instantly share code, notes, and snippets.

@ndiego

ndiego/blox_markup.html

Last active December 1, 2016 11:58
Show Gist options
  • Save ndiego/6549361f86a56c6efa01 to your computer and use it in GitHub Desktop.
Save ndiego/6549361f86a56c6efa01 to your computer and use it in GitHub Desktop.
Download ZIP
Blox Frontend Markup Examples
Raw
blox_markup.html
<!-- Example frontend markup for Blox -->
<div id="blox_global_1234" class="blox-container blox-content-[content_type] blox-theme-[set_theme] blox-scope-[global_local] [custom_classes]">
<div class="blox-wrap [wrap]">
<!-- Additional markup is added here depending on the content_type that is selected -->
</div>
</div>
Raw
blox_markup_editor.html
<!-- Example frontend markup for a Global editor content block -->
<div id="blox_global_1234" class="blox-container blox-content-editor blox-theme-default blox-scope-global">
<div class="blox-wrap">
<div class="blox-editor-container">
<div class="blox-editor-wrap">
<!-- The editor content that you entered is printed here -->
</div>
</div>
</div>
</div>
Raw
blox_markup_image.html
<!-- Example frontend markup for a Local static image block -->
<div id="blox_local_1234" 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" class="sample-class" rel="no-follow">
<img src="https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image.jpg" alt="The Image Alt Text" title="The Image Title" class="sample-class">
</a>
<div class="blox-caption-container">
<div class="blox-caption-wrap">A Sample Caption</div>
</div>
</div>
</div>
</div>
</div>
Raw
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_local_1234" 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 sample-class" 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" class="sample-class" rel="no-follow"></a>
<div class="blox-caption-container">
<div class="blox-caption-wrap">A Sample Caption</div>
</div>
</div>
</div>
</div>
</div>
Raw
blox_markup_raw.html
<!-- Example frontend markup for a Global raw content block -->
<div id="blox_global_1234" class="blox-container blox-content-raw blox-theme-default blox-scope-global">
<div class="blox-wrap">
<div class="blox-raw-container">
<div class="blox-raw-wrap">
<!-- The raw content that you entered is printed here -->
</div>
</div>
</div>
</div>
Raw
blox_markup_slideshow_builtin.html
<!-- Example frontend markup for a Local slideshow block using the builtin slider -->
<div id="blox_local_1234" class="blox-container blox-content-slideshow blox-theme-default blox-scope-local ">
<div class="blox-wrap">
<div class="blox-slideshow-container builtin flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="blox-slideshow-wrap slides" style="width: 600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
<!-- Slide with link and caption -->
<li id="slide_k96g" class="blox-slideshow-item image demo-class flex-active-slide" style="width: 1511px; float: left; display: block;">
<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_1.jpg" alt="Some Alt Text" title="Sample Image 1" draggable="false">
</a>
<div class="blox-caption-container">
<div class="blox-caption-wrap">
Sample Image Caption
</div>
</div>
</li>
<!-- Slide with caption -->
<li id="slide_ui4p" class="blox-slideshow-item image" style="width: 1511px; float: left; display: block;">
<img src="https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image_2.jpg" alt="Some Alt Text" title="Sample Image 2" draggable="false">
<div class="blox-caption-container">
<div class="blox-caption-wrap">
Sample Image Caption
</div>
</div>
</li>
<!-- Slide with just an image -->
<li id="slide_j9mp" class="blox-slideshow-item image" style="width: 1511px; float: left; display: block;">
<img src="https://www.bloxwp.com/wp-content/uploads/2015/10/sample_image_3.jpg" alt="Some Alt Text" title="Sample Image 3" draggable="false">
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging">
<li><a class="flex-active">1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ol>
<ul class="flex-direction-nav">
<li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li>
<li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
// Set all of our slider settings
$(window).load(function() {
$('#blox_local_5420 .blox-slideshow-container.builtin').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
pauseOnHover: false,
directionNav: true,
controlNav: true,
slideshowSpeed: 7000,
animationSpeed: 600,
smoothHeight: false,
});
});
});
</script>
</div>
</div>
Raw
blox_markup_slideshow_builtin_slick.html
<!-- Example frontend markup for a Global slideshow block using the builtin slider -->
<div id="blox_global_354" class="blox-container blox-content-slideshow blox-theme-default blox-scope-local ">
<div class="blox-wrap">
<div class="blox-slideshow-container builtin slick-initialized slick-slider slick-dotted" role="toolbar">
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" role="listbox" style="opacity: 1; width: 9144px; transform: translate3d(-6858px, 0px, 0px);">
<!-- Slide with just an image -->
<div id="slide_ui4p" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;">
<img width="800" height="400" src="http://demo:8888/wp-content/uploads/2016/03/sample-image.png" class="" alt="" title="sample-image" srcset="http://demo:8888/wp-content/uploads/2016/03/sample-image.png 800w, http://demo:8888/wp-content/uploads/2016/03/sample-image-300x150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768x384.png 768w" sizes="(max-width: 800px) 100vw, 800px">
</div>
<!-- Slide with caption -->
<div id="slide_j9mp" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;">
<img width="800" height="400" src="http://demo:8888/wp-content/uploads/2016/03/sample-image.png" class="" alt="" title="sample-image" srcset="http://demo:8888/wp-content/uploads/2016/03/sample-image.png 800w, http://demo:8888/wp-content/uploads/2016/03/sample-image-300x150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768x384.png 768w" sizes="(max-width: 800px) 100vw, 800px">
<div class="blox-caption-container">
<div class="blox-caption-wrap">
Sample Image Caption
</div>
</div>
</div>
<!-- Slide with link and caption -->
<div id="slide_k6uu" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;">
<a href="http://www.example.com" target="_blank" title="The Link Title">
<img width="800" height="400" src="http://demo:8888/wp-content/uploads/2016/03/sample-image.png" class="" alt="" title="sample-image" srcset="http://demo:8888/wp-content/uploads/2016/03/sample-image.png 800w, http://demo:8888/wp-content/uploads/2016/03/sample-image-300x150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768x384.png 768w" sizes="(max-width: 800px) 100vw, 800px">
</a>
<div class="blox-caption-container">
<div class="blox-caption-wrap">
Sample Image Caption
</div>
</div>
</div>
<!-- When images are set to background, the markup looks like the following -->
<!-- Background Enabled - Slide with just an image -->
<div id="slide_ui4p" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;">
<div class="blox-image-background" style="background-image: url(http://demo:8888/wp-content/uploads/2016/03/sample-image.png)">
</div>
</div>
<!-- Background Enabled - Slide with caption -->
<div id="slide_j9mp" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;">
<div class="blox-image-background" style="background-image: url(http://demo:8888/wp-content/uploads/2016/03/sample-image.png)">
<div class="blox-caption-container">
<div class="blox-caption-wrap">
Sample Image Caption
</div>
</div>
</div>
</div>
<!-- Background Enabled - Slide with link and caption -->
<div id="slide_k6uu" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;">
<div class="blox-image-background" style="background-image: url(http://demo:8888/wp-content/uploads/2016/03/sample-image.png)">
<a href="http://www.example.com" target="_blank" title="The Link Title"></a>
<div class="blox-caption-container">
<div class="blox-caption-wrap">
Sample Image Caption
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>
<ul class="slick-dots" style="display: block;" role="tablist">
<li class="" aria-hidden="true" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00">
<button type="button" data-role="none" role="button" tabindex="0">1</button>
</li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation01" id="slick-slide01" class="">
<button type="button" data-role="none" role="button" tabindex="0">2</button>
</li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation02" id="slick-slide02" class="">
<button type="button" data-role="none" role="button" tabindex="0">3</button>
</li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation03" id="slick-slide03" class="">
<button type="button" data-role="none" role="button" tabindex="0">4</button>
</li>
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation04" id="slick-slide04" class="">
<button type="button" data-role="none" role="button" tabindex="0">5</button>
</li>
<li aria-hidden="false" role="presentation" aria-selected="false" aria-controls="navigation05" id="slick-slide05" class="slick-active">
<button type="button" data-role="none" role="button" tabindex="0">6</button>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$( '#blox_global_354 .blox-slideshow-container.builtin').slick({
adaptiveHeight: false,
autoplay: false,
autoplaySpeed: 7000,
arrows: true,
dots: true,
fade: false,
infinite: true,
pauseOnHover: false,
speed: 600,
});
});
</script>
</div>
</div>
Raw
blox_markup_slideshow_shortcode.html
<!-- Example frontend markup for a Global slideshow block using a slider shortcode -->
<div id="blox_global_1234" class="blox-container blox-content-slideshow blox-theme-default blox-scope-global">
<div class="blox-wrap">
<div class="blox-slideshow-container shortcode">
<div class="blox-slideshow-wrap">
<!-- The slideshow content generated by the shortcode is printed here -->
</div>
</div>
</div>
</div>
Raw
blox_markup_slideshow_thirdparty.html
<!-- Example frontend markup for a Local slideshow block using a third party option -->
<div id="blox_local_1234" class="blox-container blox-content-slideshow blox-theme-default blox-scope-global">
<div class="blox-wrap">
<div class="blox-slideshow-container [third_party_selector]">
<div class="blox-slideshow-wrap">
<!-- The slideshow content generated by the third party plugin is printed here -->
</div>
</div>
</div>
</div>
Raw
blox_markup_widgets.html
<!-- Example frontend markup for a Global widgets block -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment