New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable support for custom defined CDN endpoints #97

Merged
merged 3 commits into from Sep 28, 2016

Conversation

Projects
None yet
5 participants
@dstaley
Contributor

dstaley commented Sep 12, 2016

This pull request allows theme creators to define custom CDN endpoints, and use them via the cdn handlebars helper.

When designing themes for BigCommerce, theme designers might want to include large, high resolution image assets as components of their theme. For example on maruccisports.com, each product category includes a 5120x2536 background image, most of which are between 3 and 5 MB. Since sending that much image data down the wire is a poor user experience, we use Imgix to resize and reformat the images depending on the device viewing them. A theme designer might want to use a local version of the image in development, and a version on a CDN like Imgix in production. This pull request allows the designer to define endpoints in their theme's config.json file like this:

{
  "name": "Cornerstone",
  "version": "1.3.2",
  "settings": {
    "homepage_new_products_count": 12,
    "homepage_featured_products_count": 8,
    "cdn": {
      "customcdn": {
        "path": "https://bigcommerce.customcdn.net"
      }
    }
  }
}

After defining an endpoint, the theme designer is then able to use the shortname the same way they currently use the webdav one:

<img src="{{cdn "customcdn:img/image.jpg"}}" />

In development, the previous helper would return the following:

<img src="/assets/cdn/customcdn/img/image.jpg" />

And in production:

<img src="https://bigcommerce.customcdn.net/img/image.jpg" />

Right now, the helper is configured to rewrite local URLs to a cdn folder within assets. This is to circumvent the 50MB bundle size limit by excluding assets/cdn from the bundle created by stencil bundle. In addition to this PR, I've filed one that makes this change against the stencil-cli repo. bigcommerce/stencil-cli#240

switch cdn config from object to string
also adds additional tests for when multiple CDN endpoints are
configured
@mcampa

This comment has been minimized.

Show comment
Hide comment
@mcampa

mcampa Sep 28, 2016

Contributor

LGTM 👍

need to test it before deploying to production @bc-ranji

Contributor

mcampa commented Sep 28, 2016

LGTM 👍

need to test it before deploying to production @bc-ranji

@mcampa mcampa merged commit e8cbfcf into bigcommerce:master Sep 28, 2016

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@bookernath

This comment has been minimized.

Show comment
Hide comment
@bookernath

bookernath Sep 29, 2016

Dude, sweet.

bookernath commented Sep 29, 2016

Dude, sweet.

@imagekit-developer

This comment has been minimized.

Show comment
Hide comment
@imagekit-developer

imagekit-developer Sep 15, 2017

Does it only work with cdn helper? How to do the same with getImage helper?

imagekit-developer commented Sep 15, 2017

Does it only work with cdn helper? How to do the same with getImage helper?

@mcampa

This comment has been minimized.

Show comment
Hide comment
@mcampa

mcampa Sep 15, 2017

Contributor

getImage only works with images hosted by BigCommerce so it won't work with custom cdns.

Contributor

mcampa commented Sep 15, 2017

getImage only works with images hosted by BigCommerce so it won't work with custom cdns.

@imagekit-developer

This comment has been minimized.

Show comment
Hide comment
@imagekit-developer

imagekit-developer Sep 16, 2017

Is there any possible way so that one can use custom CDN for the URLs generated via getImage?

Maybe some sort of assignment and then replacing in the template. Not sure if that's possible in the handlebar.

imagekit-developer commented Sep 16, 2017

Is there any possible way so that one can use custom CDN for the URLs generated via getImage?

Maybe some sort of assignment and then replacing in the template. Not sure if that's possible in the handlebar.

@mcampa

This comment has been minimized.

Show comment
Hide comment
@mcampa

mcampa Sep 20, 2017

Contributor

there is a replace helper. But again, getImage is a helper to resize product images hosted by BigCommerce. Images are processed in our servers and hosted in our cdn.

Contributor

mcampa commented Sep 20, 2017

there is a replace helper. But again, getImage is a helper to resize product images hosted by BigCommerce. Images are processed in our servers and hosted in our cdn.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment