Skip to content

update dependencies #8

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

update dependencies #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions .eslintrc.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@ module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['svelte3', '@typescript-eslint'],
plugins: ['@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'svelte3/typescript': () => require('typescript')
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2019
Expand Down
36 changes: 21 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ A Svelte component which uses CDNs to serve responsive images.
## Usage

### Install

`npm i @joeinnes/svelte-image`

### Import

Note that except for the 'alt' tag, all tags are optional and their default values are shown in the example below.

```
<script>
import { Image } from '@joeinnes/svelte-image';
Expand All @@ -28,16 +31,18 @@ provider.set({
```

Currently supported:
* Statically (zero configuration)
* Cloudimage (use your token as the 'key')

- Statically (zero configuration)
- Cloudimage (use your token as the 'key')

```
provider.set({
name: 'cloudimage',
key: 'cloudimage_token'
})
```
* Cloudinary (you need to create an HTTP Proxy media source, and then use your cloud name as the key)

- Cloudinary (you need to create an HTTP Proxy media source, and then use your cloud name as the key)

```
provider.set({
Expand All @@ -48,13 +53,14 @@ provider.set({

## Notes and Caveats

* hidpi mode will load the image double size for retina displays.
- hidpi mode will load the image double size for retina displays.

* You should provide a full URL to the image, not a relative path.
- You should provide a full URL to the image, not a relative path.

* In case you're using Statically (ie: the default) and there's no supported extension (gif, jpg, jpeg, png, or webp) listed in the image path, then the component will render the original, unoptimised version (https://twitter.com/staticallyio/status/1405700757475663873). You may be able to work around this by adding an ignored query (eg: `&image.jpg`) to the end of the URL or somewhere in the path, but results may vary. For example, https://pbs.twimg.com/media/FEBzSvdWYAoVJGc?format=jpg&name=medium does not contain '.jpg', and appending `&image.jpg` does not work. However, you can add the .jpg after the ID: `https://pbs.twimg.com/media/FEBzSvdWYAoVJGc.jpg?format=jpg&name=medium`. This will vary depending on the origin.
- In case you're using Statically (ie: the default) and there's no supported extension (gif, jpg, jpeg, png, or webp) listed in the image path, then the component will render the original, unoptimised version (https://twitter.com/staticallyio/status/1405700757475663873). You may be able to work around this by adding an ignored query (eg: `&image.jpg`) to the end of the URL or somewhere in the path, but results may vary. For example, https://pbs.twimg.com/media/FEBzSvdWYAoVJGc?format=jpg&name=medium does not contain '.jpg', and appending `&image.jpg` does not work. However, you can add the .jpg after the ID: `https://pbs.twimg.com/media/FEBzSvdWYAoVJGc.jpg?format=jpg&name=medium`. This will vary depending on the origin.

## Aspect Ratio

Don't know exactly what aspect ratio your container will have when it loads on a user's screen? Use `bind:clientWidth` and `bind:clientHeight` to calculate the aspect ratio:

```
Expand All @@ -71,20 +77,20 @@ Don't know exactly what aspect ratio your container will have when it loads on a

## Have full control of your server?

Then this might not be the best package for you.
Then this might not be the best package for you.

This component is more suitable if you:

* don't have a server
* don't have storage space/processing power on the server
* need images to be cropped/resized/whatever at runtime rather than at buildtime
* want something that works with SvelteKit
* don't have a CDN in place already
- don't have a server
- don't have storage space/processing power on the server
- need images to be cropped/resized/whatever at runtime rather than at buildtime
- want something that works with SvelteKit
- don't have a CDN in place already

If you:

* have a CDN in place
* need more finegrained control over image processing
* don't want third parties interfering with your images
- have a CDN in place
- need more finegrained control over image processing
- don't want third parties interfering with your images

You might instead want to check out https://github.com/matyunya/svelte-image
Loading