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' /><checkbox default='false' feature='image_protection' help='By activating this feature, <b>your visitors will not be able to download these images</b> by right clicking on an image or by drag-dropping it or by browsing the source of the page.' name='protect' value='Anti-download' /></properties><design_properties><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','50%!rgba(0,0,0,0.5)']' name='gradient_colors' /><trigger help='Set the block to the real size of the image.' icon='arrow_tb' text='Real Size' trigger='realsize' /><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' /></design_properties></view><script>UI_List.UI_Image={initialize:function(a){this.component=a; a.setOptions(["locked","container","fixed","footer","sticky"]); this.protect_available=(v.mode=="editor"||v.features.image_protection); this.mouseover_available=(v.mode=="editor"||v.features.image_mouseover) },updateImage:function(){this.component.node.unbind(); var b=this; var d={h:this.component.H(),w:this.component.W()}; var a=1; var c=function(g,f){var e=$("<span>").css({position:"absolute",top:"-1000px"}).appendTo("body"); e.setIcon(b.component.data.mask,false,function(){setTimeout(function(){var i=cdn_url(bestImgSrc(f,b.component.W(),b.component.H())); var h=function(){e.children().css({"font-size":"100px"}); var m={w:e.width(),h:e.height()}; a=m.h/m.w; var l=document.createElementNS("http://www.w3.org/2000/svg","text"); g.empty().addClass("uii_mask_node"); var j=Math.min(d.h/m.h*100,d.w/m.w*100); l.setAttributeNS(null,"x",(d.w-j*m.w/100)/2); var k=j*m.h/100; l.setAttributeNS(null,"y",((d.h-k)/2)+(k/(b.component.data.mask.service!="Symbola"?1:1.3))); l=$.fn.setIcon(b.component.data.mask,$(l))[0]; var n='<pattern class="uii_pattern" id="'+(g==b.img2?"hover_":"")+"pattern_mask_"+b.component.uniqId()+'" patternUnits="userSpaceOnUse" width="'+d.w+'" height="'+d.h+'" viewbox="0 0 '+d.w+" "+d.h+'"><image xlink:href="'+i+'" width="'+d.w+'" height="'+d.h+'" preserveAspectRatio="xMidYMid '+(b.component.data.ratio_type=="cover"?"slice":"meet")+'" /></pattern>'; $(".pattern_mask",b.component.node).remove(); g.html("<svg class='svg_defs'><defs>"+n+"</defs></svg>").append($('<svg class="content_svg" width="'+d.w+'" height="'+d.h+'"></svg>')); $(".content_svg",g)[0].appendChild(l); $(l).css({fill:"url(#"+(g==b.img2?"hover_":"")+"pattern_mask_"+b.component.uniqId()+")","font-size":j+"px"}); setTimeout(function(){e.remove() },2000) }; $.fn.loadImage(i).done(function(){h() }).fail(function(){if(/ra0\.cdnsw\.com\/cc0/.test(i)){i=i.replace("ra0.cdnsw.com/cc0","www.sitew.com/file/pixabay"); h() }}) },100) }) }; if(this.component.data.activate_mask&&this.component.data.mask){$(".uii_pattern",this.component.node).remove(); c(this.img1,b.component.data.imageFile) }else{this.img1.removeClass(); if(!this.component.preloaded||this._protected()||this.component.data.ratio_type=="fullwidth"){this.img1.empty().append(b._setImageDefault(this.component.data.imageFile,this.component)); if(this._protected()){this._antiDownload(this.img1) }}if(this.mouseover_available&&this.component.data.mouseoverMenu&&this.component.data.mouseoverMenu!=""){this.component.node.mouseover(function(){if(window.UI_Menu){UI_Menu.showDropDownMenu(b.component.data.mouseoverMenu) }}) }this._setFullWidth(); this._setParallax() }if(this.mouseover_available&&this.component.data.mouseoverImage){if(this.component.data.activate_mask&&this.component.data.mask){c(this.img2,this.component.data.mouseoverImage) }else{this.img2.empty().append(b._setImageDefault(this.component.data.mouseoverImage,this.component)) }this.component.node.hover(function(){b.img2.show(); b.img1.hide() },function(){b.img1.show(); b.img2.hide() }) }this._setFilter() },getDescriptions:function(){var b=this; var a=function(e){var c={}; c[b.component.data.imageFile.id]=e; b.captions.resolve(c) }; if(this.component.description){a(this.component.description) }},updateLink:function(){var a=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=true; this.component.data.link=null }catch(b){dbg.error("Image.tb_imgs",b,this.component.data) }}if(this.component.data.link){this.link.attr(this.component.data.link); if(!v.features.do_follow_links){this.link.attr("rel","nofollow") }if(v.mode=="editor"&&this.link.attr("onClick")==""){this.link.attr("target","test_link") }}else{if(this.component.data.bigger){this.link.attr("href","#").click(function(){if(a.component.data.tb_imgs&&a.component.data.tb_imgs.length>0){tb_show_viewer(FileDescription.get(a.component.data.tb_imgs),0,a.component.data.tb_imgs,a._protected()) }else{tb_show_viewer((v.mode=="editor")?FileDescription.get([a.component.data.imageFile]):a.captions,0,[a.component.data.imageFile],a._protected()); sigCtl.emit("UI_Image.fullscreen",a.component.data.imageFile) }this.blur(); return false }).on("dblclick",function(){return false }) }}if(this.component.data.imageFile.removable){this.getDescriptions() }},onDisplay:function(b){var a=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=b.find("a"); this.img1=b.find("span:first"); this.img2=b.find("span:last").hide(); this.captions=$.Deferred(); if(this.mouseover_available&&this.component.data.mouseoverMenu&&this.component.data.mouseoverMenu!=""){Misc.poll(function(){return window.UI_Menu },function(){UI_Menu.setAsDropDownMenu(a.component.data.mouseoverMenu) }) }this.updateImage(); this.updateLink(); if(v.mode!="editor"&&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:false}) }this.aspectRatio_v=this.component.data.imageFile.height/this.component.data.imageFile.width; if(this.component.data.ratio_type=="ratio"){this.component.setAspectRatio(this.aspectRatio_v) }this._setFullWidth(); this._setParallax(); this._setFilter() },_loadProperties:function(){var a=$(this.component.propertyNode).add(this.component.propertyDesignNode); if(this.component.data.filter=="color"){$(".gradientProperty",a).css("display","table"); $(".selectGradientO.k-widget",a).show(); $(".roundSliderPropertyDiv",a).css("display","table"); if(this.component.data.gradient_colors[0]=="diagonal"){$(".roundSliderPropertyDiv",a).show() }else{$(".roundSliderPropertyDiv",a).hide() }}else{$(".gradientProperty",a).css("display","none"); $(".selectGradientO.k-widget",a).hide(); $(".roundSliderPropertyDiv",a).css("display","none") }if(this.component.data.activate_mask){$(".uii_chose_mask",a).show(); $("input[value=color]",a).parent().hide(); $(".uii_parallax_control",a).hide() }else{$(".uii_chose_mask",a).hide(); $("input[value=color]",a).parent().show(); $(".uii_parallax_control",a).show() }},onSelect:function(){this._loadProperties() },onPropertyChanged:function(a){this._loadProperties(); if(a.include("imageFile")){this.updateImage(); if(this.component.data.ratio_type!="fullwidth"&&this.component.data.ratio_type!="cover"){var f=this.component; var b=this.component.data.imageFile.width; var c=this.component.data.imageFile.height; this.refreshAspectRatio(); for(var g in v.device_modes){if(g==v.device_modes[g]){var e=f.prop(g).w; if(b>e){b=e; c=b*this.aspectRatio_v }f.setXYZWH({w:b,h:c},{device:g,send_events:false}); sigCtl.emit("Component.moved") }}}}if(a.include("mouseoverImage")||a.include("activate_mask")||a.include("mask")){this.updateImage() }if(a.include("ratio_type")){if(this.component.data.ratio_type=="ratio"){this.component.setAspectRatio(this.aspectRatio_v); if(window.blockSelector&&blockSelector.selected_cpts.length>0){blockSelector.drawSelector() }}else{this.component.setAspectRatio(null) }}if(a.include("link")){this.component.data.tb_imgs=null; this.updateLink() }if(a.include("bigger")){if(this.component.data.bigger){this.component.data.link=null; this.component.data.tb_imgs=null }this.updateLink() }if(a.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=true }this.updateLink() }if(a.include("realsize")){this.component.setXYZWH({w:this.component.data.imageFile.width,h:this.component.data.imageFile.height}) }if(window.UI_Menu&&a.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(a.include("ratio_type")){this._setFullWidth(); this.updateImage() }if(a.include("parallax")){this._setParallax() }if(a.include("filter")){this._setFilter() }else{if(a.includeOne(["gradient_colors"])){this._setColorFilter() }}},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.refreshAspectRatio() },onMoveStop:function(){this._setFullWidth(); this._setParallax(); this._setFilter() },onMoved:function(){this.refreshAspectRatio() },refreshAspectRatio:function(){if(this.component.data.ratio_type=="ratio"){var a=this.component.data.imageFile.width; var b=this.component.data.imageFile.height; this.aspectRatio_v=b/a; this.component.setAspectRatio(this.aspectRatio_v) }sigCtl.emit("Component.moved") },_setImageDefault:function(a,b){var c=bestImgSrc(a,this.component.data.ratio_type=="fullwidth"?screen.width:b.W(),b.H(),{keep_ratio:this.component.data.ratio_type!="free"}); return $("<div>").addClass("uii_img "+b.data.ratio_type).cdnSrc(c,b.W(),b.H()) },_protected:function(){return(this.component.data.protect||v.page_bg.security.content_protection)&&v.mode!="editor"&&this.protect_available },_antiDownload:function(c){c=c.parents(".componentBody:first"); c.on("contextmenu",function(d){if(d.target.nodeName=="DIV"){return false }}); if(this.component.data.link||this.component.data.bigger){return }var a="/images/spacer.gif"; var b=new Image(); b.src=a; c.on("mouseenter touchstart",function(g){var d=$(this); if($(".protectOverlay",d).length>0){return }var f=$('<img class="protectOverlay" src="'+a+'" width="'+d.width()+'" height="'+d.height()+'" />').css({position:"absolute",zIndex:9999999}).prependTo(c).on("mouseleave",function(){setTimeout(function(){f.remove() },0) }); $(document).one("touchend",function(){setTimeout(function(){f.remove() },0) }) }) },_setFullWidth:function(){this.component.setFullWidth(this.component.data.ratio_type=="fullwidth") },_setParallax:function(){var h=v.mode=="editor"?$("#site"):$(window); var c=this.component.componentBody.find(".uii_img:first"); if(this.component.data.parallax){var b=this; var a=b.component.node.position().top-h.height(); var e=b.component.node.position().top+b.component.node.height(); var d=window.navigator.userAgent.match(/MSIE|Trident|Edge/); if(d&&v.mode=="viewer"){jQuery.fn.overrideWindowScroll(true) }if(this.component.data.ratio_type=="free"||this.component.data.ratio_type=="ratio"){c.css("background-size","150% 150%") }var g=function(){var j=e-a; if(h.scrollTop()>a&&h.scrollTop()<e){var i=(((h.scrollTop()-a)*100)/j); var k="50% "+(100-i)+"%"; c.css({backgroundPosition:k}) }}; g(); h.off("scroll.parallaxImg"+this.uniqId()).on("scroll.parallaxImg"+this.uniqId(),g); h.off("resize.parallaxImg"+this.uniqId()).on("resize.parallaxImg"+this.uniqId(),function(){clearTimeout(b._to_window_resize); b._to_window_resize=setTimeout(function(){b._setParallax() },150) }) }else{h.off("scroll.parallaxImg"+this.uniqId()); h.off("resize.parallaxImg"+this.uniqId()); if(this.component.data.ratio_type=="free"){c.css("background-size","100% 100%") }if(this.component.data.ratio_type=="ratio"){c.css("background-size","contain") }var f="50% 50%"; c.css({backgroundPosition:f}) }},_setFilter:function(){var a=this.component.node.find(".uii_img"); if(this.component.data.activate_mask){a=this.component.node.find(".content_svg > text") }else{if(a.length==0){a=this.component.node.find("img") }}a.css("transform","translate3d(0,0,0)"); this.component.data.gradient_colors[2]=this.component.data.gradient_colors[2]||45; jQuery.fn.setImgFilter(a,"image",this.component.data.filter,"filterColorImg"+this.uniqId(),{color:this.component.data.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(){if(this.component.data.filter=="color"){$("#filterColorImg"+this.uniqId()).setBackgroundGradient(this.component.data.gradient_colors[1],this.component.data.gradient_colors[1],this.component.data.gradient_colors[2]) }},uniqId:function(){this._uid_=this._uid_||this.component.uniqId(); return this._uid_ },_isEmpty:function(){var a=false; if(this.component.data.imageFile.name=="default.png"&&this.component.data.imageFile.id==-1){return true }return a },onDeviceChanged:function(b){var a=this,f=this.component; if(b.to=="mobile_tree"){if(this.ori_ratio_type){return }if(f.data.activate_mask){var d=0; var e=setInterval(function(){if(f.node.find(".content_svg").height()<30&&d<200){d++; a.updateImage() }else{clearInterval(e); e=null }},500) }if(f.node.data("isContainer")){if(f.data.ratio_type!="cover"){f.preloaded=false; this.ori_ratio_type=f.data.ratio_type; f.data.ratio_type="cover" }}else{if(f.data.ratio_type=="ratio"){f.node.css("min-height",f.node.width()*f.ui.aspectRatio_v) }}}else{if(this.ori_ratio_type){f.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}</style></uidget>