ImageAdd a picture1.0<div><a><span></span><span></span></a></div><textarea facultative='true' height='160' help='This will set the ALT attribute used by search engine to index images, instead of using the file description or file name. We suggest you to insert here a short description of your image.' icon='google' name='alt' text='SEO description' /></properties><design_properties><trigger help='Set the block to the real size of the image.' icon='arrow_tb' text='Real Size' trigger='realsize' /><bloc><radio class='filterRadio' default=''none'' display='None|Grayscale|Blur|Invert|Contrast|Color or Gradient' help='Select the filter for the image.<br> <b>None</b> no filter<br> <b>Grayscale</b> remove all the colors<br> <b>Blur</b> blur the image<br> <b>Invert</b> invert all the colors<br> <b>Contrast</b> more lightness differences<br> <b>Color or gradient</b> add a color transparent overlay' name='filter' title='Filter' values='none|grayscale|blur|invert|contrast|color' /><gradient default='['vertical', [['0%', 'rgba(0,0,0,0.5)'], ['100%', 'rgba(0,0,0,0.5)']], 0, false]' name='gradient_colors' /></bloc><bloc class='uii_mask_properties'><checkbox class='uii_active_mask' default='false' help='By checking this option, you will be able to crop the image to a shape (circle, triangle...).' name='activate_mask' value='Crop to a shape' /><icon_selector class='uii_chose_mask' default='{"id":594,"name":"brightness_1","service":"Google-material-icons","removable":false}' default_action='true' icon='folder' name='mask' search_options='{"search_by":"shapes"}' value='Choose the shape' /></bloc><bloc class='uii_radius_properties'><checkbox class='uii_radius_toggle' default='false' name='radius_toggle' value='Radius' /><radius class='uii_radius' default='[50, 50, 50, 50]' maximum='500' minimum='0' name='radius' /></bloc></design_properties></view><script>UI_List.UI_Image={initialize:function(t){this.component=t ;t.setOptions(["locked","container","fixed","footer","sticky"]) ;this.protect_available="editor"==v.mode||v.features.image_protection ;this.mouseover_available="editor"==v.mode||v.features.image_mouseover },updateImage:function(){this.component.node.unbind() ;var t=this,e={h:this.component.H(),w:this.component.W() },i=function(i,o){var n=$("<span>").css({position:"absolute", top:"-1000px"}).appendTo("body") ;n.setIcon(t.component.data.mask,!1,function(){ setTimeout(function(){ var a=cdn_url(bestImgSrc(o,t.component.W(),t.component.H())),s=function(){ n.children().css({"font-size":"100px"});var o={w:n.width(), h:n.height()};o.h/o.w ;var s=document.createElementNS("http://www.w3.org/2000/svg","text") ;i.empty().addClass("uii_mask_node") ;var r=Math.min(e.h/o.h*100,e.w/o.w*100) ;s.setAttributeNS(null,"x",(e.w-r*o.w/100)/2);var c=r*o.h/100 ;s.setAttributeNS(null,"y",(e.h-c)/2+c/("Symbola"!=t.component.data.mask.service?1:1.3)) ;s=$.fn.setIcon(t.component.data.mask,$(s))[0] ;var d='<pattern class="uii_pattern" id="'+(i==t.img2?"hover_":"")+"pattern_mask_"+t.component.uniqId()+'" patternUnits="userSpaceOnUse" width="'+e.w+'" height="'+e.h+'" viewbox="0 0 '+e.w+" "+e.h+'"><image xlink:href="'+a+'" width="'+e.w+'" height="'+e.h+'" preserveAspectRatio="xMidYMid '+("cover"==t.component.data.ratio_type?"slice":"meet")+'" /></pattern>' ;$(".pattern_mask",t.component.node).remove() ;i.html("<svg class='svg_defs'><defs>"+d+"</defs></svg>").append($('<svg class="content_svg" width="'+e.w+'" height="'+e.h+'"></svg>')) ;$(".content_svg",i)[0].appendChild(s);$(s).css({ fill:"url(#"+(i==t.img2?"hover_":"")+"pattern_mask_"+t.component.uniqId()+")", "font-size":r+"px"});setTimeout(function(){n.remove()},2e3)} ;$.fn.loadImage(a).done(function(){s()}).fail(function(){ if(/ra0\.cdnsw\.com\/cc0/.test(a)){ a=a.replace("ra0.cdnsw.com/cc0","www.sitew.com/file/pixabay") ;s()}})},100)})} ;if(this.component.data.activate_mask&&this.component.data.mask){ $(".uii_pattern",this.component.node).remove() ;i(this.img1,t.component.data.imageFile)}else{ this.img1.removeClass() ;if(!this.component.preloaded||this._protected()||"fullwidth"==this.component.data.ratio_type){ this.img1.empty().append(t._setImageDefault(this.component.data.imageFile,this.component)) ;this._protected()&&this._antiDownload(this.img1)} this.mouseover_available&&this.component.data.mouseoverMenu&&""!=this.component.data.mouseoverMenu&&this.component.node.mouseover(function(){ window.UI_Menu&&UI_Menu.showDropDownMenu(t.component.data.mouseoverMenu) });this._setFullWidth();this._setParallax()} if(this.mouseover_available&&this.component.data.mouseoverImage){ this.component.data.activate_mask&&this.component.data.mask?i(this.img2,this.component.data.mouseoverImage):this.img2.empty().append(t._setImageDefault(this.component.data.mouseoverImage,this.component)) ;this.component.node.hover(function(){t.img2.show() ;t.img1.hide()},function(){t.img1.show();t.img2.hide()})} this._setFilter()},getDescriptions:function(){ var t=this,e=function(e){var i={} ;i[t.component.data.imageFile.id]=e;t.captions.resolve(i)} ;this.component.description&&e(this.component.description)}, updateLink:function(){var t=this;this.link.attr({target:"", onClick:"",title:""}).removeAttr("href").unbind() ;if(this.component.data.link&&this.component.data.link.onClick&&this.component.data.link.onClick.match(/^tb_show\(/))try{ this.component.data.tb_imgs=JSON_.parse(this.component.data.link.onClick.match(/tb_show\(\{list:\[\]\},0,(.*\])/)[1]) ;this.component.data.bigger=!0;this.component.data.link=null }catch(e){dbg.error("Image.tb_imgs",e,this.component.data)} if(this.component.data.link){ this.link.attr(this.component.data.link) ;"editor"==v.mode&&this.component.data.link.href&&this.component.data.link.href.match(/fs|dl/)&&""==this.component.data.link.onClick&&this.link.on("click",function(e){ window.open(v.url+t.component.data.link.href);e.preventDefault() }) ;v.features.do_follow_links?this.link.attr("rel","noopener noreferrer"):this.link.attr("rel","nofollow noopener noreferrer") ;"editor"==v.mode&&""==this.link.attr("onClick")&&this.link.attr("target","test_link") }else this.component.data.bigger&&this.link.attr("href","#").click(function(){ if(t.component.data.tb_imgs&&t.component.data.tb_imgs.length>0)tb_show_viewer(FileDescription.get(t.component.data.tb_imgs),0,t.component.data.tb_imgs,t._protected());else{ tb_show_viewer("editor"==v.mode?FileDescription.get([t.component.data.imageFile]):t.captions,0,[t.component.data.imageFile],t._protected()) ;sigCtl.emit("UI_Image.fullscreen",t.component.data.imageFile)} this.blur();return!1}).on("dblclick",function(){return!1}) ;this.link.addClass("not_link_style") ;this.component.data.imageFile.removable&&this.getDescriptions() },onDisplay:function(t){var e=this ;this.component.migrateOldGradientProperty() ;if(!this.component.data.ratio_type){ this.component.data.ratio_type=this.component.data.aspectRatio?"ratio":"free" ;this.component.data.aspectRatio=null}this.link=t.find("a") ;this.img1=t.find("span:first") ;this.img2=t.find("span:last").hide();this.captions=$.Deferred() ;this.mouseover_available&&this.component.data.mouseoverMenu&&""!=this.component.data.mouseoverMenu&&Misc.poll(function(){ return window.UI_Menu},function(){ UI_Menu.setAsDropDownMenu(e.component.data.mouseoverMenu)}) ;this.updateImage();this.updateLink() ;"editor"!=v.mode&&this.component.data.mouseoverImage&&this.mouseover_available&&(this.preload=$(document).setImage(this.component.data.mouseoverImage,this.component.W(),this.component.H(),{ protect:this._protected(),keep_ratio:!1})) ;this.aspectRatio_v=this.component.data.imageFile.height/this.component.data.imageFile.width ;"ratio"==this.component.data.ratio_type&&this.component.setAspectRatio(this.aspectRatio_v) ;this._setFullWidth();this._setParallax();this._setFilter() ;this._setRadius() ;is_colored()&&sigCtl.connect("Theme.changed",function(){ e._setColorFilter()})},_loadProperties:function(){ var t=$(this.component.propertyNode).add(this.component.propertyDesignNode) ;if("color"==this.component.data.filter){ $(".gradientProperty",t).css("display","table") ;$(".selectGradientO.k-widget",t).show() ;$(".roundSliderPropertyDiv",t).css("display","table") ;"diagonal"==this.component.data.gradient_colors[0]?$(".roundSliderPropertyDiv",t).show():$(".roundSliderPropertyDiv",t).hide() }else{$(".gradientProperty",t).css("display","none") ;$(".selectGradientO.k-widget",t).hide() ;$(".roundSliderPropertyDiv",t).css("display","none")} if(this.component.data.activate_mask){ $(".uii_chose_mask",t).show() ;$("input[value=color]",t).parent().hide() ;$(".uii_parallax_control",t).hide()}else{ $(".uii_chose_mask",t).hide() ;$("input[value=color]",t).parent().show() ;$(".uii_parallax_control",t).show()}$(".uii_radius",t).hide() ;$(".uii_radius_properties",t).hide() ;if("fullwidth"!=this.component.data.ratio_type&&!this.component.data.activate_mask){ $(".uii_radius_properties",t).show() ;this.component.data.radius_toggle&&$(".uii_radius",t).show()} $(".uii_mask_properties",t).toggle("fullwidth"!=this.component.data.ratio_type&&!this.component.data.radius_toggle) },onSelect:function(){this._loadProperties()}, onPropertyChanged:function(t){this._loadProperties() ;if(t.include("imageFile")){this.updateImage() ;if("fullwidth"!=this.component.data.ratio_type&&"cover"!=this.component.data.ratio_type){ var e=this.component,i=this.component.data.imageFile.width,o=this.component.data.imageFile.height ;this.refreshAspectRatio() ;for(var n in v.device_modes)if(n==v.device_modes[n]){ var a=e.prop(n).w;i>a&&(o=(i=a)*this.aspectRatio_v);e.setXYZWH({ w:i,h:o},{device:n,send_events:!1}) ;sigCtl.emit("Component.moved")}}} (t.include("mouseoverImage")||t.include("activate_mask")||t.include("mask"))&&this.updateImage() ;if(t.include("ratio_type"))if("ratio"==this.component.data.ratio_type){ this.component.setAspectRatio(this.aspectRatio_v) ;window.blockSelector&&blockSelector.selected_cpts.length>0&&blockSelector.drawSelector() }else this.component.setAspectRatio(null);if(t.include("link")){ this.component.data.tb_imgs=null;this.updateLink()} if(t.include("bigger")){if(this.component.data.bigger){ this.component.data.link=null;this.component.data.tb_imgs=null} this.updateLink()}if(t.include("tb_imgs")){ if(this.component.data.tb_imgs&&this.component.data.tb_imgs.length>0){ this.component.data.link=null;this.component.data.bigger=!0} this.updateLink()}if(t.include("realsize")){ var s=new Image,r=this;s.onload=function(){s.remove() ;r.component.setXYZWH({w:s.width,h:s.height})} ;s.src=bestImgSrc(this.component.data.imageFile,1e4,1e4)} if(window.UI_Menu&&t.include("mouseoverMenu")&&this.component.data.mouseoverMenu&&""!=this.component.data.mouseoverMenu){ UI_Menu.setAsDropDownMenu(this.component.data.mouseoverMenu) ;this.updateImage() ;versionController.disabledOnViewer("image_menu_mouseover")} if(t.include("ratio_type")){this._setFullWidth() ;this.updateImage()}t.include("parallax")&&this._setParallax() ;t.include("filter")||t.include("activate_mask")||t.include("mask")?this._setFilter():t.includeOne(["gradient_colors"])&&this._setColorFilter() ;this._setRadius()},onResize:function(){ this.img1.find("img").width(this.component.W()).height(this.component.H()) },onResizeStop:function(){this.onResize();this.updateImage() ;this._setFullWidth();this._setParallax();this._setFilter() ;this._setRadius();this.refreshAspectRatio()}, onMoveStop:function(){this._setFullWidth();this._setParallax() ;this._setFilter()},onMoved:function(){this.refreshAspectRatio() },refreshAspectRatio:function(){ if("ratio"==this.component.data.ratio_type){ var t=this.component.data.imageFile.width,e=this.component.data.imageFile.height ;this.aspectRatio_v=e/t ;this.component.setAspectRatio(this.aspectRatio_v)} sigCtl.emit("Component.moved")},_setImageDefault:function(t,e){ var i=bestImgSrc(t,"fullwidth"==this.component.data.ratio_type?screen.width:e.W(),e.H(),{ keep_ratio:"free"!=this.component.data.ratio_type}) ;return $("<div>").addClass("uii_img "+e.data.ratio_type).cdnSrc(i,e.W(),e.H()) },_protected:function(){ return(this.component.data.protect||v.page_bg.security.content_protection)&&"editor"!=v.mode&&this.protect_available },_antiDownload:function(t){ (t=t.parents(".componentBody:first")).on("contextmenu",function(t){ if("DIV"==t.target.nodeName)return!1}) ;if(!this.component.data.link&&!this.component.data.bigger){ var e="/images/spacer.gif";(new Image).src=e ;t.on("mouseenter touchstart",function(){var i=$(this) ;if(!($(".protectOverlay",i).length>0)){ var o=$('<img class="protectOverlay" src="'+e+'" width="'+i.width()+'" height="'+i.height()+'" />').css({ position:"absolute",zIndex:9999999 }).prependTo(t).on("mouseleave",function(){ setTimeout(function(){o.remove()},0)}) ;$(document).one("touchend",function(){setTimeout(function(){ o.remove()},0)})}})}},_setFullWidth:function(){ this.component.setFullWidth("fullwidth"==this.component.data.ratio_type) },_setParallax:function(){ var t="editor"==v.mode?$("#site"):$(window),e=this.component.componentBody.find(".uii_img:first") ;if(this.component.data.parallax){ var i=this,o=i.component.node.position().top-t.height(),n=i.component.node.position().top+i.component.node.height() ;window.navigator.userAgent.match(/MSIE|Trident|Edge/)&&"viewer"==v.mode&&jQuery.fn.overrideWindowScroll(!0) ;"free"!=this.component.data.ratio_type&&"ratio"!=this.component.data.ratio_type||e.css("background-size","150% 150%") ;var a=function(){var i=n-o ;if(t.scrollTop()>o&&t.scrollTop()<n){ var a="50% "+(100-100*(t.scrollTop()-o)/i)+"%";e.css({ backgroundPosition:a})}};a() ;t.off("scroll.parallaxImg"+this.uniqId()).on("scroll.parallaxImg"+this.uniqId(),a) ;t.off("resize.parallaxImg"+this.uniqId()).on("resize.parallaxImg"+this.uniqId(),function(){ clearTimeout(i._to_window_resize) ;i._to_window_resize=setTimeout(function(){i._setParallax() },150)})}else{t.off("scroll.parallaxImg"+this.uniqId()) ;t.off("resize.parallaxImg"+this.uniqId()) ;"free"==this.component.data.ratio_type&&e.css("background-size","100% 100%") ;"ratio"==this.component.data.ratio_type&&e.css("background-size","contain") ;var s="50% 50%";e.css({backgroundPosition:s})}}, _setFilter:function(){var t=this.component.node.find(".uii_img") ;this.component.data.activate_mask?t=this.component.node.find(".content_svg"):0==t.length&&(t=this.component.node.find("img")) ;t.css("transform","translate3d(0,0,0)") ;this.component.data.gradient_colors[2]=this.component.data.gradient_colors[2]||45 ;jQuery.fn.setImgFilter(t,"image",this.component.data.filter,"filterColorImg"+this.uniqId(),{ color:this.component.getData("gradient_colors")[1], or:this.component.data.gradient_colors[0], angle:this.component.data.gradient_colors[2] },$(this.component.propertyNode).add(this.component.propertyDesignNode)) },_setColorFilter:function(){ "color"==this.component.data.filter&&$("#filterColorImg"+this.uniqId()).setBackgroundGradient(this.component.getData("gradient_colors")[1],this.component.data.gradient_colors[0],this.component.data.gradient_colors[2]) },_setRadius:function(){ var t=this.component.node.find(".uii_img") ;0==t.length&&(t=this.component.node.find("img")) ;var e=this.component.node.find(".img_overlay") ;if(this.component.data.radius_toggle&&this.component.data.radius&&"fullwidth"!=this.component.data.ratio_type&&!this.component.data.activate_mask){ var i=this.component.data.radius.join("px ")+"px" ;t.css("border-radius",i) ;"color"==this.component.data.filter&&e.css("border-radius",i) }else{t.css("border-radius","");e.css("border-radius","")}}, uniqId:function(){this._uid_=this._uid_||this.component.uniqId() ;return this._uid_},_isEmpty:function(){var t=!1 ;return"default.png"==this.component.data.imageFile.name&&-1==this.component.data.imageFile.id||t },onDeviceChanged:function(t){var e=this,i=this.component ;if("mobile_tree"==t.to){if(this.ori_ratio_type)return ;if(i.data.activate_mask)var o=0,n=setInterval(function(){ if(i.node.find(".content_svg").height()<30&&o<200){o++ ;e.updateImage()}else{clearInterval(n);n=null}},500) ;if(i.node.data("isContainer")){if("cover"!=i.data.ratio_type){ i.preloaded=!1;this.ori_ratio_type=i.data.ratio_type ;i.data.ratio_type="cover"} }else"ratio"==i.data.ratio_type&&i.node.css("min-height",i.node.width()*i.ui.aspectRatio_v) }else if(this.ori_ratio_type){ i.data.ratio_type=this.ori_ratio_type;delete this.ori_ratio_type }this.onPropertyChanged(["ratio_type"])}};</script><style>.uii_img{position:relative;height:100%;position:absolute;width:100%;background-position:center center;background-repeat:no-repeat} .uii_img.cover,.uii_img.fullwidth{background-size:cover} .uii_img.ratio{background-size:contain} .uii_img.free{background-size:100% 100%} .svg_defs{height:0;position:absolute;width:0} .uii_mask_node{user-select:none;-moz-user-select:none;-webkit-user-select:none} .UI_Image a object[type*=image]{pointer-events:none}</style></uidget>