docs: migrate guides from v1 to v2 Starlight #182
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| --- | ||
| title: Guides/Background Removal | ||
| --- | ||
|
|
||
|
|
||
| # Removing a Background from an Image | ||
|
|
||
| The CldImage component allows you to easily remove backgrounds from images using the `removeBackground` prop. | ||
|
|
||
| <Callout emoji={false}> | ||
| Removing backgrounds require enabling the <a href="https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon">Cloudinary AI Background Removal Add-On</a> which includes a free tier for getting started. | ||
| </Callout> | ||
|
|
||
| ## Example | ||
|
|
||
| <div style="max-width: 500px; margin: 0 auto"> | ||
| <CldImage | ||
ghostdevv marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| width={960} | ||
| height={600} | ||
| src={`images/turtle`} | ||
| sizes="(max-width: 480px) 100vw, 50vw" | ||
| removeBackground | ||
| alt="" | ||
| /> | ||
| </div> | ||
|
|
||
| ```svelte | ||
| <script> | ||
| import { CldImage } from 'svelte-cloudinary'; | ||
| </script> | ||
|
|
||
| <CldImage | ||
| width="960" | ||
| height="600" | ||
| src="images/turtle" | ||
| sizes="100vw" | ||
| removeBackground | ||
| alt="Turtle" | ||
| /> | ||
| ``` | ||
|
|
||
| </Tab> | ||
| <Tab title="getCldImageUrl"> | ||
|
|
||
ghostdevv marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| ```html | ||
| <script> | ||
| import { getCldImageUrl } from 'svelte-cloudinary'; | ||
|
|
||
| const cldUrl = getCldImageUrl({ | ||
| width: 960, | ||
| height: 600, | ||
| src: 'images/turtle', | ||
| removeBackground: true | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| </Tab> | ||
| </Tabs> | ||
|
|
||
| ## Learn More | ||
|
|
||
| - [CldImage](/cldimage/usage) | ||
| - [getCldImageUrl](/getcldimageurl/usage) | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,75 @@ | ||||||||||||||||||||
| --- | ||||||||||||||||||||
| title: Guides/Image Optimization | ||||||||||||||||||||
| order: 2 | ||||||||||||||||||||
| --- | ||||||||||||||||||||
|
|
||||||||||||||||||||
| <script> | ||||||||||||||||||||
|
|
||||||||||||||||||||
| import Callout from '$lib/components/Callout.svelte' | ||||||||||||||||||||
| import Video from '$lib/components/Video.svelte' | ||||||||||||||||||||
| import { Tabs, Tab} from '$lib/components/Tabs' | ||||||||||||||||||||
| import { CldOgImage, CldImage } from 'svelte-cloudinary' | ||||||||||||||||||||
|
|
||||||||||||||||||||
| </script> | ||||||||||||||||||||
|
Comment on lines
+5
to
+12
There was a problem hiding this comment. There are some more unused imports/script tags that exist in most of the files, here is one example of the change needed:
Suggested change
|
||||||||||||||||||||
|
|
||||||||||||||||||||
| # Optimizing Images in Svelte/SvelteKit | ||||||||||||||||||||
|
|
||||||||||||||||||||
| Automatically optimize images using the CldImage component. By default, CldImage opts you in to automatic optimization including delivering the most optimal format for the browser (WebP, AVIF). | ||||||||||||||||||||
|
|
||||||||||||||||||||
| You can further optimize delivery by using [responsive sizing](/guides/responsive-images) by using the `sizes` prop. | ||||||||||||||||||||
|
|
||||||||||||||||||||
| ## Example | ||||||||||||||||||||
|
|
||||||||||||||||||||
| <div style="max-width: 500px; margin: 0 auto"> | ||||||||||||||||||||
| <CldImage | ||||||||||||||||||||
| width="960" | ||||||||||||||||||||
| height="600" | ||||||||||||||||||||
| src={`images/turtle`} | ||||||||||||||||||||
| sizes="100vw" | ||||||||||||||||||||
| alt="Turtle" | ||||||||||||||||||||
| /> | ||||||||||||||||||||
| </div> | ||||||||||||||||||||
|
|
||||||||||||||||||||
| <Tabs tabs={['CldImage', 'getCldImageUrl']}> | ||||||||||||||||||||
| <Tab type="code" open title="CldImage"> | ||||||||||||||||||||
|
|
||||||||||||||||||||
| ```svelte | ||||||||||||||||||||
| <script> | ||||||||||||||||||||
| import { CldImage } from 'svelte-cloudinary'; | ||||||||||||||||||||
| </script> | ||||||||||||||||||||
|
|
||||||||||||||||||||
| <CldImage width="960" height="600" src="images/turtle" sizes="100vw" alt="Turtle" /> | ||||||||||||||||||||
| ``` | ||||||||||||||||||||
|
|
||||||||||||||||||||
| </Tab> | ||||||||||||||||||||
| <Tab type="code" title="getCldImageUrl"> | ||||||||||||||||||||
|
|
||||||||||||||||||||
| ```svelte | ||||||||||||||||||||
| <script> | ||||||||||||||||||||
| import { getCldImageUrl } from 'svelte-cloudinary'; | ||||||||||||||||||||
|
|
||||||||||||||||||||
| getCldImageUrl({ | ||||||||||||||||||||
| width: 960, | ||||||||||||||||||||
| height: 600, | ||||||||||||||||||||
| src: 'images/turtle' | ||||||||||||||||||||
| }); | ||||||||||||||||||||
| </script> | ||||||||||||||||||||
| ``` | ||||||||||||||||||||
|
|
||||||||||||||||||||
| </Tab> | ||||||||||||||||||||
| </Tabs> | ||||||||||||||||||||
|
|
||||||||||||||||||||
| <!-- | ||||||||||||||||||||
| ## Watch & Learn | ||||||||||||||||||||
|
|
||||||||||||||||||||
| <Video | ||||||||||||||||||||
| title="Optimize Images, Responsive Sizing, & AI Cropping in Svelte with Svelte Cloudinary" | ||||||||||||||||||||
| url="https://www.youtube.com/watch?v=Vr3H3XREkbw" | ||||||||||||||||||||
| /> | ||||||||||||||||||||
ghostdevv marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||||||||||||
| --> | ||||||||||||||||||||
|
|
||||||||||||||||||||
| ## Learn More | ||||||||||||||||||||
|
|
||||||||||||||||||||
| - [Responsive Images](/guides/responsive-images) | ||||||||||||||||||||
| - [CldImage](/cldimage/usage) | ||||||||||||||||||||
| - [getCldImageUrl](/getcldimageurl/usage) | ||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| --- | ||
| title: Guides/Image Overlays | ||
| order: 3 | ||
ghostdevv marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| --- | ||
|
|
||
| <script> | ||
|
|
||
| import Callout from '$lib/components/Callout.svelte' | ||
| import Video from '$lib/components/Video.svelte' | ||
| import { Tabs, Tab} from '$lib/components/Tabs' | ||
| import { CldOgImage, CldImage } from 'svelte-cloudinary' | ||
|
|
||
| </script> | ||
|
|
||
| # Overlaying Images | ||
|
|
||
| You can add images on top of other images by using image-based overlays. | ||
|
|
||
| ## Example | ||
|
|
||
| <div style="max-width: 500px; margin: 0 auto"> | ||
| <CldImage | ||
| width="960" | ||
| height="600" | ||
| src={`images/turtle`} | ||
| sizes="100vw" | ||
| overlays={[{ | ||
| publicId: 'images/earth', | ||
| position: { | ||
| x: 50, | ||
| y: 50, | ||
| gravity: 'north_west', | ||
| }, | ||
| effects: [ | ||
| { | ||
| crop: 'fill', | ||
| gravity: 'auto', | ||
| width: 500, | ||
| height: 500 | ||
| } | ||
| ] | ||
| }]} | ||
| alt="Turtle with earth" | ||
| /> | ||
| </div> | ||
|
|
||
| <Tabs tabs={['CldImage', 'getCldImageUrl']}> | ||
| <Tab type="code" open title="CldImage"> | ||
|
|
||
| ```svelte | ||
| <script> | ||
| import { CldImage } from 'svelte-cloudinary'; | ||
| </script> | ||
|
|
||
| <CldImage | ||
| width="960" | ||
| height="600" | ||
| src="images/turtle" | ||
| sizes="100vw" | ||
| overlays={[ | ||
| { | ||
| publicId: 'images/earth', | ||
| position: { | ||
| x: 50, | ||
| y: 50, | ||
| gravity: 'north_west' | ||
| }, | ||
| effects: [ | ||
| { | ||
| crop: 'fill', | ||
| gravity: 'auto', | ||
| width: 500, | ||
| height: 500 | ||
| } | ||
| ] | ||
| } | ||
| ]} | ||
| alt="Turtle with earth" | ||
| /> | ||
| ``` | ||
|
|
||
| </Tab> | ||
| <Tab type="code" title="getCldImageUrl"> | ||
|
|
||
| ```svelte | ||
| <script> | ||
| import { getCldImageUrl } from 'svelte-cloudinary'; | ||
|
|
||
| const cldUrl = getCldImageUrl({ | ||
| width: 960, | ||
| height: 600, | ||
| src: 'images/turtle', | ||
| overlays: [ | ||
| { | ||
| publicId: 'images/earth', | ||
| position: { | ||
| x: 50, | ||
| y: 50, | ||
| gravity: 'north_west' | ||
| }, | ||
| effects: [ | ||
| { | ||
| crop: 'fill', | ||
| gravity: 'auto', | ||
| width: 500, | ||
| height: 500 | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| </Tab> | ||
| </Tabs> | ||
|
|
||
| ## Learn More | ||
|
|
||
| - [CldImage](/cldimage/usage) | ||
| - [getCldImageUrl](/getcldimageurl/usage) | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| --- | ||
| title: Guides/Image Underlays | ||
| order: 4 | ||
| --- | ||
|
|
||
| <script> | ||
|
|
||
| import Callout from '$lib/components/Callout.svelte' | ||
| import Video from '$lib/components/Video.svelte' | ||
| import { Tabs, Tab} from '$lib/components/Tabs' | ||
| import { CldOgImage, CldImage } from 'svelte-cloudinary' | ||
|
|
||
| </script> | ||
|
|
||
| # Adding Layers Under Images | ||
|
|
||
| Underlays function very similar to overlays in terms of options, however they **do not support text**. | ||
|
|
||
| See the examples above under Overlays to learn more about the available configurations. | ||
|
|
||
| ## Example | ||
|
|
||
| <div style="max-width: 500px; margin: 0 auto"> | ||
| <CldImage | ||
| width="960" | ||
| height="600" | ||
| src={`images/turtle`} | ||
| sizes="100vw" | ||
| removeBackground | ||
| underlay="images/galaxy" | ||
| alt="Turtle swimming in a galaxy" | ||
| /> | ||
| </div> | ||
|
|
||
| <Tabs tabs={['CldImage', 'getCldImageUrl']}> | ||
| <Tab type="code" open title="CldImage"> | ||
|
|
||
| ```svelte | ||
| <script> | ||
| import { CldImage } from 'svelte-cloudinary'; | ||
| </script> | ||
|
|
||
| <CldImage | ||
| width="960" | ||
| height="600" | ||
| src="images/turtle" | ||
| sizes="100vw" | ||
| removeBackground | ||
| underlay="images/galaxy" | ||
| alt="Turtle swimming in a galaxy" | ||
| /> | ||
| ``` | ||
|
|
||
| </Tab> | ||
| <Tab type="code" title="getCldImageUrl"> | ||
|
|
||
| ```svelte | ||
| <script> | ||
| import { getCldImageUrl } from 'svelte-cloudinary'; | ||
|
|
||
| const cldUrl = getCldImageUrl({ | ||
| width: 960, | ||
| height: 600, | ||
| src: 'images/turtle', | ||
| removeBackground: true, | ||
| underlay: 'images/galaxy' | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| </Tab> | ||
| </Tabs> | ||
|
|
||
| ## Learn More | ||
|
|
||
| - [CldImage](/cldimage/usage) | ||
| - [getCldImageUrl](/getcldimageurl/usage) |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These callouts need migrating to the markdown syntax in each of the pages. For example, this one would be done like this: