Versions Compared

Version Old Version 2 New Version Current
Changes made by

James Brightley

James Brightley

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Firstly enable Image Resizing on the Website by going to Speed > Optimisation > Image Resizing and toggling the enable button. Make sure the checkbox for “Resize images from any origin” is checked.

  2. Now go to the dashboard and click Workers, create a new Service, give the service a name and select the HTTP handler starter.

  3. Now select “Quick Edit“

  4. Paste the following snippet of code into the window on the left as in the below screenshot. Important! Replace https://images.tprofile.co with your domain if using a subdomain and https://www.tprofile.co/images with the domain and sub directory if using this method. resizingOptions allow you set any other resizing options as defined here.

    Code Block
    addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  constlet hiddenImageOrigin = "https://cdn.tprofile.com"
  const requestURLurl = new URL(request.url)

  const resizingOptions = {
    format: "webp",
    fit: 'contain',
    quality: 100
  }

  if (url.searchParams.has("fit")) resizingOptions.fit = url.searchParams.get("fit")
  if (requestURLurl.searchParams.has("width")) resizingOptions.width = url.searchParams.get('width') != null) {
    resizingOptions.width = requestURL.searchParams.get('width')
  }
  if (requestURL.searchParams.get('height') != null) {
    resizingOptions.height = requestURL.searchParams.get('height')
  }"width")
  if (url.searchParams.has("height")) resizingOptions.height = url.searchParams.get("height")
  if (url.searchParams.has("quality")) resizingOptions.quality = url.searchParams.get("quality")
  if (url.searchParams.has("format")) resizingOptions.format = url.searchParams.get("format")
  if (url.searchParams.has("anim")) resizingOptions.anim = url.searchParams.get("anim")
  if (url.searchParams.has("background")) resizingOptions.background = url.searchParams.get("background")
  if (url.searchParams.has("blur")) resizingOptions.blur = url.searchParams.get("blur")
  if (url.searchParams.has("brightness")) resizingOptions.brightness = url.searchParams.get("brightness")
  if (url.searchParams.has("compression")) resizingOptions.compression = url.searchParams.get("compression")
  if (url.searchParams.has("contrast")) resizingOptions.contrast = url.searchParams.get("contrast")
  if (url.searchParams.has("dpr")) resizingOptions.dpr = url.searchParams.get("dpr")
  if (url.searchParams.has("gamma")) resizingOptions.gamma = url.searchParams.get("gamma")
  if (url.searchParams.has("gravity")) resizingOptions.gravity = url.searchParams.get("gravity")
  if (url.searchParams.has("metadata")) resizingOptions.metadata = url.searchParams.get("metadata")
  if (url.searchParams.has("onerror")) resizingOptions.onerror = url.searchParams.get("onerror")
  if (url.searchParams.has("rotate")) resizingOptions.rotate = url.searchParams.get("rotate")

  let path = "";
  if (request.url.indexOf("https://images.tprofile.co") > -1) {
      path = request.url.replace("https://images.tprofile.co", "")
  }
  else if (request.url.indexOf("https://www.tprofile.co/images/widgety") > -1) {
      path = request.url.replace("https://www.tprofile.co/images/widgety", "")
      hiddenImageOrigin = "https://widgety-assets.s3.amazonaws.com"
  }
  else if (request.url.indexOf("https://www.tprofile.co/images") > -1) {
      path = request.url.replace("https://www.tprofile.co/images", "")
  }

  const imageURL = hiddenImageOrigin + path

  return fetch(imageURL, { cf: { image:resizingOptions } });
}

  5. Once you have this setup we need to configure the domain/URL you want to use. Do this on the website by going to Worker Routes > Add Route and setting the desired URL. In our example that would be either images.tprofile.co/* or www.tprofile.co/images/* select the service created earlier.

  6. Once you have this configured let TProfile know (if they haven't completed this work for you) and they will assign the custom domain to your account. You will then be able to specify width and height on the images e.g. https://www.tprofile.com/images/<url here>/image.jpg?width=100

...