| Server IP : 87.98.231.4 / Your IP : 216.73.216.226 [ Web Server : Apache System : Linux webm007.cluster103.gra.hosting.ovh.net 6.18.42-ovh-vps-grsec-zfs+ #1 SMP PREEMPT_DYNAMIC Wed Aug 5 15:59:48 CEST 2026 x86_64 User : grupmartgn ( 667608) PHP Version : 8.5.7 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl Domains : 2 Domains MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/g/r/u/grupmartgn/elanartcrafts/plugins/pagebuilderck/image/layouts/ |
Upload File : |
<?php
/**
* @name Page Builder CK
* @package com_pagebuilderck
* @copyright Copyright (C) 2015. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
* @author Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
*/
defined('_JEXEC') or die;
?>
<div class="menustylescustom" data-prefix="image" data-rule=".imageck img"></div>
<div id="elementscontainer">
<div class="menulink" tab="tab_image"><?php echo JText::_('CK_EDITION'); ?></div>
<div class="tab menustyles ckproperty" id="tab_image">
<div class="menustylesblock">
<div class="menustylesblocktitle"><?php echo JText::_('CK_IMAGE') ?></div>
<div class="menustylesblockaccordion">
<div style="text-align:left;">
<a style="display:block;float:left;padding:0 5px;width:105px;" class="ckbuttonstyle" href="javascript:void(0)" onclick="CKBox.open({handler: 'iframe', id: 'ckfilesmodal', url: PAGEBUILDERCK.URIPBCK + '&view=links&type=image&func=ckSelectFile&fieldid=<?php echo $id; ?>imageurl&tmpl=component'})" ><?php echo JText::_('CK_SELECT'); ?></a>
<a style="display:block;float:left;padding:0 5px;width:80px;" class="ckbuttonstyle" href="javascript:void(0)" onclick="$ck('#<?php echo $id; ?>imageurl').val('');"><?php echo JText::_('CK_CLEAN'); ?></a>
<div class="clr"></div>
<input class="inputboxfake" type="text" value="" name="<?php echo $id; ?>imageurl" id="<?php echo $id; ?>imageurl" size="7" style="width:90%; min-width: 200px; clear:both;" onchange="ckUpdateImagepreview()" />
</div>
<div style="text-align:left;clear:both;">
<div style="float:left;text-align:right;margin:5px 5px 0 0;line-height: 15px;;"><?php echo JText::_('CK_WIDTH'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>width.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="imagewidth" id="imagewidth" size="2" value="" style="" onchange="ckUpdateImagepreview()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div>
<div style="float:left;text-align:right;margin:5px 5px 0 10px;line-height: 15px;;"><?php echo JText::_('CK_HEIGHT'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>height.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="imageheight" id="imageheight" size="2" value="" style="" onchange="ckUpdateImagepreview()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div>
<div class="clr"></div>
</div>
<span class="ckoption-label">
<?php echo JText::_('CK_ALIGN'); ?></span>
<span class="ckoption-field">
<span class="ckoption-field ckbutton-group">
<input id="imagealignementleft" class="inputbox" name="imagealignement" value="left" type="radio" onclick="ckSetActiveAlignmentButton()">
<label class="ckbutton" for="imagealignementleft">
<img src="<?php echo $this->imagespath; ?>text_align_left.png" width="16" height="16" />
</label>
<input id="imagealignementcenter" class="inputbox" name="imagealignement" value="center" type="radio" onclick="ckSetActiveAlignmentButton()">
<label class="ckbutton" for="imagealignementcenter">
<img src="<?php echo $this->imagespath; ?>text_align_center.png" width="16" height="16" />
</label>
<input id="imagealignementright" class="inputbox" name="imagealignement" value="right" type="radio" onclick="ckSetActiveAlignmentButton()">
<label class="ckbutton" for="imagealignementright">
<img src="<?php echo $this->imagespath; ?>text_align_right.png" width="16" height="16" />
</label>
</span>
<br />
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_signature.png" width="16" height="16" />
<?php echo JText::_('CK_CSS_CLASS'); ?></span>
<span class="ckoption-field">
<input class="inputbox" type="text" name="imagecssclass" id="imagecssclass" value="" style="" onchange="ckUpdateImageAttribute('class', this.value)" />
</span>
<div class="clr"></div>
</div>
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_signature.png" width="16" height="16" />
<?php echo JText::_('CK_ALT_TAG'); ?></span>
<span class="ckoption-field">
<input class="inputbox" type="text" name="imagealt" id="imagealt" value="" style="" onchange="ckUpdateImageAttribute('alt', this.value)" />
</span>
<div class="clr"></div>
</div>
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_signature.png" width="16" height="16" />
<?php echo JText::_('CK_TITLE'); ?></span>
<span class="ckoption-field">
<input class="inputbox" type="text" name="imagetitle" id="imagetitle" value="" style="" onchange="ckUpdateImageAttribute('title', this.value)" />
</span>
<div class="clr"></div>
</div>
<div class="clr"></div>
<div class="menupanetitle"><?php echo JText::_('CK_IMAGE_EFFECT'); ?></div>
<?php
if (! JPluginHelper::isEnabled('system', 'imageeffectck') || ! JPluginHelper::isEnabled('editors-xtd', 'imageeffectckbutton')) { ?>
<div class="alert alert-warning">
<?php if (! JPluginHelper::isEnabled('system', 'imageeffectck')) { ?><b><?php echo JText::_('CK_IMAGEEFFECTCK_NOT_INSTALLED') ?></b>
<br /><a href="https://www.joomlack.fr/en/joomla-extensions/image-effect-ck" target="_blank"><?php echo JText::_('CK_DOWNLOAD') ?> : Image Effect CK</a>
<div class="clr"></div>
<?php } ?>
<?php if (! JPluginHelper::isEnabled('editors-xtd', 'imageeffectckbutton')) { ?><b><?php echo JText::_('CK_IMAGEEFFECTCK_BUTTON_NOT_INSTALLED') ?></b>
<br /><a href="https://www.joomlack.fr/en/joomla-extensions/image-effect-ck" target="_blank"><?php echo JText::_('CK_DOWNLOAD') ?> : Image Effect CK Pro</a>
<?php } ?>
</div>
<?php } else { ?>
<script src="<?php echo JUri::root(true) ?>/plugins/editors-xtd/imageeffectckbutton/assets/imageeffectckbutton.js"></script>
<a style="display:block;float:left;padding:0 5px;width:80px;" class="ckbuttonstyle" href="javascript:void(0)" onclick="CKApi.Imageeffect.showInterface('ckValidateImageEffect()');"><?php echo JText::_('CK_SELECT'); ?></a>
<?php } ?>
<div class="clr"></div>
</div>
</div>
<div class="menustylesblock">
<div class="menustylesblocktitle"><?php echo JText::_('CK_LINK') ?></div>
<div class="menustylesblockaccordion">
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>link.png" width="16" height="16" />
<?php echo JText::_('CK_LINK_URL'); ?></span>
<span class="ckoption-field">
<input class="inputbox link_attrib" type="text" name="linkurl" id="linkurl" value="" style="" onchange="ckUpdateLinkAttribute('href', this.value)" />
<span class="ckbuttonstyle" style="line-height: 27px;padding: 5px 8px;" onclick="CKBox.open({url: '<?php echo JUri::base(true) ?>/index.php?option=com_pagebuilderck&view=links&type=all&tmpl=component&fieldid=linkurl', id:'ckfilesmodal', style: {padding: '10px'} })">+</span>
</span>
<div class="clr"></div>
</div>
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_signature.png" width="16" height="16" />
<?php echo JText::_('CK_REL_TAG'); ?></span>
<span class="ckoption-field">
<input class="inputbox link_attrib" type="text" name="linkrel" id="linkrel" value="" style="" onchange="ckUpdateLinkAttribute('rel', this.value)" />
</span>
<div class="clr"></div>
</div>
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_signature.png" width="16" height="16" />
<?php echo JText::_('CK_CSS_CLASS'); ?></span>
<span class="ckoption-field">
<input class="inputbox link_attrib" type="text" name="linkcss" id="linkcss" value="" style="" onchange="ckUpdateLinkAttribute('class', this.value)" />
</span>
<div class="clr"></div>
</div>
<div>
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>hand-point-090.png" width="16" height="16" />
<?php echo JText::_('CK_ONCLICK'); ?>
</span>
<span class="ckoption-field">
<input id="linkonlick" name="linkonlick" class="inputbox" value="" type="text" onchange="ckUpdateLinkAttribute('onclick', this.value)" />
</span>
<div class="clr"></div>
</div>
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>link_add.png" width="16" height="16" />
<?php echo JText::_('CK_TARGET'); ?></span>
<span class="ckoption-field">
<input class="inputbox link_attrib" type="text" name="linktarget" id="linktarget" value="" style="" onchange="ckUpdateLinkAttribute('target', this.value)" />
</span>
<div class="clr"></div>
</div>
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>link_add.png" width="16" height="16" />
<?php echo JText::_('CK_TITLE'); ?></span>
<span class="ckoption-field">
<input class="inputbox link_attrib" type="text" name="linktitle" id="linktitle" value="" style="" onchange="ckUpdateLinkAttribute('title', this.value)" />
</span>
<div class="clr"></div>
</div>
</div>
</div>
<div class="menustylesblock">
<div class="menustylesblocktitle"><?php echo JText::_('CK_LIGHTBOX') ?></div>
<div class="menustylesblockaccordion">
<?php
if (! JPluginHelper::isEnabled('system', 'mediabox_ck')) { ?>
<div class="alert alert-danger"><b><?php echo JText::_('CK_MEDIABOXCK_NOT_INSTALLED') ?></b><br /><a href="https://www.joomlack.fr/en/joomla-extensions/mediabox-ck" target="_blank"><?php echo JText::_('CK_DOWNLOAD') ?> : Mediabox CK</a></div>
<?php }
?>
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>magnifier.png" width="16" height="16" />
<?php echo JText::_('CK_USE_LIGHTBOX'); ?></span>
<span class="ckoption-field">
<select class="inputbox" type="list" value="" name="uselightbox" id="uselightbox" style="width: 70px;" onchange="ckToggleLightboxState(this.value)">
<option value="0"><?php echo JText::_('JNO'); ?></option>
<option value="1"><?php echo JText::_('JYES'); ?></option>
</select>
</span>
<div class="clr"></div>
</div>
<div class="">
<span class="ckoption-label">
<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>photo_album.png" width="16" height="16" />
<?php echo JText::_('CK_LIGHTBOX_ALBUM'); ?></span>
<span class="ckoption-field">
<select class="inputbox" type="list" value="" name="lightboxalbum" id="lightboxalbum" style="width: 70px;" onchange="ckToggleLightboxAlbum(this.value)">
<option value="0"><?php echo JText::_('JNO'); ?></option>
<option value="1"><?php echo JText::_('JYES'); ?></option>
</select>
</span>
<div class="clr"></div>
</div>
</div>
</div>
</div>
<div class="menulink" tab="tab_blocstyles"><?php echo JText::_('CK_STYLES'); ?></div>
<div class="tab menustyles ckproperty" id="tab_blocstyles">
<?php echo $this->menustyles->createImageStyles('image', 'image', '') ?>
</div>
</div>
<div class="clr"></div>
<script language="javascript" type="text/javascript">
function ckLoadEditionPopup() {
var focus = $ck('.editfocus');
var focus_img = $ck('.editfocus img');
$ck('#<?php echo $id; ?>imageurl').val(focus_img.attr('data-src'));
ckFillEditionPopup(focus.attr('id'));
ckUpdateLinkAttribute('href', $ck('#linkurl').val());
ckUpdateLinkAttribute('rel', $ck('#linkrel').val());
ckUpdateLinkAttribute('class', $ck('#linkcss').val());
ckUpdateLinkAttribute('target', $ck('#linktarget').val());
}
function ckBeforeSaveEditionPopup() {
var focus = $ck('.editfocus');
// var focus_img = $ck('.editfocus img');
// var image = $ck('#<?php echo $id; ?>_preview_image img');
ckUpdateImagepreview();
// ckSaveEditionPopup(focus.attr('id'));
// ckCloseEditionPopup();
}
function ckUpdateImagepreview() {
var focus_img = $ck('.editfocus img');
var img_src = $ck('#<?php echo $id; ?>imageurl').val();
// $ck('#<?php echo $id; ?>_preview_image img').attr('src', '<?php echo JUri::root(true); ?>/'+img_src)
focus_img.attr('src', getImgPathFromImgSrc(img_src, true))
.attr('width', $ck('#imagewidth').val())
.attr('height', $ck('#imageheight').val())
.attr('data-src', img_src);
ckUpdateImageAttribute('class', $ck('#imagecssclass').val());
ckUpdateImageAttribute('alt', $ck('#imagealt').val());
ckUpdateImageAttribute('title', $ck('#imagetitle').val());
ckAddDataOnImage($ck('.editfocus .imageck'));
}
// set active class for radio buttons
function ckSetActiveAlignmentButton() {
$ck('#elementscontainer .inputbox[name="imagealignement"]').each(function() {
if ($ck(this).prop('checked')) {
$ck(this).next('label').addClass('active');
} else {
$ck(this).next('label').removeClass('active');
}
});
}
function ckUpdateImageAttribute(attribute, value) {
var focus_img = $ck('.editfocus img');
if (value) {
focus_img.attr(attribute, value);
} else {
focus_img.removeAttr(attribute);
}
}
function ckUpdateLinkAttribute(attribute, value) {
var focus_img = $ck('.editfocus img');
if (focus_img.parent()[0].tagName.toLowerCase() == 'a') {
var imagelink = focus_img.parent();
if (value) {
imagelink.attr(attribute, value);
} else {
if (attribute == 'href') {
$ck('.editfocus .imageck ').append(focus_img);
$ck('.editfocus .imageck > a').remove();
} else {
imagelink.removeAttr(attribute);
}
}
} else {
if (value)
focus_img.wrap('<a href="' + (attribute == 'href' ? value : '') + '"></a>');
// if (attribute != 'href') {
// alert('Warning : you must have an url to create a link');
// }
}
}
function ckToggleLightboxState(value) {
// TODO : checker champ à changer avec $mediaboxParams->get
if (value == 1) {
// if link is empty, auto target the image
if ($ck('#linkurl').val() == '') {
$ck('#linkurl').val(getImgPathFromImgSrc($ck('#<?php echo $id; ?>imageurl').val(), true)).trigger('change');
}
if ($ck('#elementscontainer #linkrel').val().indexOf('lightbox') == -1) {
var relvalue = $ck('#elementscontainer #linkrel').val() + ' lightbox';
$ck('#elementscontainer #linkrel').val(relvalue.trim());
}
if ($ck('#lightboxalbum').val() == '1') {
ckToggleLightboxAlbum(1);
}
} else {
var relvalue = $ck('#elementscontainer #linkrel').val().replace('lightbox', '').trim();
$ck('#elementscontainer #linkrel').val(relvalue);
$ck('#lightboxalbum').val('0');
}
ckUpdateLinkAttribute('rel', $ck('#linkrel').val());
}
function ckToggleLightboxAlbum(value) {
if ($ck('#uselightbox').val() != 1) {
alert('Warning : you can not enable the album feature, the Lightbox option must be enabled');
$ck('#lightboxalbum').val('0');
return;
}
var pageid = $ck('input[name="id"]').val();
if (value == 1) {
if ($ck('#elementscontainer #linkrel').val().indexOf('lightbox[') != -1) { // check if lightbox already exists without album
var re = /lightbox(\[.*?\])/g;
var relvalue = $ck('#elementscontainer #linkrel').val();
$ck('#elementscontainer #linkrel').val(relvalue.replace(re, 'lightbox[pagebuilderck' + pageid + ']'));
} else {
var relvalue = $ck('#elementscontainer #linkrel').val().replace('lightbox', '') + ' lightbox[pagebuilderck' + pageid + ']';
$ck('#elementscontainer #linkrel').val(relvalue.trim());
}
} else {
var re = /lightbox(\[.*?\])/g;
var relvalue = $ck('#elementscontainer #linkrel').val().replace(re, 'lightbox').trim();
$ck('#elementscontainer #linkrel').val(relvalue);
}
ckUpdateLinkAttribute('rel', $ck('#linkrel').val());
}
function ckValidateImageEffect() {
var title = $ck('#imageeffectckbuttonimgdesc').val() ? $ck('#imageeffectckbuttonimgtitle').val() + '::' + $ck('#imageeffectckbuttonimgdesc').val() : $ck('#imageeffectckbuttonimgtitle').val();
var imgCustomClasses = $ck('#imageeffectckbuttonimgclass').val() != '' ? ' ' + $ck('#imageeffectckbuttonimgclass').val() : '';
var cssclass = $ck('#imageeffectckbuttoneffectslist').val() + imgCustomClasses;
$ck('#imagetitle').val(title);
$ck('#imagecssclass').val(cssclass).trigger('change');
}
/*
* Triggered from the Image Effect CK Params plugin, used to fill the data
* @returns {undefined} */
function onImageeffectckmodalLoaded() {
var focus_img = $ck('.editfocus img');
var imgsrc = focus_img.attr('src');
var imgtitletmp = $ck('#imagetitle').val();
var imgclass = $ck('#imagecssclass').val();
CKApi.Imageeffect.setFieldsValue(imgsrc, imgtitletmp, imgclass);
}
ckSetActiveAlignmentButton();
</script>
<style type="text/css">
#image_preview {
padding: 5px;
background: #f5f5f5;
border: 1px solid #ddd;
margin: 10px 10px 10px 0;
max-width: 600px;
/*height: 200px;*/
overflow: hidden;
}
#image_preview > img {
max-width: 100%;
}
</style>