From 8f393ee2090b99905b72fd6ad7c567cf3935e644 Mon Sep 17 00:00:00 2001 From: Ed Johnson-Williams Date: Thu, 12 Nov 2020 10:19:54 +0000 Subject: [PATCH 1/7] fixing several typos in readme --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 4148b0f..3fcdad4 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # svelte-cloudinary This is a little library that aims at integrating and making it easier to use the svelte with [Cloudinary](https://cloudinary.com/). -There is an official integration comming, but it's not ready and for not does not work great. +There is an official integration coming, but it's not ready and for not does not work great. ## 🌈 Features @@ -59,22 +59,22 @@ With `step` we approximate the size needed to a multiple of `step`. ###### Example -Immagine the same `` has the width of `420`,`470` and `1080` on an iPhone, Android and Laptop respectively. +Imagine the same `` has the width of `420`,`470` and `1080` on an iPhone, Android and Laptop respectively. With a `step` size of e.g. `100` (``) they will become `500`, `500`, and `1100`. This will limit the ammount of transformations needed. ### `bind` -With bind we can dynamically set the width and/or height of the transformet image depending of the rendered size. +With bind we can dynamically set the width and/or height of the transformed image depending of the rendered size. - `bind: this` The size of the `` element -- `bind: el` The computed size of another element in the dom (usefull for a carousell e.g.) +- `bind: el` The computed size of another element in the dom (useful for a carousel e.g.) - `bind: { width: this }` Only bind the width, leaving the height free. Also works with height of course - `bind: { width: '.wrapper' }` Finds the closest element that matches the selector and uses it for width. ##### Note -If you provide a `bind` options (``) but no crop option, we will automcatically add `crop: 'fill'` otherwise the image will not be resized by cloudinary. +If you provide a `bind` options (``) but no crop option, we will automatically add `crop: 'fill'` otherwise the image will not be resized by cloudinary. ###### TLDR; ```svelte From 3032edc32fcde9a091a0f5ef5ed11f56e101e53e Mon Sep 17 00:00:00 2001 From: Nicco Date: Thu, 12 Nov 2020 11:52:25 +0100 Subject: [PATCH 2/7] Create FUNDING.yml --- .github/FUNDING.yml | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..aa36e92 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,3 @@ +# These are supported funding model platforms + +github: cupcakearmy From 1e987f84b9925a4afbd723d8a105d0444420e2e0 Mon Sep 17 00:00:00 2001 From: Nicco Date: Mon, 16 Nov 2020 16:17:38 +0100 Subject: [PATCH 3/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3fcdad4..d3b2807 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # svelte-cloudinary This is a little library that aims at integrating and making it easier to use the svelte with [Cloudinary](https://cloudinary.com/). -There is an official integration coming, but it's not ready and for not does not work great. +There is an official integration coming, but it's not ready and for not does not work great for now (SSR e.g.). ## 🌈 Features From 1e14e44a643a3e2d8fcd3bc99964f4ff38f2e3d7 Mon Sep 17 00:00:00 2001 From: Nicco Date: Mon, 16 Nov 2020 16:29:01 +0100 Subject: [PATCH 4/7] Update README.md --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d3b2807..b61c71a 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,21 @@ yarn add svelte-cloudinary This will formulate the Cloudinary url and insert it into the `img.src` property. Also it will resize to the `img` object itself because we set `bind: true`. -## Key Concepts +## 🤔 Why an [action](https://svelte.dev/docs#use_action) and not component? + +Well components are great of course, but when we only need to set a `src` tags we can leverage the upsides of a svelte [action](https://svelte.dev/docs#use_action) + +What are benefits? + +- Native styling (Svelte for now does not allow easy styling of child components +- Lightweight +- Reusable and composable + +Downsides: + +- The src will not be set serverside, so also not in the initial server response. Which I believe is not that bad though for images. + +## 🤓 Key Concepts ### `step` From 59ec57bb866b38d80d7cf7c29fa14e35b49432f8 Mon Sep 17 00:00:00 2001 From: Nicco Date: Mon, 16 Nov 2020 16:30:25 +0100 Subject: [PATCH 5/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b61c71a..6b8299a 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,7 @@ Well components are great of course, but when we only need to set a `src` tags w What are benefits? -- Native styling (Svelte for now does not allow easy styling of child components +- Native styling (Svelte for now does not allow easy styling of child components)
With an action we can easily use local styling beacuse we still have access to the `` element - Lightweight - Reusable and composable From f3388d987bb6c92b2125706e4e90d236ae47a77d Mon Sep 17 00:00:00 2001 From: Nicco Date: Mon, 16 Nov 2020 16:37:07 +0100 Subject: [PATCH 6/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6b8299a..067daa6 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # svelte-cloudinary This is a little library that aims at integrating and making it easier to use the svelte with [Cloudinary](https://cloudinary.com/). -There is an official integration coming, but it's not ready and for not does not work great for now (SSR e.g.). +There is an [official integration coming](https://github.com/cloudinary/cloudinary-svelte), but it's not ready and for not does not work great for now (SSR e.g.). ## 🌈 Features From d89bc1e93db4433526880869f6c487b90a65e29b Mon Sep 17 00:00:00 2001 From: Nicco Date: Wed, 18 Nov 2020 11:35:28 +0100 Subject: [PATCH 7/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 067daa6..ceff8ee 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ The `step` property (defaults to `200`) helps reducing the amounts of transforma How? Basically whenever we calculate the dynamic size of the image rendered on the DOM we will get very specific numbers depending on the device. -With `step` we approximate the size needed to a multiple of `step`. +With `step` we approximate the size needed to the nearset bigger multiple of `step`. ###### Example