//fallback if skin does not exist
?>
<div id="eg-tool-panel">
<div id="eg-global-css-dialog" class="revpurple eg-side-buttons">
<i></></i><?php
_e('CSS Editor', EG_TEXTDOMAIN);
?>
</div>
<div id="eg-global-change" class="revgreen eg-side-buttons">
<i class="rs-icon-save-light" style="display: inline-block;vertical-align: middle;width: 18px;height: 20px;background-repeat: no-repeat;margin-right:10px !important;margin-left:2px !important;"></i><?php
_e('Save Skin', EG_TEXTDOMAIN);
?>
</div>
<a href="<?php
echo $base->getViewUrl("", "", 'essential-' . Essential_Grid_Admin::VIEW_SUB_ITEM_SKIN_OVERVIEW);
?>
" id="eg-global-back-to-overview" class="revblue eg-side-buttons">
<i class="eg-icon-th"></i><?php
_e('Skin Overview', EG_TEXTDOMAIN);
?>
</a>
</div>
<div id="skin-editor-wrapper">
<?php
if ($skin_id !== false) {
?>
<input type="hidden" value="<?php
echo $skin_id;
/**
* Add tinymce shortcode dialog
* @since 1.2.0
*/
public static function add_tiny_mce_shortcode_dialog()
{
$base = new Essential_Grid_Base();
$grid_c = new Essential_Grid();
$skins_c = new Essential_Grid_Item_Skin();
$grids = Essential_Grid::get_grids_short_vc();
?>
<div id="ess-grid-tiny-mce-dialog" tabindex="-1" action="" class="essential-dialog-wrap" title="<?php
_e('Shortcode Generator', EG_TEXTDOMAIN);
?>
" style="display: none; ">
<script type="text/javascript">
var token = '<?php
echo wp_create_nonce("Essential_Grid_actions");
?>
';
</script>
<form id="ess-grid-tiny-mce-settings-form" action="">
<!-- STEP 1 -->
<div id="ess-grid-tiny-dialog-step-1">
<div class="ess-top_half">
<p class="ess-quicktitle"><?php
_e('Choose Predefined Grid:', EG_TEXTDOMAIN);
?>
</p>
<select name="ess-grid-existing-grid">
<option value="-1"><?php
_e('--- Choose Grid ---', EG_TEXTDOMAIN);
?>
</option>
<?php
if (!empty($grids)) {
foreach ($grids as $title => $alias) {
echo '<option value="' . $alias . '">' . $title . '</option>' . "\n";
}
}
?>
</select>
<div style="margin-top:20px">
<a href="javascript:void(0);" class="button-primary ess-revgreen" id="eg-add-predefined-grid"><?php
_e('Add Selected Grid', EG_TEXTDOMAIN);
?>
</a>
<a href="<?php
echo Essential_Grid_Base::getViewUrl(Essential_Grid_Admin::VIEW_GRID_CREATE, 'create=true');
?>
" target="_blank" class="button-primary ess-revgreen" id="eg-create-predefined-grid"><?php
_e('Create Full Grid', EG_TEXTDOMAIN);
?>
</a>
</div>
</div>
<div class="ess-bottom_half">
<p class="ess-quicktitle"><?php
_e('Create a Quick Grid:', EG_TEXTDOMAIN);
?>
</p>
<a href="javascript:void(0);" class="" id="eg-create-custom-grid">
<div class="ess-customgridwrap">
<div class="dashicons dashicons-format-gallery ess-customgridicon"></div>
<div class="ess-customonbutton"><?php
_e('Add Custom', EG_TEXTDOMAIN);
?>
</div>
</div>
</a>
<a href="javascript:void(0);" class="" id="eg-edit-custom-grid">
<div class="ess-customgridwrap">
<div class="dashicons dashicons-format-gallery ess-customgridicon"></div>
<div class="ess-customonbutton"><?php
_e('Edit Custom', EG_TEXTDOMAIN);
?>
</div>
</div>
</a>
<a href="javascript:void(0);" class="" id="eg-create-popularpost-grid">
<div class="ess-customgridwrap">
<div class="dashicons dashicons-groups ess-customgridicon"></div>
<div class="ess-customonbutton"><?php
_e('Popular Post', EG_TEXTDOMAIN);
?>
</div>
</div>
</a>
<a href="javascript:void(0);" class="" id="eg-create-recentpost-grid">
<div class="ess-customgridwrap">
<div class="dashicons dashicons-calendar ess-customgridicon"></div>
<div class="ess-customonbutton"><?php
_e('Recent Post', EG_TEXTDOMAIN);
?>
</div>
</div>
</a>
<a href="javascript:void(0);" class="" id="eg-create-relatedpost-grid">
<div class="ess-customgridwrap">
<div class="dashicons dashicons-tickets ess-customgridicon"></div>
<div class="ess-customonbutton"><?php
_e('Related Post', EG_TEXTDOMAIN);
?>
</div>
</div>
</a>
</div>
<div class="ess-stepnavigator">
<span class="ess-currentstep"><?php
_e('STEP 1 - Choose Grid', EG_TEXTDOMAIN);
?>
</span>
</div>
</div>
<!-- STEP 2.5 -->
<div id="ess-grid-tiny-dialog-step-2-5" style="display: none;">
<div id="esg-tiny-shortcode-analyze-wrap" class="ess-top_half" style="padding-top:0px;margin-top:0px;padding-bottom:30px;">
<div class="ess-quicktitle" style="margin-left:25px;"><?php
_e('Edit Existing QuickGrid ShortCode', EG_TEXTDOMAIN);
?>
</div>
<p>
<label><?php
_e('Input Quickgrid Code', EG_TEXTDOMAIN);
?>
</label>
<input type="text" name="eg-shortcode-analyzer" value="" /> <a class="button-primary revblue" href="javascript:void(0);" id="eg-shortcode-do-analyze"><?php
_e('Analyze Shortcode', EG_TEXTDOMAIN);
?>
</a>
</p>
<p style="line-height:20px;font-size:11px;font-style:italic;color:#999;"><?php
_e('You can paste your Existing Quick Grid Shortcode here for further editing. Simple copy the full Shortcode of Essential grid i.e. [ess_grid settings=....][/ess_grid] and paste it here.', EG_TEXTDOMAIN);
?>
</div>
<div style="width:100%;height:30px"></div>
<div class="ess-stepnavigator">
<a href="javascript:void(0);" class="" id="eg-goto-step-1-5">
<div class="ess-stepbutton-left">
<div class="dashicons dashicons-arrow-left-alt2"></div>
<span class="ess-currentstep"><?php
_e('STEP 1 - Select Grid', EG_TEXTDOMAIN);
?>
</span>
</div>
</a>
</div>
</div>
<!-- STEP 2 -->
<div id="ess-grid-tiny-dialog-step-2" style="display: none;">
<div id="esg-tiny-settings-wrap">
<div class="ess-top_half" style="padding:0px 0px 30px;">
<div class="ess-quicktitle" style="margin-left:25px;"><?php
_e('Predefined Grid Settings', EG_TEXTDOMAIN);
?>
</div>
<p style="">
<label><?php
_e('Choose Grid', EG_TEXTDOMAIN);
?>
</label>
<select name="ess-grid-tiny-existing-settings">
<option value="-1"><?php
_e('--- Choose Grid to use Settings from Grid ---', EG_TEXTDOMAIN);
?>
</option>
<?php
if (!empty($grids)) {
foreach ($grids as $title => $alias) {
echo '<option value="' . $alias . '">' . $title . '</option>' . "\n";
}
}
?>
</select>
<p style="line-height:20px;font-size:11px;font-style:italic;color:#999;"><?php
_e('Use the Grid Settings from one of the Existing Essential Grid. This helps to use all Complex settings of a Grid, not just the quick settings listed below.', EG_TEXTDOMAIN);
?>
</p>
</div>
<div class="ess-bottom_half" style="padding:30px 0px 0px;">
<div class="ess-quicktitle" style="margin-left:25px;"><?php
_e('Quick Grid Settings', EG_TEXTDOMAIN);
?>
</div>
<p class="esg-max-entries" style="display: none; background:#FFF;">
<label><?php
_e('Maximum Entries', EG_TEXTDOMAIN);
?>
</label>
<input type="text" name="ess-grid-tiny-max-entries" value="20" />
</p>
<div id="ess-grid-tiny-grid-settings-wrap">
<p>
<label><?php
_e('Grid Skin', EG_TEXTDOMAIN);
?>
</label>
<select name="ess-grid-tiny-entry-skin">
<?php
$skins = Essential_Grid_Item_Skin::get_essential_item_skins('all', false);
if (!empty($skins)) {
foreach ($skins as $skin) {
echo '<option value="' . $skin['id'] . '">' . $skin['name'] . '</option>' . "\n";
}
}
?>
</select>
</p>
<p>
<label><?php
_e('Layout', EG_TEXTDOMAIN);
?>
</label>
<select name="ess-grid-tiny-layout-sizing">
<option value="boxed"><?php
_e('Boxed', EG_TEXTDOMAIN);
?>
</option>
<option value="fullwidth"><?php
_e('Fullwidth', EG_TEXTDOMAIN);
?>
</option>
</select>
</p>
<p>
<label><?php
_e('Grid Layout', EG_TEXTDOMAIN);
?>
</label>
<select name="ess-grid-tiny-grid-layout">
<option value="even"><?php
_e('Even', EG_TEXTDOMAIN);
?>
</option>
<option value="masonry"><?php
_e('Masonry', EG_TEXTDOMAIN);
?>
</option>
<option value="cobbles"><?php
_e('Cobbles', EG_TEXTDOMAIN);
?>
</option>
</select>
</p>
<p>
<label><?php
_e('Item Spacing', EG_TEXTDOMAIN);
?>
</label>
<input type="text" name="ess-grid-tiny-spacings" value="0" />
</p>
<p>
<label><?php
_e('Pagination', EG_TEXTDOMAIN);
?>
</label>
<input type="radio" style="margin-left:0px !important;" name="ess-grid-tiny-rows-unlimited" value="on" /> <?php
_e('Disable', EG_TEXTDOMAIN);
?>
<input type="radio" name="ess-grid-tiny-rows-unlimited" checked="checked" value="off" /> <?php
_e('Enable', EG_TEXTDOMAIN);
?>
</p>
<p>
<label><?php
_e('Columns', EG_TEXTDOMAIN);
?>
</label>
<input type="text" name="ess-grid-tiny-columns" value="5" />
</p>
<p>
<label><?php
_e('Max. Visible Rows', EG_TEXTDOMAIN);
?>
</label>
<input type="text" name="ess-grid-tiny-rows" value="3" />
</p>
<p>
<label><?php
_e('Start and Filter Animations', EG_TEXTDOMAIN);
?>
</label>
<?php
$anims = Essential_Grid_Base::get_grid_animations();
?>
<select class="eg-tooltip-wrap tooltipstered" name="ess-grid-tiny-grid-animation" id="grid-animation-select">
<?php
foreach ($anims as $value => $name) {
echo '<option value="' . $value . '">' . $name . '</option>' . "\n";
}
?>
</select>
</p>
<p>
<label><?php
_e('Choose Spinner', EG_TEXTDOMAIN);
?>
</label>
<select class="eg-tooltip-wrap tooltipstered" name="ess-grid-tiny-use-spinner" id="use_spinner">
<option value="-1"><?php
_e('off', EG_TEXTDOMAIN);
?>
</option>
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
</div>
</div>
</div>
<!--<a href="javascript:void(0);" class="button-primary ess-revgreen" id="eg-goto-step-3"><?php
_e('Add Entries', EG_TEXTDOMAIN);
?>
</a>-->
<div style="width:100%;height:30px"></div>
<div class="ess-stepnavigator">
<a href="javascript:void(0);" class="" id="eg-goto-step-1">
<div class="ess-stepbutton-left">
<div class="dashicons dashicons-arrow-left-alt2"></div>
<span class="ess-currentstep"><?php
_e('STEP 1 - Select Grid', EG_TEXTDOMAIN);
?>
</span>
</div>
</a>
<a href="javascript:void(0);" class="" id="eg-goto-step-3">
<div class="ess-stepbutton-right">
<span class="ess-currentstep"><?php
_e('STEP 3 - Add Items', EG_TEXTDOMAIN);
?>
</span>
<div class="dashicons dashicons-arrow-right-alt2"></div>
</div>
</a>
<a href="javascript:void(0);" class="" id="ess-grid-add-custom-shortcode-special" style="display: none;">
<div class="ess-stepbutton-right">
<span class="ess-currentstep"><?php
_e('FINNISH - Generate Shortcode', EG_TEXTDOMAIN);
?>
</span>
<div class="dashicons dashicons-arrow-right-alt2"></div>
</div>
</a>
</div>
</div>
</form>
<form id="ess-grid-tiny-mce-layers-form" action="">
<!-- STEP 3 -->
<div id="ess-grid-tiny-dialog-step-3" style="display: none;">
<div style="padding:30px">
<div class="ess-mediaselector"><a href="javascript:void(0);" class="eg-add-custom-element" data-type="image"><div class="dashicons dashicons-format-image"></div><?php
_e('Image', EG_TEXTDOMAIN);
?>
</a></div>
<div class="ess-mediaselector"><a href="javascript:void(0);" class="eg-add-custom-element" data-type="html5"><div class="dashicons dashicons-editor-video"></div><?php
_e('HTML5 Video', EG_TEXTDOMAIN);
?>
</a></div>
<div class="ess-mediaselector"><a href="javascript:void(0);" class="eg-add-custom-element" data-type="vimeo"><div class="dashicons dashicons-format-video"></div><?php
_e('Vimeo', EG_TEXTDOMAIN);
?>
</a></div>
<div class="ess-mediaselector"><a href="javascript:void(0);" class="eg-add-custom-element" data-type="youtube"><div class="dashicons dashicons-format-video"></div><?php
_e('YouTube', EG_TEXTDOMAIN);
?>
</a></div>
<div class="ess-mediaselector"><a href="javascript:void(0);" class="eg-add-custom-element" data-type="soundcloud"><div class="dashicons dashicons-format-audio"></div><?php
_e('SoundCloud', EG_TEXTDOMAIN);
?>
</a></div>
<div class="ess-mediaselector collapseall"><a href="javascript:void(0);"><div class="dashicons dashicons-sort"></div><?php
_e('Collapse', EG_TEXTDOMAIN);
?>
</a></div>
<div id="eg-custom-elements-wrap">
</div>
</div>
<div style="width:100%;height:30px"></div>
<div class="ess-stepnavigator">
<a href="javascript:void(0);" class="" id="eg-goto-step-2">
<div class="ess-stepbutton-left">
<div class="dashicons dashicons-arrow-left-alt2"></div>
<span class="ess-currentstep"><?php
_e('STEP 2 - Grid Settings', EG_TEXTDOMAIN);
?>
</span>
</div>
</a>
<a href="javascript:void(0);" class="" id="ess-grid-add-custom-shortcode">
<div class="ess-stepbutton-right">
<span class="ess-currentstep"><?php
_e('FINNISH - Generate Shortcode', EG_TEXTDOMAIN);
?>
</span>
<div class="dashicons dashicons-arrow-right-alt2"></div>
</div>
</a>
</div>
</div>
</form>
<div class="esg-tiny-template-wrap esg-tiny-element" style="display: none;">
<div class="ess-grid-tiny-collapse-wrapper">
<div style="width:100%;height:10px;"></div>
<div class="ess-grid-tiny-custom-wrapper" >
<!-- POSTER IMAGE -->
<div id="ess-grid-tiny-custom-poster-wrap" class="ess-grid-tiny-option-wrap" style="display: none;">
<div class="ess-quicktitle"><?php
_e('Choose Poster Image', EG_TEXTDOMAIN);
?>
</div>
<div class="esg-tiny-img-placeholder"><img src="" class="esg-tiny-preshow-img" style="display: none;" /></div>
<a href="javascript:void(0);" class="esg-toolbutton ess-grid-select-image" data-setto="ess-grid-tiny-custom-poster[]"><div class="dashicons dashicons-plus"></div></a>
<input type="hidden" name="ess-grid-tiny-custom-poster[]" data-type="image" value="" />
</div>
<!-- SIMPLE IMAGE -->
<div id="ess-grid-tiny-custom-image-wrap" class="ess-grid-tiny-option-wrap" style="display: none;">
<div class="ess-quicktitle"><?php
_e('Choose Image', EG_TEXTDOMAIN);
?>
</div>
<div class="esg-tiny-img-placeholder"><img src="" class="esg-tiny-preshow-img" style="display: none;" /></div>
<a href="javascript:void(0);" class="esg-toolbutton ess-grid-select-image" data-setto="ess-grid-tiny-custom-image[]"><div class="dashicons dashicons-plus"></div></a>
<input type="hidden" name="ess-grid-tiny-custom-image[]" data-type="image" value="" />
</div>
<!-- VIMEO ID SELECTOR -->
<div id="ess-grid-tiny-custom-vimeo-wrap" class="ess-grid-tiny-option-wrap" style="display: none;">
<div class="ess-grid-tiny-elset-label"><?php
_e('Vimeo ID', EG_TEXTDOMAIN);
?>
</div><input type="text" name="ess-grid-tiny-custom-vimeo[]" value="" />
</div>
<!-- YOUTUBE ID SELECTOR -->
<div id="ess-grid-tiny-custom-youtube-wrap" class="ess-grid-tiny-option-wrap" style="display: none;">
<div class="ess-grid-tiny-elset-label"><?php
_e('YouTube ID', EG_TEXTDOMAIN);
?>
</div><input type="text" name="ess-grid-tiny-custom-youtube[]" value="" />
</div>
<!-- SOUND CLOUD SELECTOR -->
<div id="ess-grid-tiny-custom-soundcloud-wrap" class="ess-grid-tiny-option-wrap" style="display: none;">
<div class="ess-quicktitle"><?php
_e('SoundCloud', EG_TEXTDOMAIN);
?>
</div>
<div class="ess-grid-tiny-elset-label"><?php
_e('SoundCloud ID', EG_TEXTDOMAIN);
?>
</div> <input type="text" name="ess-grid-tiny-custom-soundcloud[]" value="" />
</div>
<!-- HTML5 SELECTORS -->
<div id="ess-grid-tiny-custom-html5-wrap" class="ess-grid-tiny-option-wrap" style="display: none;">
<div class="ess-grid-tiny-elset-label"><?php
_e('WEBM URL', EG_TEXTDOMAIN);
?>
</div> <input type="text" name="ess-grid-tiny-custom-html5-webm[]" value="" />
<div class="ess-grid-tiny-elset-label"><?php
_e('OGV URL', EG_TEXTDOMAIN);
?>
</div> <input type="text" name="ess-grid-tiny-custom-html5-ogv[]" value="" />
<div class="ess-grid-tiny-elset-label"><?php
_e('MP4 URL', EG_TEXTDOMAIN);
?>
</div> <input type="text" name="ess-grid-tiny-custom-html5-mp4[]" value="" />
</div>
<!-- VIDEO RATIO -->
<div id="ess-grid-tiny-custom-ratio-wrap" class="ess-grid-tiny-option-wrap" style="display: none;">
<div class="ess-grid-tiny-elset-label"><?php
_e('Video Ratio', EG_TEXTDOMAIN);
?>
</div>
<select name="ess-grid-tiny-custom-ratio[]">
<option value="0" selected="selected">4:3</option>
<option value="1">16:9</option>
</select>
</div>
<!-- COBBLES SETTINGS -->
<div class="ess-grid-tiny-cobbles-size-wrap ess-grid-tiny-option-wrap" style="display: none;">
<div class="ess-grid-tiny-elset-label"><?php
_e('Cobbles Size', EG_TEXTDOMAIN);
?>
</div>
<select name="ess-grid-tiny-cobbles-size[]">
<option value="1:1"><?php
_e('width 1, height 1', EG_TEXTDOMAIN);
?>
</option>
<option value="1:2"><?php
_e('width 1, height 2', EG_TEXTDOMAIN);
?>
</option>
<option value="1:3"><?php
_e('width 1, height 3', EG_TEXTDOMAIN);
?>
</option>
<option value="2:1"><?php
_e('width 2, height 1', EG_TEXTDOMAIN);
?>
</option>
<option value="2:2"><?php
_e('width 2, height 2', EG_TEXTDOMAIN);
?>
</option>
<option value="2:3"><?php
_e('width 2, height 3', EG_TEXTDOMAIN);
?>
</option>
<option value="3:1"><?php
_e('width 3, height 1', EG_TEXTDOMAIN);
?>
</option>
<option value="3:2"><?php
_e('width 3, height 2', EG_TEXTDOMAIN);
?>
</option>
<option value="3:3"><?php
_e('width 3, height 3', EG_TEXTDOMAIN);
?>
</option>
</select>
</div>
<!-- CUSTOM SKIN SETTINGS -->
<div class="ess-grid-tiny-use-skin-wrap ess-grid-tiny-option-wrap">
<div class="ess-grid-tiny-elset-label"><?php
_e('Specific Skin', EG_TEXTDOMAIN);
?>
</div>
<?php
$skins = Essential_Grid_Item_Skin::get_essential_item_skins('all', false);
?>
<select name="ess-grid-tiny-use-skin[]">
<option value="-1"><?php
_e('-- Default Skin --', EG_TEXTDOMAIN);
?>
</option>
<?php
if (!empty($skins)) {
foreach ($skins as $skin) {
echo '<option value="' . $skin['id'] . '">' . $skin['name'] . '</option>' . "\n";
}
}
?>
</select>
</div>
</div>
<div class="ess-grid-tiny-custom-wrapper" >
<?php
/*$meta = new Essential_Grid_Meta();
$custom_meta = $meta->get_all_meta(false);
if(!empty($custom_meta)){
echo '<div class="ess-grid-tiny-elset-title">';
_e('Layers Content', EG_TEXTDOMAIN);
echo '</div>';
foreach($custom_meta as $cmeta){
?>
<div class="ess-grid-tiny-<?php echo $cmeta['handle']; ?>-wrap ess-grid-tiny-elset-row" style="display: none;"><div class="eg-elset-label" class="eg-mb-label"><?php echo $cmeta['name']; ?>:</div>
<?php
switch($cmeta['type']){
case 'text':
echo '<input type="text" name="ess-grid-tiny-'.$cmeta['handle'].'[]" value="" />';
break;
case 'select':
$el = $meta->prepare_select_by_string($cmeta['select']);
echo '<select name="ess-grid-tiny-'.$cmeta['handle'].'[]">';
if(!empty($el) && is_array($el)){
echo '<option value="">'.__('---', EG_TEXTDOMAIN).'</option>';
foreach($el as $ele){
echo '<option value="'.$ele.'">'.$ele.'</option>';
}
}
echo '</select>';
break;
case 'image':
$var_src = '';
?>
<input type="hidden" value="" name="ess-grid-tiny-<?php echo $cmeta['handle']; ?>[]" id="ess-grid-tiny-<?php echo $cmeta['handle']; ?>" />
<a class="button-primary revblue eg-image-add" href="javascript:void(0);" data-setto="eg-<?php echo $cmeta['handle']; ?>"><?php _e('Choose Image', EG_TEXTDOMAIN); ?></a>
<a class="button-primary revred eg-image-clear" href="javascript:void(0);" data-setto="eg-<?php echo $cmeta['handle']; ?>"><?php _e('Remove Image', EG_TEXTDOMAIN); ?></a>
<div>
<img id="ess-grid-tiny-<?php echo $cmeta['handle']; ?>-img" src="<?php echo $var_src; ?>" <?php echo ($var_src == '') ? 'style="max-width:200px; display: none;margin:20px 0px 0px 250px;"' : ''; ?>>
</div>
<?php
break;
}
?>
</div>
<?php
}
}else{
_e('No metas available yet. Add some through the Custom Meta menu of Essential Grid.', EG_TEXTDOMAIN);
?><div style="clear:both; height:20px"></div><?php
}*/
$elements = Essential_Grid_Item_Element::getElementsForDropdown();
$p_lang = array('post' => __('Post', EG_TEXTDOMAIN), 'woocommerce' => __('WooCommerce', EG_TEXTDOMAIN));
foreach ($elements as $type => $element) {
?>
<!--<div class="ess-grid-tiny-elset-title">
<?php
echo $p_lang[$type];
?>
</div>-->
<?php
foreach ($element as $handle => $name) {
echo '<div class="ess-grid-tiny-' . $handle . '-wrap ess-grid-tiny-elset-row" style="display: none;"><div class="ess-grid-tiny-elset-label" for="' . $handle . '">' . $name['name'] . ':</div><input name="ess-grid-tiny-' . $handle . '[]" value="" /></div>';
}
}
?>
</div>
<div style="clear:both"></div>
<div style="width:100%;height:30px;"></div>
</div>
<div class="ess-grid-tiny-custom-pictogram"><div class="dashicons dashicons-format-image"></div></div>
<div class="esg-toolbutton esg-delete-item">
<a href="javascript:void(0);" class="esg-tiny-delete-entry"><div class="dashicons dashicons-trash"></div></a>
</div>
<div class="esg-toolbutton esg-collapsme-item">
<a href="javascript:void(0);" class="esg-tiny-collapsme-entry"><div class="dashicons dashicons-sort"></div></a>
</div>
<img class="esg-toolbarimg" src="">
</div>
<script type="text/javascript">
<?php
$skin_layers = array();
$all_skins = $skins_c->get_essential_item_skins();
if (!empty($all_skins)) {
foreach ($all_skins as $cskin) {
$custom_layer_elements = array();
if (isset($cskin['layers'])) {
foreach ($cskin['layers'] as $layer) {
if (@isset($layer['settings']['source'])) {
switch ($layer['settings']['source']) {
case 'post':
$custom_layer_elements[@$layer['settings']['source-post']] = '';
break;
case 'woocommerce':
$custom_layer_elements[@$layer['settings']['source-woocommerce']] = '';
break;
}
}
}
}
$skin_layers[$cskin['id']] = $custom_layer_elements;
}
}
?>
var esg_tiny_skin_layers = jQuery.parseJSON(<?php
echo $base->jsonEncodeForClientSide($skin_layers);
?>
);
// KRIKI SCRIPT
var esgCustomCollapser = function(bt,direction) {
var cp = bt.closest('.esg-tiny-element'),
cpitem = cp.find('.ess-grid-tiny-collapse-wrapper'),
timg = cp.find('.esg-toolbarimg'),
pimg = cp.find('.esg-tiny-preshow-img');
if ((direction=="auto" && cpitem.hasClass("collapsed")) || direction=="open") {
cpitem.slideDown(200);
cpitem.removeClass("collapsed");
bt.removeClass("collapsed");
timg.removeClass("collapsed");
} else {
cpitem.slideUp(200);
cpitem.addClass("collapsed");
bt.addClass("collapsed");
timg.addClass("collapsed");
jQuery.each(pimg,function(index,pimge) {
if (jQuery(pimge).attr('src') !=undefined && jQuery(pimge).attr('src').length>0)
timg.attr('src',jQuery(pimge).attr('src'));
})
}
}
jQuery('body').on('click','.esg-toolbutton.esg-collapsme-item',function() {
esgCustomCollapser(jQuery(this),"auto");
});
jQuery('.ess-mediaselector.collapseall').click(function() {
var ca = jQuery(this);
if (ca.hasClass("collapsed")) {
jQuery('.esg-toolbutton.esg-collapsme-item').each(function() {
esgCustomCollapser(jQuery(this),"open");
})
ca.removeClass("collapsed");
} else {
jQuery('.esg-toolbutton.esg-collapsme-item').each(function() {
esgCustomCollapser(jQuery(this),"close");
})
ca.addClass("collapsed");
}
})
</script>
</div>
<?php
}
?>
"]</td>
<td>
<div class="btn-wrap-overview-<?php
echo $grid->id;
?>
">
<a class="button-primary revgreen" href="<?php
echo Essential_Grid_Base::getViewUrl(Essential_Grid_Admin::VIEW_GRID_CREATE, 'create=' . $grid->id);
?>
"><i class="eg-icon-cog"></i><?php
_e("Settings", EG_TEXTDOMAIN);
?>
</a>
<a class="button-primary revblue" href="<?php
echo Essential_Grid_Base::getViewUrl(Essential_Grid_Admin::VIEW_ITEM_SKIN_EDITOR, 'create=' . $skin_id);
?>
" target="_blank"><i class="eg-icon-palette"></i><?php
_e("Edit Skin", EG_TEXTDOMAIN);
?>
</a>
<a class="button-primary revred eg-btn-delete-grid" id="eg-delete-<?php
echo $grid->id;
?>
" href="javascript:void(0)"><i class="eg-icon-trash"></i></a>
<a class="button-primary revyellow eg-btn-duplicate-grid" id="eg-duplicate-<?php
echo $grid->id;
?>
" href="javascript:void(0)"><i class="eg-icon-picture"></i></a>
</div>
</td>
/**
* Output a full Skin with items by data
* @return string html
*/
public function output_item_skin($demo = false, $choosen_skin = 0)
{
$base = new Essential_Grid_Base();
$grid = new Essential_Grid();
$m = new Essential_Grid_Meta();
$is_post = !empty($this->layer_values) ? false : true;
$this->import_google_fonts();
$this->register_google_fonts();
$layer_type = $base->getVar($this->params, 'choose-layout', 'even');
$filters = '';
if (!empty($this->filter)) {
foreach ($this->filter as $filter) {
$filters .= ' filter-' . sanitize_title($filter['slug']);
}
}
if ($demo !== false && $demo !== 'preview') {
//add favorite filter if we are in a demo
if (isset($this->settings['favorite']) && $this->settings['favorite'] == true) {
$filters .= ' filter-favorite';
}
if ($demo == 'skinchoose' && $choosen_skin == $this->id || $choosen_skin == '-1') {
$filters .= ' filter-selectedskin';
}
}
$sortings = '';
if ($demo === false || $demo === 'preview') {
if (!empty($this->sorting)) {
foreach ($this->sorting as $handle => $value) {
$sortings .= ' data-' . esc_attr($handle) . '="' . sanitize_title($value) . '"';
}
}
}
$container_class = ' eg-' . esc_attr($this->handle) . '-container';
$li_class = ' eg-' . esc_attr($this->handle) . '-wrapper';
if ($is_post) {
$li_class .= ' eg-post-id-' . @$this->post['ID'];
}
$container_background_color = $base->getVar($this->params, 'container-background-color', '#000');
$container_background_color_transparency = $base->getVar($this->params, 'element-container-background-color-opacity', '1');
//check for custom meta layout settings
$meta_cover_bg_color = $this->get_meta_layout_change('cover-bg-color');
$meta_cover_bg_opacity = $this->get_meta_layout_change('cover-bg-opacity');
$meta_item_bg_color = $this->get_meta_layout_change('item-bg-color');
$meta_content_bg_color = $this->get_meta_layout_change('content-bg-color');
$meta_cover_style = '';
if ($meta_cover_bg_color === false && $meta_cover_bg_opacity !== false) {
//we only change opacity, use default background-color
$meta_cover_style = ' style="background-color: ' . Essential_Grid_Base::hex2rgba($container_background_color, $meta_cover_bg_opacity) . ';"';
} elseif ($meta_cover_bg_color !== false && $meta_cover_bg_opacity === false) {
//we only change background-color, use default opacity
$meta_cover_style = ' style="background-color: ' . Essential_Grid_Base::hex2rgba($meta_cover_bg_color, $container_background_color_transparency) . ';"';
} elseif ($meta_cover_bg_color !== false && $meta_cover_bg_opacity !== false) {
//we change both settings
$meta_cover_style = ' style="background-color: ' . Essential_Grid_Base::hex2rgba($meta_cover_bg_color, $meta_cover_bg_opacity) . ';"';
}
$meta_content_style = '';
if ($meta_content_bg_color !== false) {
$meta_content_style = ' style="background-color: ' . $meta_content_bg_color . ';"';
}
$meta_item_style = '';
if ($meta_item_bg_color !== false) {
$meta_item_style = ' style="background-color: ' . $meta_item_bg_color . ';"';
}
$cover_type = $base->getVar($this->params, 'cover-type', 'full');
$cover_animation_top = '';
$cover_animation_delay_top = '';
$cover_animation_center = '';
$cover_animation_delay_center = '';
$cover_animation_bottom = '';
$cover_animation_delay_bottom = '';
if ($cover_type == 'full') {
//cover is for overlay container
$cover_animation_center = ' esg-' . $base->getVar($this->params, 'cover-animation-center', 'fade') . $base->getVar($this->params, 'cover-animation-center-type', '');
if ($cover_animation_center != ' esg-none' && $cover_animation_center != ' esg-noneout') {
$cover_animation_delay_center = ' data-delay="' . round($base->getVar($this->params, 'cover-animation-delay-center', 0, 'i') / 100, 2) . '"';
} else {
$cover_animation_center = '';
}
} else {
$cover_animation_top = ' esg-' . $base->getVar($this->params, 'cover-animation-top', 'fade') . $base->getVar($this->params, 'cover-animation-top-type', '');
if ($cover_animation_top != ' esg-none' && $cover_animation_top != ' esg-noneout') {
$cover_animation_delay_top = ' data-delay="' . round($base->getVar($this->params, 'cover-animation-delay-top', 0, 'i') / 100, 2) . '"';
} else {
$cover_animation_top = '';
}
$cover_animation_center = ' esg-' . $base->getVar($this->params, 'cover-animation-center', 'fade') . $base->getVar($this->params, 'cover-animation-center-type', '');
if ($cover_animation_center != ' esg-none' && $cover_animation_center != ' esg-noneout') {
$cover_animation_delay_center = ' data-delay="' . round($base->getVar($this->params, 'cover-animation-delay-center', 0, 'i') / 100, 2) . '"';
} else {
$cover_animation_center = '';
}
$cover_animation_bottom = ' esg-' . $base->getVar($this->params, 'cover-animation-bottom', 'fade') . $base->getVar($this->params, 'cover-animation-bottom-type', '');
if ($cover_animation_bottom != ' esg-none' && $cover_animation_bottom != ' esg-noneout') {
$cover_animation_delay_bottom = ' data-delay="' . round($base->getVar($this->params, 'cover-animation-delay-bottom', 0, 'i') / 100, 2) . '"';
} else {
$cover_animation_bottom = '';
}
}
//group is for cover container
$cover_group_animation_delay = '';
$cover_group_animation = ' esg-' . $base->getVar($this->params, 'cover-group-animation', 'fade');
if ($cover_group_animation != ' esg-none') {
$cover_group_animation_delay = ' data-delay="' . round($base->getVar($this->params, 'cover-group-animation-delay', 0, 'i') / 100, 2) . '"';
} else {
$cover_group_animation = '';
}
//media is for media container
$media_animation_delay = '';
$media_animation = ' esg-' . $base->getVar($this->params, 'media-animation', 'fade');
if ($media_animation != ' esg-none') {
$media_animation_delay = ' data-delay="' . round($base->getVar($this->params, 'media-animation-delay', 0, 'i') / 100, 2) . '"';
} else {
$media_animation = '';
}
if ($this->load_more_element == true) {
$li_class .= ' eg-newli';
}
//check if we are on cobble, if yes, get the data of entry for cobbles
$cobbles_data = '';
if ($this->grid_type == 'cobbles') {
if ($this->layer_values === false) {
//we are on post
$cobbles = json_decode(get_post_meta($this->post['ID'], 'eg_cobbles', true), true);
if (isset($cobbles[$this->grid_id]['cobbles']) && strpos($cobbles[$this->grid_id]['cobbles'], ':') !== false) {
$use_cobbles = $cobbles[$this->grid_id]['cobbles'];
} else {
$use_cobbles = '1:1';
}
} else {
//get the info from $this->layer_values
$use_cobbles = $base->getVar($this->layer_values, 'cobbles-size', '1:1');
}
$use_cobbles = explode(':', $use_cobbles);
$cobbles_data = ' data-cobblesw="' . $use_cobbles[0] . '" data-cobblesh="' . $use_cobbles[1] . '"';
}
echo '<!-- PORTFOLIO ITEM ' . $this->id . ' -->' . "\n";
echo '<li class="filterall' . $filters . $li_class;
if ($demo == 'custom') {
echo ' eg-newli';
}
//neccesary for refresh of preview grid if new li will be added
echo '"' . $sortings . $meta_item_style . $cobbles_data . '>' . "\n";
if ($demo == 'overview' || $demo == 'skinchoose') {
//check if fav or not
$cl = $demo == 'skinchoose' ? 'esg-screenselect-toolbar eg-tooltip-wrap' : '';
//show only in grid editor at skin chooser
$cltitle = $demo == 'skinchoose' ? 'title="' . __('Select Skin', EG_TEXTDOMAIN) . '"' : '';
//Show Title only at Skin Chooser
echo '<div ' . $cltitle . ' class="' . $cl . '" style="display:block !important;width:100%;height:30px;top:0px;left:0px;position:relative;z-index:10;background-color: #3498DB; padding: 0;">' . "\n";
echo ' <div class="btn-wrap-item-skin-overview-' . $this->id . '">' . "\n";
echo '<div class="eg-item-skin-overview-name">' . $this->name . "</div>\n";
if ($demo == 'overview') {
$fav_class = !isset($this->settings['favorite']) || $this->settings['favorite'] == false ? 'eg-icon-star-empty' : 'eg-icon-star';
echo '<a href="javascript:void(0);" title="' . __('Mark as Favorit', EG_TEXTDOMAIN) . '" class="eg-ov-1 eg-overview-button eg-btn-star-item-skin revyellow eg-tooltip-wrap" id="eg-star-' . $this->id . '"><i class="' . $fav_class . '"></i></a>';
echo '<a href="' . Essential_Grid_Base::getViewUrl(Essential_Grid_Admin::VIEW_ITEM_SKIN_EDITOR, 'create=' . $this->id) . '" title="' . __('Edit Skin', EG_TEXTDOMAIN) . '" class="eg-tooltip-wrap eg-ov-2 eg-overview-button revgreen "><i class="eg-icon-cog"></i></a>';
echo '<a href="javascript:void(0);" title="' . __('Duplicate Skin', EG_TEXTDOMAIN) . '" class="eg-ov-3 eg-overview-button eg-btn-duplicate-item-skin revcarrot eg-tooltip-wrap " id="eg-duplicate-' . $this->id . '"><i class="eg-icon-picture"></i></a>';
echo '<a href="javascript:void(0);" title="' . __('Delete Skin', EG_TEXTDOMAIN) . '" class="eg-ov-4 eg-overview-button eg-btn-delete-item-skin revred eg-tooltip-wrap " id="eg-delete-' . $this->id . '"><i class="eg-icon-trash"></i></a>';
} elseif ($demo == 'skinchoose') {
echo '<div title="' . __('Select Skin', EG_TEXTDOMAIN) . '" class="eg-tooltip-wrap eg-fakeinput "></div>';
echo '<input class="eg-tooltip-wrap " style="position: absolute; right: 0; top: 0;" type="radio" value="' . $this->id . '" title="' . __('Choose Skin', EG_TEXTDOMAIN) . '" name="entry-skin"';
if ($choosen_skin == '-1') {
echo ' checked="checked"';
} else {
checked($choosen_skin, $this->id);
}
//echo checked if it is current ID
echo ' />';
}
echo ' </div>' . "\n";
echo ' <div class="clear"></div>' . "\n\n";
echo ' </div>' . "\n\n";
} elseif ($demo == 'preview') {
$is_visible = $grid->check_if_visible($this->post['ID'], $this->grid_id);
$vis_icon = $is_visible ? 'eg-icon-eye' : 'eg-icon-eye-off';
$vis_icon_color = $is_visible ? 'revblue' : 'revred';
echo '<div class="esg-atoolbar" style="display:block !important;width:100%;height:30px;top:0px;left:0px;position:absolute;z-index:10; padding: 0;">' . "\n";
echo ' <div class="btn-wrap-item-skin-overview-' . $this->post['ID'] . '">' . "\n";
echo '<div class="eg-item-skin-overview-name">';
echo '<a href="javascript:void(0);" class="eg-ov-2 eg-overview-button eg-btn-activate-post-item ' . $vis_icon_color . ' eg-tooltip-wrap" title="' . __('Show/Hide from Grid', EG_TEXTDOMAIN) . '" id="eg-act-post-item-' . $this->post['ID'] . '"><i class="' . $vis_icon . '"></i></a>';
echo '<a href="' . get_edit_post_link($this->post['ID']) . '" class="eg-ov-3 eg-overview-button revyellow eg-tooltip-wrap" title="' . __('Edit Post', EG_TEXTDOMAIN) . '" target="_blank"><i class="eg-icon-pencil-1"></i></a>';
echo '<a href="javascript:void(0);" class="eg-ov-4 eg-overview-button eg-btn-edit-post-item revgreen eg-tooltip-wrap" title="' . __('Edit Post Meta', EG_TEXTDOMAIN) . '" id="eg-edit-post-item-' . $this->post['ID'] . '"><i class="eg-icon-cog"></i></a>';
echo '</div>' . "\n";
echo ' </div>' . "\n";
echo ' <div class="clear"></div>' . "\n\n";
echo ' </div>' . "\n\n";
} elseif ($demo == 'custom') {
//add info of what items do exist in the layer that can be edited
$custom_layer_elements = array();
$custom_layer_data = array();
if (!empty($this->layers)) {
foreach ($this->layers as $layer) {
if (isset($layer['settings']['source'])) {
switch ($layer['settings']['source']) {
case 'post':
$custom_layer_elements[$layer['settings']['source-post']] = '';
break;
case 'woocommerce':
$custom_layer_elements[$layer['settings']['source-woocommerce']] = '';
break;
}
}
}
}
if (!empty($this->layer_values)) {
$custom_layer_data = $this->layer_values;
}
$custom_layer_elements = htmlentities(json_encode($custom_layer_elements));
$custom_layer_data = htmlentities(json_encode($custom_layer_data));
echo '<input type="hidden" name="layers[]" value="' . $custom_layer_data . '" />';
//has the values for this entry
echo '<div class="esg-data-handler" data-exists="' . $custom_layer_elements . '" style="display: none;"></div>';
//has the information on what exists as layers in the skin #3498DB
echo '<div class="esg-atoolbar" style="display:block !important;width:100%;height:30px;top:0px;left:0px;position:absolute;z-index:10;background-color: transparent; padding: 0;">' . "\n";
echo ' <div class="btn-wrap-item-skin-overview-0">' . "\n";
echo '<div class="eg-item-skin-overview-name">';
echo '<a href="javascript:void(0);" title="' . __('Move', EG_TEXTDOMAIN) . '" style="cursor: move;" class="eg-ov-10 eg-overview-button revdarkblue eg-tooltip-wrap "><i class="eg-icon-menu"></i></a>';
echo '<a href="javascript:void(0);" title="' . __('Move one before', EG_TEXTDOMAIN) . '" class="eg-ov-11 eg-overview-button eg-btn-move-before-custom-element revyellow eg-tooltip-wrap "><i class="eg-icon-angle-left"></i></a>';
echo '<a href="javascript:void(0);" title="' . __('Move one after', EG_TEXTDOMAIN) . '" class="eg-ov-12 eg-overview-button eg-btn-move-after-custom-element revyellow eg-tooltip-wrap "><i class="eg-icon-angle-right"></i></a>';
echo '<a href="javascript:void(0);" title="' . __('Move after #x', EG_TEXTDOMAIN) . '" class="eg-ov-13 eg-overview-button eg-btn-switch-custom-element revyellow eg-tooltip-wrap "><i class="eg-icon-angle-double-right"></i></a>';
echo '<a href="javascript:void(0);" title="' . __('Delete Element', EG_TEXTDOMAIN) . '" class="eg-ov-4 eg-overview-button eg-btn-delete-custom-element revred eg-tooltip-wrap "><i class="eg-icon-trash"></i></a>';
echo '<a href="javascript:void(0);" title="' . __('Duplicate Element', EG_TEXTDOMAIN) . '" class="eg-ov-3 eg-overview-button eg-btn-duplicate-custom-element revcarrot eg-tooltip-wrap "><i class="eg-icon-picture"></i></a>';
echo '<a href="javascript:void(0);" title="' . __('Edit Element', EG_TEXTDOMAIN) . '" class="eg-ov-2 eg-overview-button eg-btn-edit-custom-element revgreen eg-tooltip-wrap "><i class="eg-icon-cog"></i></a>';
echo '</div>' . "\n";
echo ' </div>' . "\n";
echo ' <div class="clear"></div>' . "\n\n";
echo ' </div>' . "\n\n";
}
$c_layer = 0;
$t_layer = 0;
$b_layer = 0;
$m_layer = 0;
if (!empty($this->layers)) {
foreach ($this->layers as $layer) {
if (isset($layer['container'])) {
if (!isset($layer['settings']['position']) || $layer['settings']['position'] !== 'absolute') {
switch ($layer['container']) {
case 'c':
$c_layer++;
break;
case 'tl':
$t_layer++;
break;
case 'br':
$b_layer++;
break;
case 'm':
$m_layer++;
break;
}
} else {
//absolute element marking
}
}
}
}
$is_video = false;
$is_iframe = false;
$echo_media = '';
if ($demo == false || $demo == 'preview' || $demo == 'custom') {
$video_poster_src = '';
//check for video poster image
if (!empty($this->default_video_poster_order)) {
foreach ($this->default_video_poster_order as $order) {
if ($order == 'no-image') {
//do not show image so set image empty
$video_poster_src = '';
break;
}
if (isset($this->media_sources[$order]) && $this->media_sources[$order] !== '' && $this->media_sources[$order] !== false) {
//found entry
$video_poster_src = $this->media_sources[$order];
break;
}
}
}
if (!empty($this->default_media_source_order)) {
//only show if something is checked
foreach ($this->default_media_source_order as $order) {
//go through the order and set media as wished
if (isset($this->media_sources[$order]) && $this->media_sources[$order] !== '' && $this->media_sources[$order] !== false) {
//found entry
$do_continue = false;
switch ($order) {
case 'featured-image':
case 'alternate-image':
case 'content-image':
if ($this->lazy_load) {
$echo_media = '<img src="' . EG_PLUGIN_URL . 'public/assets/images/300x200transparent.png" data-lazysrc="' . $this->media_sources[$order] . '" alt="' . $this->media_sources[$order . '-alt'] . '">';
} else {
$echo_media = '<img src="' . $this->media_sources[$order] . '" alt="' . $this->media_sources[$order . '-alt'] . '">';
}
break;
case 'youtube':
case 'content-youtube':
//if we are masonry, we need to crop the image
$video_poster_src = $this->do_poster_cropping == true ? ess_aq_resize($video_poster_src, $this->video_sizes[$this->video_ratios['youtube']]['width'], $this->video_sizes[$this->video_ratios['youtube']]['height'], true, true, true) : $video_poster_src;
$echo_media = '<div class="esg-media-video" data-youtube="' . $this->media_sources[$order] . '" width="' . $this->video_sizes[$this->video_ratios['youtube']]['width'] . '" height="' . $this->video_sizes[$this->video_ratios['youtube']]['height'] . '" data-poster="' . $video_poster_src . '"></div>';
$is_video = true;
break;
case 'vimeo':
case 'content-vimeo':
//if we are masonry, we need to crop the image
$video_poster_src = $this->do_poster_cropping == true ? ess_aq_resize($video_poster_src, $this->video_sizes[$this->video_ratios['vimeo']]['width'], $this->video_sizes[$this->video_ratios['vimeo']]['height'], true, true, true) : $video_poster_src;
$echo_media = '<div class="esg-media-video" data-vimeo="' . $this->media_sources[$order] . '" width="' . $this->video_sizes[$this->video_ratios['vimeo']]['width'] . '" height="' . $this->video_sizes[$this->video_ratios['vimeo']]['height'] . '" data-poster="' . $video_poster_src . '"></div>';
$is_video = true;
break;
case 'html5':
case 'content-html5':
if ((!isset($this->media_sources[$order]['mp4']) || $this->media_sources[$order]['mp4'] == '') && (!isset($this->media_sources[$order]['webm']) || $this->media_sources[$order]['webm'] == '') && (!isset($this->media_sources[$order]['ogv']) || $this->media_sources[$order]['ogv'] == '')) {
//not a single video is set, go to the next instead of the break
$do_continue = true;
continue;
}
//if we are masonry, we need to crop the image
$video_poster_src = $this->do_poster_cropping == true ? ess_aq_resize($video_poster_src, $this->video_sizes[$this->video_ratios['html5']]['width'], $this->video_sizes[$this->video_ratios['html5']]['height'], true, true, true) : $video_poster_src;
$echo_media = '<div class="esg-media-video" data-mp4="' . @$this->media_sources[$order]['mp4'] . '" data-webm="' . @$this->media_sources[$order]['webm'] . '" data-ogv="' . @$this->media_sources[$order]['ogv'] . '" width="' . $this->video_sizes[$this->video_ratios['html5']]['width'] . '" height="' . $this->video_sizes[$this->video_ratios['html5']]['height'] . '" data-poster="' . $video_poster_src . '"></div>';
$is_video = true;
break;
case 'soundcloud':
case 'content-soundcloud':
//if we are masonry, we need to crop the image
$video_poster_src = $this->do_poster_cropping == true ? ess_aq_resize($video_poster_src, $this->video_sizes[$this->video_ratios['soundcloud']]['width'], $this->video_sizes[$this->video_ratios['soundcloud']]['height'], true, true, true) : $video_poster_src;
$echo_media = '<div class="esg-media-video" data-soundcloud="' . $this->media_sources[$order] . '" width="' . $this->video_sizes[$this->video_ratios['soundcloud']]['width'] . '" height="' . $this->video_sizes[$this->video_ratios['soundcloud']]['height'] . '" data-poster="' . $video_poster_src . '"></div>';
$is_video = true;
break;
case 'iframe':
$echo_media = html_entity_decode($this->media_sources[$order]);
$is_iframe = true;
break;
case 'content-iframe':
$echo_media = html_entity_decode($this->media_sources[$order]);
$is_iframe = true;
break;
}
$echo_media = apply_filters('essgrid_set_media_source', $echo_media, $order, @$this->media_sources);
$is_iframe = apply_filters('essgrid_set_media_source_is_iframe', $is_iframe, $order);
$is_video = apply_filters('essgrid_set_media_source_is_video', $is_video, $order);
$video_poster_src = apply_filters('essgrid_set_media_source_video_poster_src', $video_poster_src, $order, @$this->video_sizes, @$this->video_ratios);
$do_continue = apply_filters('essgrid_set_media_source_do_continue', $do_continue, $order);
if ($do_continue) {
continue;
}
break;
}
}
}
if ($echo_media == '') {
//set default image if one is set
if ($this->default_image !== '') {
$echo_media = '<img src="' . $this->default_image . '" />';
$this->item_media_type = 'default-image';
}
} else {
$this->item_media_type = $order;
}
}
//check if we have a full link
$link_set_to = $base->getVar($this->params, 'link-set-to', 'none');
$link_type_link = $base->getVar($this->params, 'link-link-type', 'none');
$link_target = $base->getVar($this->params, 'link-target', '_self');
if ($link_target !== 'disabled') {
$link_target = ' target="' . $link_target . '"';
} else {
$link_target = '';
}
$link_wrapper = '';
if ($link_set_to !== 'none') {
switch ($link_type_link) {
case 'post':
if ($demo === false) {
if ($is_post) {
$link_wrapper = '<a href="' . get_permalink($this->post['ID']) . '"' . $link_target . '>%REPLACE%</a>';
} else {
$get_link = $this->get_custom_element_value('post-link', '', '');
//get the post link
if ($get_link == '') {
$link_wrapper = '<a href="javascript:void(0);"' . $link_target . '>%REPLACE%</a>';
} else {
$link_wrapper = '<a href="' . $get_link . '"' . $link_target . '>%REPLACE%</a>';
}
}
} else {
$link_wrapper = '<a href="javasccript:void(0);"' . $link_target . '>%REPLACE%</a>';
}
break;
case 'url':
$lurl = $base->getVar($this->params, 'link-url-link', 'javascript:void(0);');
if (strpos($lurl, '://') === false && trim($lurl) !== '' && $lurl !== 'javascript:void(0);') {
$lurl = is_ssl() ? 'https://' . $lurl : 'http://' . $lurl;
}
$link_wrapper = '<a href="' . $lurl . '"' . $link_target . '>%REPLACE%</a>';
break;
case 'meta':
if ($demo === false) {
if ($is_post) {
$meta_key = $base->getVar($this->params, 'link-meta-link', 'javascript:void(0);');
$meta_link = $m->get_meta_value_by_handle($this->post['ID'], $meta_key);
if ($meta_link == '') {
// if empty, link to nothing
$link_wrapper = '<a href="javascript:void(0);"' . $link_target . '>%REPLACE%</a>';
} else {
$link_wrapper = '<a href="' . $meta_link . '"' . $link_target . '>%REPLACE%</a>';
}
} else {
$get_link = $this->get_custom_element_value('post-link', '', '');
//get the post link
if ($get_link == '') {
$link_wrapper = '<a href="javascript:void(0);"' . $link_target . '>%REPLACE%</a>';
} else {
$link_wrapper = '<a href="' . $get_link . '"' . $link_target . '>%REPLACE%</a>';
}
}
} else {
$link_wrapper = '<a href="javascript:void(0);"' . $link_target . '>%REPLACE%</a>';
}
break;
case 'javascript':
$js_link = $base->getVar($this->params, 'link-javascript-link', 'void(0);');
$link_wrapper = '<a href="javascript:' . $js_link . '"' . $link_target . '>%REPLACE%</a>';
break;
case 'lightbox':
if (!Essential_Grid_Jackbox::is_active() && !Essential_Grid_Social_Gallery::is_active()) {
//enqueue only if default LightBox is selected
wp_enqueue_script('themepunchboxext');
wp_enqueue_style('themepunchboxextcss');
}
$lb_source = '#';
$lb_class = '';
$lb_rel = $this->lb_rel !== false ? ' rel="' . $this->lb_rel . '"' : '';
if (!empty($this->default_lightbox_source_order)) {
//only show if something is checked
foreach ($this->default_lightbox_source_order as $order) {
//go through the order and set media as wished
if (isset($this->media_sources[$order]) && $this->media_sources[$order] !== '' && $this->media_sources[$order] !== false) {
//found entry
$do_continue = false;
if (!empty($this->lightbox_additions['items']) && $this->lightbox_additions['base'] == 'off') {
$lb_source = $this->lightbox_additions['items'][0];
$lb_class = ' esgbox';
} else {
switch ($order) {
case 'featured-image':
case 'alternate-image':
case 'content-image':
if ($order == 'content-image') {
$lb_source = $this->media_sources[$order];
} else {
$lb_source = $this->media_sources[$order . '-full'];
}
$lb_class = ' esgbox';
break;
case 'youtube':
$http = is_ssl() ? 'https' : 'http';
$lb_source = $http . '://www.youtube.com/watch?v=' . $this->media_sources[$order];
$lb_class = ' esgbox';
break;
case 'vimeo':
$http = is_ssl() ? 'https' : 'http';
$lb_source = $http . '://vimeo.com/' . $this->media_sources[$order];
$lb_class = ' esgbox';
break;
case 'iframe':
//$lb_source = html_entity_decode($this->media_sources[$order]);
//$lb_class = ' esgbox';
break;
}
}
if ($do_continue) {
continue;
}
break;
}
}
}
if ($demo !== false) {
$lb_title = __('demo mode', EG_TEXTDOMAIN);
} else {
if ($is_post) {
$lb_title = $base->getVar($this->post, 'post_title', '');
} else {
$lb_title = $this->get_custom_element_value('title', '', '');
}
//the title from Post Title will be used
}
$link_wrapper = '<a class="' . $lb_class . '" href="' . $lb_source . '" lgtitle="' . $lb_title . '"' . $lb_rel . '>%REPLACE%</a>';
$this->load_lightbox = true;
//set that jQuery is written
break;
case 'ajax':
$ajax_class = '';
if (!empty($this->default_ajax_source_order)) {
//only show if something is checked
$ajax_class = ' eg-ajaxclicklistener';
foreach ($this->default_ajax_source_order as $order) {
//go through the order and set media as wished
$do_continue = false;
if (isset($this->media_sources[$order]) && $this->media_sources[$order] !== '' && $this->media_sources[$order] !== false || $order == 'post-content') {
//found entry
switch ($order) {
case 'youtube':
$vid_ratio = $this->video_ratios['youtube'] == '0' ? '4:3' : '16:9';
$ajax_attr = ' data-ajaxtype="youtubeid"';
// postid, html5vid youtubeid vimeoid soundcloud revslider
$ajax_attr .= ' data-ajaxsource="' . $this->media_sources[$order] . '"';
//depending on type
$ajax_attr .= ' data-ajaxvideoaspect="' . $vid_ratio . '"';
//depending on type
break;
case 'vimeo':
$vid_ratio = $this->video_ratios['vimeo'] == '0' ? '4:3' : '16:9';
$ajax_attr = ' data-ajaxtype="vimeoid"';
// postid, html5vid youtubeid vimeoid soundcloud revslider
$ajax_attr .= ' data-ajaxsource="' . $this->media_sources[$order] . '"';
//depending on type
$ajax_attr .= ' data-ajaxvideoaspect="' . $vid_ratio . '"';
//depending on type
break;
case 'html5':
if ($this->media_sources[$order]['mp4'] == '' && $this->media_sources[$order]['webm'] == '' && $this->media_sources[$order]['ogv'] == '') {
$do_continue = true;
} else {
//mp4/webm/ogv
$vid_ratio = $this->video_ratios['html5'] == '0' ? '4:3' : '16:9';
$ajax_attr = ' data-ajaxtype="html5vid"';
// postid, html5vid youtubeid vimeoid soundcloud revslider
$ajax_attr .= ' data-ajaxsource="';
$ajax_attr .= @$this->media_sources[$order]['mp4'] . '|';
$ajax_attr .= @$this->media_sources[$order]['webm'] . '|';
$ajax_attr .= @$this->media_sources[$order]['ogv'];
$ajax_attr .= '"';
$ajax_attr .= ' data-ajaxvideoaspect="' . $vid_ratio . '"';
//depending on type
}
break;
case 'soundcloud':
$ajax_attr = ' data-ajaxtype="soundcloudid"';
// postid, html5vid youtubeid vimeoid soundcloud revslider
$ajax_attr .= ' data-ajaxsource="' . $this->media_sources[$order] . '"';
//depending on type
break;
case 'post-content':
if ($is_post) {
$ajax_attr = ' data-ajaxtype="postid"';
// postid, html5vid youtubeid vimeoid soundcloud revslider
$ajax_attr .= ' data-ajaxsource="' . @$this->post['ID'] . '"';
//depending on type
} else {
$do_continue = true;
//$ajax_class = '';
}
break;
case 'featured-image':
case 'alternate-image':
case 'content-image':
$img_url = '';
if ($order == 'content-image') {
$img_url = $this->media_sources[$order];
} else {
$img_url = $this->media_sources[$order . '-full'];
}
$ajax_attr = ' data-ajaxtype="imageurl"';
// postid, html5vid youtubeid vimeoid soundcloud revslider
$ajax_attr .= ' data-ajaxsource="' . $img_url . '"';
//depending on type
break;
default:
$ajax_class = '';
$do_continue = true;
break;
}
if ($do_continue) {
continue;
}
break;
} else {
//some custom entry maybe
$postobj = $is_post ? $this->post : false;
$ajax_attr = apply_filters('essgrid_handle_ajax_content', $order, $this->media_sources, $postobj, $this->grid_id);
if (empty($ajax_attr)) {
//$ajax_class = '';
$do_continue = true;
}
if ($do_continue) {
continue;
}
break;
}
}
}
if ($ajax_class !== '') {
//set ajax loading to true so that the grid can decide to put ajax container in top/bottom
$link_wrapper = '<a href="javascript:void(0);" ' . $ajax_attr . '>%REPLACE%</a>';
$this->ajax_loading = true;
}
break;
}
}
if ($m_layer > 0) {
$show_content = $base->getVar($this->params, 'show-content', 'bottom');
if ($show_content == 'top') {
self::insert_masonry_layer($demo, $meta_content_style, $is_video);
}
}
if ($is_iframe != false) {
//disable animation if we fill in iFrame
$media_animation = '';
}
echo ' <!-- THE CONTAINER FOR THE MEDIA AND THE COVER EFFECTS -->' . "\n";
echo ' <div class="esg-media-cover-wrapper">' . "\n";
echo ' <!-- THE MEDIA OF THE ENTRY -->' . "\n";
if ($demo == 'overview' || $demo == 'skinchoose') {
echo ' <div class="esg-entry-media' . $media_animation . '"' . $media_animation_delay . '><img src="' . EG_PLUGIN_URL . 'admin/assets/images/' . $this->cover_image . '"></div>' . "\n\n";
} else {
$echo_media = '<div class="esg-entry-media' . $media_animation . '"' . $media_animation_delay . '>' . $echo_media . '</div>' . "\n\n";
//echo media from top here
if ($link_set_to == 'media' && $link_type_link !== 'none') {
//set link on whole media
$echo_media = str_replace('%REPLACE%', $echo_media, $link_wrapper);
}
echo $echo_media;
}
//add absolute positioned elements here
$link_inserted = false;
if ($is_iframe == false) {
//if we are iFrame, no wrapper and no elements in media should be written
echo ' <!-- THE CONTENT OF THE ENTRY -->' . "\n";
if ($cover_type == 'full' && $c_layer > 0 || ($t_layer > 0 || $c_layer > 0 || $b_layer > 0)) {
$cover_attr = '';
if ($link_set_to == 'cover' && $link_type_link !== 'none') {
$cover_attr = ' data-clickable="on"';
}
echo ' <div class="esg-entry-cover' . $cover_group_animation . '"' . $cover_group_animation_delay . $cover_attr . '>' . "\n\n";
echo ' <!-- THE COLORED OVERLAY -->' . "\n";
if ($link_set_to == 'cover' && $link_type_link !== 'none') {
if (strpos($link_wrapper, 'class="') !== false) {
echo str_replace(array('%REPLACE%', 'class="'), array('', 'class="eg-invisiblebutton '), $link_wrapper);
} else {
echo str_replace(array('%REPLACE%', '<a '), array('', '<a class="eg-invisiblebutton" '), $link_wrapper);
}
$link_inserted = true;
}
}
if ($cover_type == 'full') {
$echo_c = ' <div class="esg-overlay' . $cover_animation_center . $container_class . '"' . $cover_animation_delay_center . $meta_cover_style . '></div>' . "\n\n";
if ($link_set_to == 'cover' && $link_type_link !== 'none' && $link_inserted === false) {
//set link on whole cover
$echo_c = str_replace('%REPLACE%', $echo_c, $link_wrapper);
}
echo $echo_c;
} else {
if ($t_layer > 0) {
$echo_t = ' <div class="esg-overlay esg-top' . $cover_animation_top . $container_class . '"' . $cover_animation_delay_top . $meta_cover_style . '></div>' . "\n\n";
if ($link_set_to == 'cover' && $link_type_link !== 'none' && $link_inserted === false) {
//set link on whole cover
$echo_t = str_replace('%REPLACE%', $echo_t, $link_wrapper);
}
echo $echo_t;
}
if ($c_layer > 0) {
$echo_c = ' <div class="esg-overlay esg-center' . $cover_animation_center . $container_class . '"' . $cover_animation_delay_center . $meta_cover_style . '></div>' . "\n\n";
if ($link_set_to == 'cover' && $link_type_link !== 'none' && $link_inserted === false) {
//set link on whole cover
$echo_c = str_replace('%REPLACE%', $echo_c, $link_wrapper);
}
echo $echo_c;
}
if ($b_layer > 0) {
$echo_b = ' <div class="esg-overlay esg-bottom' . $cover_animation_bottom . $container_class . '"' . $cover_animation_delay_bottom . $meta_cover_style . '></div>' . "\n\n";
if ($link_set_to == 'cover' && $link_type_link !== 'none' && $link_inserted === false) {
//set link on whole cover
$echo_b = str_replace('%REPLACE%', $echo_b, $link_wrapper);
}
echo $echo_b;
}
}
/*
<!-- #########################################################################
THE CLASSES FOR THE ALIGNS OF ANY ELEMENT IS:
esg-top, esg-topleft, esg-topright,
esg-left, esg-right, esg-center
esg-bottom, esg-bottomleft, esg-bottomright
IF YOU HAVE MORE THAN ONE ELEMENT IN THE SAME ALIGNED CONTAINER,
THEY WILL BE ADDED UNDER EACH OTHER IN THE SAME ALIGNED CONTAINER
######################################################################### -->
*/
if (!empty($this->layers)) {
foreach ($this->layers as $layer) {
//add all but masonry elements
if (!isset($layer['container']) || $layer['container'] == 'm') {
continue;
}
$link_to = $base->getVar($layer['settings'], 'link-type', 'none');
$hide_on_video = $base->getVar($layer['settings'], 'hide-on-video', 'false');
if ($demo === false && $this->layer_values === false) {
//show element only if it is on sale or if featured
if (Essential_Grid_Woocommerce::is_woo_exists()) {
$show_on_sale = $base->getVar($layer['settings'], 'show-on-sale', 'false');
if ($show_on_sale == 'true') {
$sale = Essential_Grid_Woocommerce::check_if_on_sale($this->post['ID']);
if (!$sale) {
continue;
}
}
$show_if_featured = $base->getVar($layer['settings'], 'show-if-featured', 'false');
if ($show_if_featured == 'true') {
$featured = Essential_Grid_Woocommerce::check_if_is_featured($this->post['ID']);
if (!$featured) {
continue;
}
}
}
}
if ($link_to != 'embedded_video' && $hide_on_video == 'true' && $is_video == true) {
continue;
}
//this element is hidden if media is video
if ($demo == 'overview' || $demo == 'skinchoose' || $demo == 'custom') {
self::insert_layer($layer, $demo);
} else {
self::insert_layer($layer);
}
}
}
if ($this->load_lightbox === true) {
if (!empty($this->lightbox_additions['items'])) {
$lb_rel = $this->lb_rel !== false ? ' rel="' . $this->lb_rel . '"' : '';
echo '<div style="display: none">';
foreach ($this->lightbox_additions['items'] as $lb_key => $lb_img) {
if ($this->lightbox_additions['base'] == 'on' && $lb_key == 0) {
continue;
}
//if off, the first one is already written on the handle somewhere
echo '<a href="' . $lb_img . '" class="esgbox"' . $lb_rel . '></a>';
}
echo '</div>';
}
}
if ($cover_type == 'full' && $c_layer > 0 || ($t_layer > 0 || $c_layer > 0 || $b_layer > 0)) {
echo ' </div><!-- END OF THE CONTENT IN THE ENTRY -->' . "\n";
}
}
if ($m_layer > 0) {
if ($show_content == 'bottom') {
self::insert_masonry_layer($demo, $meta_content_style, $is_video);
}
}
echo ' </div><!-- END OF THE CONTAINER FOR THE MEDIA AND COVER/HOVER EFFECTS -->' . "\n\n";
echo '</li><!-- END OF PORTFOLIO ITEM -->' . "\n";
}
