From 181f50292ccc43c685f6940970297f8d40f57e2a Mon Sep 17 00:00:00 2001 From: Daniel Lautzenheiser Date: Thu, 20 Apr 2023 13:15:14 -0400 Subject: [PATCH] feat: netlify large media support (#721) --- package.json | 1 + .../backends/git-gateway/implementation.tsx | 10 +++--- packages/core/src/constants/configSchema.tsx | 1 + packages/core/src/interface.ts | 1 + packages/docs/content/docs/beta-features.mdx | 6 ++++ .../docs/content/docs/netlify-large-media.mdx | 32 +++++++++++++++++++ packages/docs/content/menu.json | 4 +++ 7 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 packages/docs/content/docs/netlify-large-media.mdx diff --git a/package.json b/package.json index 70fd7146..6383b046 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "lint": "lerna run lint", "prepare": "husky install", "release": "lerna publish --no-private", + "release-dev": "lerna publish --no-private --no-push --no-git-tag-version --dist-tag dev", "release-next": "lerna publish --no-private --dist-tag next", "test:ci": "lerna run test:ci", "test:integration:ci": "lerna run test:integration:ci", diff --git a/packages/core/src/backends/git-gateway/implementation.tsx b/packages/core/src/backends/git-gateway/implementation.tsx index db47ff75..63ae8301 100644 --- a/packages/core/src/backends/git-gateway/implementation.tsx +++ b/packages/core/src/backends/git-gateway/implementation.tsx @@ -117,6 +117,7 @@ export default class GitGateway implements BackendClass { api?: GitHubAPI | GitLabAPI | BitBucketAPI; branch: string; mediaFolder?: string; + transformImages: boolean; gatewayUrl: string; netlifyLargeMediaURL: string; backendType: string | null; @@ -140,6 +141,8 @@ export default class GitGateway implements BackendClass { this.config = config; this.branch = config.backend.branch?.trim() || 'main'; this.mediaFolder = config.media_folder; + const { use_large_media_transforms_in_media_library: transformImages = true } = config.backend; + this.transformImages = transformImages; const netlifySiteURL = localStorage.getItem('netlifySiteURL'); this.apiUrl = getEndpoint(config.backend.identity_url || defaults.identity, netlifySiteURL); @@ -437,7 +440,7 @@ export default class GitGateway implements BackendClass { rootURL: this.netlifyLargeMediaURL, makeAuthorizedRequest: this.requestFunction, patterns, - transformImages: false, + transformImages: this.transformImages ? { nf_resize: 'fit', w: 560, h: 320 } : false, }); }, ); @@ -470,7 +473,7 @@ export default class GitGateway implements BackendClass { return { url, blob }; } - async getMediaDisplayURL(displayURL: DisplayURL) { + async getMediaDisplayURL(displayURL: DisplayURL): Promise { const { path, id } = displayURL as DisplayURLObject; const isLargeMedia = await this.isLargeMediaFile(path); if (isLargeMedia) { @@ -481,8 +484,7 @@ export default class GitGateway implements BackendClass { return displayURL; } - const url = await this.backend!.getMediaDisplayURL(displayURL); - return url; + return this.backend!.getMediaDisplayURL(displayURL); } async getMediaFile(path: string) { diff --git a/packages/core/src/constants/configSchema.tsx b/packages/core/src/constants/configSchema.tsx index 5b5caaf8..6f990bbf 100644 --- a/packages/core/src/constants/configSchema.tsx +++ b/packages/core/src/constants/configSchema.tsx @@ -182,6 +182,7 @@ function getConfigSchema() { deleteMedia: { type: 'string' }, }, }, + use_large_media_transforms_in_media_library: { type: 'boolean' }, }, required: ['name'], }, diff --git a/packages/core/src/interface.ts b/packages/core/src/interface.ts index 312830c2..c95ae763 100644 --- a/packages/core/src/interface.ts +++ b/packages/core/src/interface.ts @@ -772,6 +772,7 @@ export interface Backend { uploadMedia?: string; deleteMedia?: string; }; + use_large_media_transforms_in_media_library?: boolean; } export interface Slug { diff --git a/packages/docs/content/docs/beta-features.mdx b/packages/docs/content/docs/beta-features.mdx index 77f6b59a..279e2895 100644 --- a/packages/docs/content/docs/beta-features.mdx +++ b/packages/docs/content/docs/beta-features.mdx @@ -118,3 +118,9 @@ Static CMS can provide a side by side interface for authoring content in multipl For repositories stored on Gitea, the gitea backend allows CMS users to log in directly with their Gitea account. Note that all users must have push access to your content repository for this to work. See [Gitea Backend](/docs/gitea-backend) for more information. + +## Large Media Support + +Netlify Large Media allows you to store your media files outside of your git backend. This is helpful if you are trying to store large media files. + +See [Gitea Backend](/docs/netlify-large-media) for more information. diff --git a/packages/docs/content/docs/netlify-large-media.mdx b/packages/docs/content/docs/netlify-large-media.mdx new file mode 100644 index 00000000..57a1cb18 --- /dev/null +++ b/packages/docs/content/docs/netlify-large-media.mdx @@ -0,0 +1,32 @@ +--- +group: Media +title: Netlify Large Media +weight: 20 +--- + +## Beta Feature. Use at your own risk + +[Netlify Large Media](https://www.netlify.com/features/large-media/) is a [Git LFS](https://git-lfs.github.com/) implementation for repositories connected to Netlify sites. This means that you can use Git to work with large asset files like images, audio, and video, without bloating your repository. It does this by replacing the asset files in your repository with text pointer files, then uploading the assets to the Netlify Large Media storage service. + +If you have a Netlify site with Large Media enabled, Static CMS will handle Large Media asset files seamlessly, in the same way as files stored directly in the repository. + +## Requirements + +To use Netlify Large Media with Static CMS, you will need to do the following: + +- Configure Static CMS to use the [Git Gateway backend with Netlify Identity](/docs/git-gateway-backend). +- Configure the Netlify site and connected repository to use Large Media, following the [Large Media docs on Netlify](https://www.netlify.com/docs/large-media/). + +When these are complete, you can use Static CMS as normal, and the configured asset files will automatically be handled by Netlify Large Media. + +## Image transformations + +All JPEG, PNG, and GIF files that are handled with Netlify Large Media also have access to Netlify's on-demand image transformation service. This service allows you to request an image to match the dimensions you specify in a query parameter added to the image URL. + +You can learn more about this feature in [Netlify's image transformation docs](https://www.netlify.com/docs/image-transformation/). + +### Media Gallery Thumbnails + +In repositories enabled with Netlify Large Media, Static CMS will use the image transformation query parameters to load thumbnail-sized images for the media gallery view. This makes images in the media gallery load significantly faster. + +**Note:** When using this option all tracked file types have to be imported into Large Media. For example if you track `*.jpg` but still have jpg-files that are not imported into Large Media the backend will throw an error. Check the [netlify docs](https://docs.netlify.com/large-media/setup/#migrate-files-from-git-history) on how to add previously committed files to Large Media. diff --git a/packages/docs/content/menu.json b/packages/docs/content/menu.json index be377227..f90e89b8 100644 --- a/packages/docs/content/menu.json +++ b/packages/docs/content/menu.json @@ -21,6 +21,10 @@ "name": "Widgets", "title": "Widgets" }, + { + "name": "Media", + "title": "Media" + }, { "name": "Customization", "title": "Customizing Static CMS"