https://tinypng.com/_next/static/chunks/1400-8cc33cd9429ea321.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1400],{8651:(e,n,t)=>{"use strict";t.d(n,{Sv:()=>f,Wv:()=>R,Ay:()=>U,Ij:()=>A});var r=t(17844),s=t(78024),i=t(37743),o=t(1833),l=t(93629),a=t(15383),h=t(14343),c=t(12694),d=t(86105);function p(e){return e.children}function u(e){var n,t,r=(0,c._)((n=e.children,[(t=h.Children.toArray(n)).filter(function(e){return h.isValidElement(e)&&e.type==p}),t.filter(function(e){return!h.isValidElement(e)||e.type!=p})]),2),s=r[0],i=r[1],o=(0,d._)(s);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("h3",{children:e.title}),i,(0,a.jsx)("div",{className:"instructions-steps",children:o.map(function(e,n){return(0,a.jsx)("div",{children:e},n)})}),e.footer]})}let f=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsxs)(u,(0,l._)((0,r._)({name:"Tinify CDN"},this.props),{title:"Change image URLs in your HTML",children:[(0,a.jsxs)(p,{children:[(0,a.jsxs)("p",{children:["Find the locations in your website or your web application where images are displayed. Look for ",(0,a.jsx)("code",{children:"<img/>"})," and make sure to change the endpoint to ",(0,a.jsx)("code",{children:this.props.endpoint}),"."]}),(0,a.jsxs)("div",{className:"code-with-label",children:[(0,a.jsx)("label",{children:"Before"}),(0,a.jsxs)("pre",{children:['<img src="/images/logo.jpg"/>',(0,a.jsx)("br",{}),'<img src="',this.props.origin,'/images/header.jpg"/>']})]}),(0,a.jsxs)("div",{className:"code-with-label",children:[(0,a.jsx)("label",{children:"After"}),(0,a.jsxs)("pre",{children:['<img src="',this.props.endpoint,'/images/logo.jpg"/>',(0,a.jsx)("br",{}),'<img src="',this.props.endpoint,'/images/header.jpg"/>']})]})]}),(0,a.jsxs)(p,{title:"Change image URLs in your CSS",children:[(0,a.jsxs)("p",{children:["Find any images in your CSS. Look for properties such as"," ",(0,a.jsx)("code",{children:"background-image"}),", ",(0,a.jsx)("code",{children:"list-style-image"}),","," ",(0,a.jsx)("code",{children:"border-image-source"}),". Change the endpoints to"," ",(0,a.jsx)("code",{children:this.props.endpoint}),"."]}),(0,a.jsxs)("div",{className:"code-with-label",children:[(0,a.jsx)("label",{children:"Before"}),(0,a.jsxs)("pre",{children:["div.header, header ","{\n","  ","background-image: url(/images/header.jpg);","\n}"]})]}),(0,a.jsxs)("div",{className:"code-with-label",children:[(0,a.jsx)("label",{children:"After"}),(0,a.jsxs)("pre",{children:["div.header, header ","{\n","  ","background-image: url(",this.props.endpoint,"/images/header.jpg);","\n}"]})]}),(0,a.jsxs)("p",{children:["Alternatively, if you are sure that all your image URLs are absolute or relative ",(0,a.jsx)("strong",{children:"paths without an endpoint"}),", then you can just change the URLs of your CSS files in your HTML."]}),(0,a.jsxs)("div",{className:"code-with-label",children:[(0,a.jsx)("label",{children:"Before"}),(0,a.jsx)("pre",{children:'<link rel="stylesheet" href="/styles/site.css"/>'})]}),(0,a.jsxs)("div",{className:"code-with-label",children:[(0,a.jsx)("label",{children:"After"}),(0,a.jsxs)("pre",{children:['<link rel="stylesheet" href="',this.props.endpoint,'/styles/site.css"/>']})]})]})]}))},n}(h.Component);var j=t(53764),x=t(69399),g=t(51689),m=t(80288);function y(e){var n=(0,c._)((0,h.useState)(!1),2),t=n[0],r=n[1];return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(m.A,{isOpen:t,contentLabel:"Instructions video",onRequestClose:function(){return r(!1)},children:(0,a.jsxs)("video",{src:e.url,controls:!0,autoPlay:!0,muted:!0,style:{maxWidth:"100%",maxHeight:"85vh",display:"block"},children:["Your browser does not support the ",(0,a.jsx)("code",{children:"video"})," element."]})}),(0,a.jsxs)(v,{children:[(0,a.jsxs)("div",{className:"video",onClick:function(){return r(!0)},children:[(0,a.jsxs)("video",{src:e.url,children:["Your browser does not support the ",(0,a.jsx)("code",{children:"video"})," element."]}),(0,a.jsx)(x.g,{icon:g.e74}),(0,a.jsx)("div",{className:"white-underlay"})]}),(0,a.jsx)("p",{children:"Follow our short demo video with installation instructions to get set up!"})]})]})}t(86227);var v=(0,j.I)("div")({name:"VideoStyles",class:"vhyal6w",propsAsIs:!1}),_=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsxs)(u,(0,l._)((0,r._)({name:n.title},this.props),{title:"Install and configure a CDN plugin",children:[(0,a.jsxs)(p,{children:[(0,a.jsxs)("p",{children:["Configuring a CDN in Drupal can be done with the"," ",(0,a.jsx)("a",{href:"https://drupal.org/project/cdn",target:"_blank",rel:"noopener noreferrer",children:"CDN module"}),"."]}),(0,a.jsxs)("p",{children:["After installing and activating the module, copy your Tinify CDN endpoint (without ",(0,a.jsx)("code",{children:"https://"}),") in the ",(0,a.jsx)("b",{children:"Mapping"}

1)," ","section in the ",(0,a.jsx)("b",{children:"CDN integration"})," settings. Make sure to enable"," ",(0,a.jsx)("b",{children:"Serve files from CDN"}),"."]})]}),(0,a.jsx)(y,{url:"/static/videos/drupal.mp4"})]}))},n}(h.Component);_.title="Drupal";var b=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsxs)(u,(0,l._)((0,r._)({name:n.title},this.props),{title:"Define a helper function",children:[(0,a.jsxs)(p,{children:[(0,a.jsx)("p",{children:"Express allows you to output whatever HTML you wish. Here is an example how you can create a helper function to serve and optimize your static files via Tinify CDN."}),(0,a.jsxs)("pre",{children:["const app = express();","\n","\n","app.locals.assetUrl = function(path) ","{\n","  ",'return "',this.props.endpoint,'/" + path',";\n","}"]})]}),(0,a.jsxs)(p,{title:"Use the helper in your templates",children:[(0,a.jsxs)("p",{children:["In all your templates, such as in this"," ",(0,a.jsx)("a",{href:"https://pugjs.org/api/getting-started.html",target:"_blank",rel:"noopener noreferrer",children:"Pug"})," ","example, call the helper function to generate an asset URL."]}),(0,a.jsxs)("pre",{children:["html","\n","  ","head","\n","    ","script(src=assetUrl('/scripts/site.js'))","\n","    ","link(href=assetUrl('/styles/site.css') rel=\"stylesheet\")","\n","  ","body","\n","    ","img(src=assetUrl('/images/header.jpg'))","\n"]})]})]}))},n}(h.Component);b.title="Express";var C=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsx)(u,(0,l._)((0,r._)({name:n.title},this.props),{title:"Install and configure asset pipeline",children:(0,a.jsxs)(p,{children:[(0,a.jsxs)("p",{children:["Although you can replace your URLs manually with Jekyll,"," ",(0,a.jsx)("a",{href:"https://github.com/envygeeks/jekyll-assets",target:"_blank",rel:"noopener noreferrer",children:"Jekyll Assets"})," ","makes this process a bit easier. It provides you with"," ",(0,a.jsx)("code",{children:"asset"})," and ",(0,a.jsx)("code",{children:"asset_url()"})," helpers. Refer to the"," ",(0,a.jsx)("a",{href:"https://github.com/envygeeks/jekyll-assets#jekyll-assets",target:"_blank",rel:"noopener noreferrer",children:"documentation for details"}),". ","Then locate the configuration file ",(0,a.jsx)("code",{children:"_config.yml"})," and set the CDN URL to your Tinify CDN endpoint."]}),(0,a.jsxs)("pre",{children:["assets:","\n","  ","cdn:","\n","    ","url: ",this.props.endpoint]})]})}))},n}(h.Component);C.title="Jekyll";var N=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsxs)(u,(0,l._)((0,r._)({name:n.title},this.props),{title:"Install and configure a CDN plugin",children:[(0,a.jsxs)(p,{children:[(0,a.jsxs)("p",{children:["Configuring a CDN in Joomla! can be done with a plugin such as"," ",(0,a.jsx)("a",{href:"https://extensions.joomla.org/extension/cdn-for-joomla/",target:"_blank",rel:"noopener noreferrer",children:"CDN for Joomla!"})," ","The free version of this plugin only supports using a CDN on unsecured pages, not via HTTPS. See the plugin page for details."]}),(0,a.jsxs)("p",{children:["After installing and activating the plugin, copy your Tinify CDN endpoint (without ",(0,a.jsx)("code",{children:"https://"}),") into the ",(0,a.jsx)("b",{children:"CDN Domain"})," ","field in the ",(0,a.jsx)("b",{children:"Setup"})," tab of the plugin settings."]})]}),(0,a.jsx)(y,{url:"/static/videos/joomla.mp4"})]}))},n}(h.Component);N.title="Joomla!";var w=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsx)(u,(0,l._)((0,r._)({name:n.title},this.props),{title:"Configure your asset base URL",children:(0,a.jsxs)(p,{children:[(0,a.jsxs)("p",{children:["Laravel supports CDN configurations by default since version"," ",(0,a.jsx)("a",{href:"https://github.com/laravel/laravel/blob/master/CHANGELOG.md#v5715-2018-11-22",children:"5.7.15"}),". ","Locate ",(0,a.jsx)("code",{children:"config/app.php"}),"and set the asset URL to your Tinify CDN endpoint."]}),(0,a.jsxs)("pre",{children:["    ","'asset_url' => '",this.props.endpoint,"',"]})]})}))},n}(h.Component);w.title="Laravel";var D=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsxs)(u,(0,l._)((0,r._)({name:n.title},this.props),{title:"Install and configure a CDN plugin",children:[(0,a.jsx)(p,{children:(0,a.jsx)("div",{children:(0,a.jsxs)("dl",{children:[(0,a.jsxs)("dt",{children:["Get Tinify CDN for Magento 2 from the"," ",(0,a.jsx)("a",{href:"https://marketplace.magento.com/tinify-tinifycdn-magento2.html",children:"Marketplace"}),". After installing the Tinify plugin, manually or using composer, follow the next steps to configure your Tinify CDN."]}),(0,a.jsx)("dt",{children:(0,a.jsxs)("ul",{children:[(0,a.jsxs)("li",{children:["Navigate to ",(0,a.jsx)("i",{children:"Stores"})," > ",(0,a.jsx)("i",{children:"Configuration"})," >"," ",(0,a.jsx)("i",{children:"Tinify CDN"}),"."]}),(0,a.jsx)("li",{children:"Enable Tinify plugin and save configuration."}),(0,a.jsx)("li",{children:"Select “Connect to your Tinify account” and complete the steps."}),(0,a.jsx)("li",{children:"Ensure the proper CDN endpoint is selected and save configuration."}),(0,a.jsxs)("li",{children:["Refresh your cached types from ",(0,a.jsx)("i",{children:"System"})," >"," ",(0,a.jsx)("i",{children:"Cache Management"}),"."]})]})}),(0,a.jsx)("dt",{children:"After the cached types have been flushed (refreshed) successfully your Tinify CDN setup is done!"})]})})}),(0,a.jsx)(y,{url:"/static/videos/magento2.mp4"})]}))},n}(h.Component);D.title="Magento 2";var k=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsx)(u,(0,l._)((0,r._)({name:n.title},this.props),{title:"Configure your asset host",children:(0,a.jsxs)(p,{children:[(0,a.jsxs)("p",{children:["Rails supports CDN configurations by default. Locate the file"," ",(0,a.jsx)("code",{children:"config/environment/production.rb"})," and set the asset hosts to your Tinify CDN endpoint (without ",(0,a.jsx)("code",{children:"https://"}),")."]}),(0,a.jsxs)("pre",{children:['config.action_controller.asset_host = "',this.props.endpoint.replace("https://",""),'"']})]})}))},n}(h.Component);k.title="Ruby on Rails";var L=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsxs)(u,(0,l._)((0,r._)({name:n.title},this.props),{title:"Configure your media servers",children:[(0,a.jsxs)(p,{children:[(0,a.jsx)("p",{children:"PrestaShop supports CDN configurations by default."}),(0,a.jsxs)("p",{children:["Copy your Tinify CDN endpoint (without ",(0,a.jsx)("code",{children:"https://"}),") into the ",(0,a.jsx)("b",{children:"Media server #1"})," field in ",(0,a.jsx)("b",{children:"Advanced settings"})," >"," ",(0,a.jsx)("b",{children:"Performance"}),". You may have to press ",(0,a.jsx)("b",{children:"Clear cache"})," after saving the settings in order for them to take effect."]})]}),(0,a.jsx)(y,{url:"/static/videos/prestashop.mp4"})]}))},n}(h.Component);L.title="PrestaShop";var T=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsx)(u,(0,l._)((0,r._)({name:n.title},this.props),{title:"Configure your asset base URL",children:(0,a.jsxs)(p,{children:[(0,a.jsxs)("p",{children:["Symfony supp

1orts CDN configurations by default. Locate",(0,a.jsx)("code",{children:"config/packages/framework.yaml"})," or"," ",(0,a.jsx)("code",{children:"app/config/config.yml"}),"and set the base URL to your Tinify CDN endpoint."]}),(0,a.jsxs)("pre",{children:["framework:","\n","    ","assets:","\n","        ","base_urls: ['",this.props.endpoint,"']"]})]})}))},n}(h.Component);T.title="Symfony";var S=function(e){function n(){return(0,i._)(this,n),(0,s._)(this,n,arguments)}return(0,o._)(n,e),n.prototype.render=function(){return(0,a.jsxs)(u,(0,l._)((0,r._)({title:"Install and configure a CDN plugin",name:n.title},this.props),{children:[(0,a.jsx)(p,{children:(0,a.jsxs)("p",{children:["Configuring a CDN in WordPress can be done with a plugin such as"," ",(0,a.jsx)("a",{href:"https://wordpress.org/plugins/cdn-enabler/",target:"_blank",rel:"noopener noreferrer",children:"CDN Enabler"}),"."]})}),(0,a.jsx)(p,{children:(0,a.jsxs)("p",{children:["After installing and activating the plugin, copy your Tinify CDN endpoint into the ",(0,a.jsx)("b",{children:"CDN URL"})," field in the settings."]})}),(0,a.jsx)(y,{url:"/static/videos/wordpress.mp4"})]}))},n}(h.Component);S.title="WordPress";var A={rails:k,symfony:T,laravel:w,jekyll:C,express:b},R={wordpress:S,magento2:D,prestashop:L,drupal:_,joomla:N};let U=(0,r._)({},A,R)},73102:(e,n,t)=>{"use strict";t.d(n,{A:()=>r});let r={src:"/_next/static/media/other.86213d5b.svg",height:56,width:207,blurWidth:0,blurHeight:0}},86227:e=>{e.exports={vhyal6w:"vhyal6w",video:"video","white-underlay":"white-underlay"}}}]);