@arc-core-components/element_image

A simple image as an Arc Core Component.

Usage no npm install needed!

<script type="module">
  import arcCoreComponentsElementImage from 'https://cdn.skypack.dev/@arc-core-components/element_image';
</script>

README

Element: Image

What does this do?

When used in a Fusion Project, this Core Component can be used to render an image.

These props are set automatically according to the structure of the content:

  • url (the src of the image)
  • caption (will also be used as alt)
  • credits

These display props are optional:

  • className (applied to the container)
  • imgClassName (applied to the img element)
  • captionClassName (applied to the caption container)
  • creditsClassName (applied to the credits container)
  • placeholderImage (if no url provided, this placeholder URL is rendered)
  • separator (string to use as a separator between credits, default "|")
  • showCredits (set false to hide credits)
  • sizePreset (render a resized image - see the content API core component docs for more resizer config info)

How do I use it?

import Image from "@arc-core-components/element_image";

<Image {...imageContentElement} className="your-classes" />;

Take a look in the src file to see a suggested implementation, in index.mdx

How can I view what's in there quickly?

Run npm i && npm run docz:dev after cloning to see what is within.

Testing & Linting

We are using Jest and XO for testing and linting.

We are using Husky to run a pre-push hook, preventing un-linted or code that fails tests from making it into the repo.

To test: npm test

To lint: npm run lint - This will also fix any simple linter errors automatically.

To push without testing or linting: git push --no-verify - This can often be helpful if you just need to push a branch for demonstration purposes or for help.