URL 매개 변수의 간단한 이미지 크기 조정.netlify의 Large Media는 편리합니다!

netlify의 Large Media

Git LFS(Git Large File Strage)와 구조는 Git 저장소에서 사이트 내용을 관리할 때 이미지와 PSD/ZIP 등 큰 파일을 포함하여 관리합니다.
LFS에 대한 자세한 접근은 없지만 URL 매개 변수를 사용하여 LFS를 사용하여 netlify에 배치된 이미지를 쉽게 처리할 수 있는 새로운 기능입니다.
Large Media 공식 문서
https://www.netlify.com/docs/large-media/#enabling-netlify-large-media
Git LFS 공식 사이트
https://git-lfs.github.com/

netlify Large Media 샘플

예를 들어 일반적으로git 저장소에 포함된github 등netlify를 통해 배치할 때 이러한 URL을 통해 이미지에 접근할 수 있다.
https://netlify-photo-gallery.netlify.com/images/apple.jpg

여기에 이런 형식을 덧붙이면 ?nf_resize=fit&w=200 조정된 이미지를 만들어 나에게 돌려준다.
https://netlify-photo-gallery.netlify.com/images/apple.jpg?nf_resize=fit&w=200

그런 다음 이미지 URL의 마지막 부분?nf_resize=smartcrop&w=200을 추가하면 트림된 이미지가 생성되고 반환됩니다.
https://netlify-photo-gallery.netlify.com/images/apple.jpg?nf_resize=smartcrop&w=200&h=200

이미지 하나만 올리면 크기가 조정된 이미지와 재단된 이미지를 바로 사용할 수 있습니다!너무 신들린 거 아니야?
이것이 바로 netlify Large Media 기능입니다.
공식 샘플에 Transformation demo와 발생기가 있기 때문에 다시 만지고 싶은 사람이 여기 있습니다.
https://netlify-photo-gallery.netlify.com

netlify Large Media 사용 방법

환경 준비

우선 현지 환경을 한 번 준비해야 한다.

버전 확인

git lfs versionGit LFS 버전: v2.5.1 이상 확인
그렇지 않으면 Git LFS가 설치됩니다.상세한 상황은 공식 사이트에서 사랑을 끊는다
https://git-lfs.github.com/ netlify -vnetlify-cli:2.6.4 이상 확인
없으면 netlify-cli를 설치합니다.자세한 사항은 공식 문서에서 할애하시기 바랍니다
https://www.netlify.com/docs/cli/

large media 플러그인 설치

버전 확인 후 netlify-cli 플러그인 설치

netlify plugins:install netlify-lm-plugin
netlify lm:install

현재 환경 준비 완료

사이트(라이브러리)별 설정

Large Media 기능을 사용하기 위해서는 모든 사이트가 기능을 켜야 하기 때문에 모든 사이트는 설정해야 한다.
1. 우선,netlify에서 프로젝트를 만들고github 저장소가 연결되었는지 확인합니다
2. 로컬 저장소도 연결

netlify link

3. 명령 설정

netlify lm:setup

4. 명령 설정git status에서 생성 확인.lfsconfig,gitadd.lfsconfig은git의 관리 하에 있다.

LFS로 관리

각 사이트의 설정 외에도 LFS로 파일 관리
이미지 추적마다 gitignorepattern rules도 사용할 수 있기 때문에 LFS 관리를 지정합니다.

git lfs track "sample.jpeg"
git lfs track "*.jpeg"

추적된 파일 일람은 여기서 확인할 수 있습니다.

git lfs track

추적할 때 생성.gitattributes하기 때문에gitaddcommit와도 관리합니다.
자세한 내용은 netlify 문서 또는 Git LFS 공식 웹 사이트를 참조하십시오.
https://www.netlify.com/docs/large-media/#large-media-file-tracking-configuration

확인

netlify large media의 설정과 LFS 설정을 잘 사용하면 저장소에 평소와 같이 push만 하면 large media 기능을 사용할 수 있습니다.
https://lfs-test.netlify.com/sample.jpeg?nf_resize=smartcrop&w=100&h=200

최초의 샘플처럼 파라미터를 추가하면 Large Media를 사용할 수 있습니다!
만약 정상적으로 실행된다면netlify 관리 화면도 이렇게 되고 문서가 연결된 화면에서 관리 이미지의 일람으로 바뀔 것이다.

공식적인 샘플도 있지만 자신이 시도한 샘플도 대체로
https://github.com/yahsan2/lfs-test

netlify Large Media 및 CMS

이 netlify large media 기능은 netlify CMS를 사용하여 이미지를 업로드하는 lfs로 이미지를 제출하기 때문에 간단하게 사용할 수 있기 때문에 netlify CMS도 추천합니다.이미지 크기가 있는 JAMstack의 CMS도 간단하게 제작할 수 있다는 얘기다.
https://www.netlifycms.org/docs/netlify-large-media/
정적 사이트 위탁 관리 서비스는 간단하지만 이 간지러운 곳은 끊임없이 netlify의 확장 상황을 얻고 있어 정말 팬이다.