Skip to content

Enabled inline display of SVG files using wrap="svg" parameter on fil… #992

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: 7.dev
Choose a base branch
from
Open

Enabled inline display of SVG files using wrap="svg" parameter on fil… #992

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
25 changes: 25 additions & 0 deletions docs/fieldtypes/file.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ If you have defined any [image manipulations](control-panel/file-manager/upload-

### Wrap Parameter

#### `wrap="link"`
You will frequently want to link to the file in your entry. Using the wrap parameter can simplify this process:

{news_image wrap="link"}
Expand All @@ -68,6 +69,8 @@ Will render as:

<a href="https://example.com/dir/filename.ext">filename</a>

#### `wrap="image"`

It can also be used to create image tags. In this case the filename will be used to create the alt parameter.

{news_image wrap="image"}
Expand All @@ -76,6 +79,28 @@ Which will output as:

<img src="https://example.com/dir/filename.ext" alt="filename" />

Additionally, you can use some HTML attributes with the `wrap="image"` parameter. These include `class`, `id`, `style`, `title`, `alt`, `width`, and `height`. For example:

{news_image wrap="image" class="my-image" id="my-image" style="border: 1px solid #000;" title="My Image" alt="My Image" width="100" height="100"}

For the width and height attributes, you can use the `width="width"` and `height="height"` to output the actual width and height of the image. For example:

{news_image wrap="image" width="width" height="height"}

#### `wrap="svg"`

If the file is SVG, you can use the `inline` wrap parameter to render the SVG inline:

{news_image wrap="svg"}

You can use `width` and `height` parameters to set the width and height of the SVG. Note that both need to be set. For example:

{news_image wrap="svg" width="100" height="100"}

Additionally, you can use `class`, `id` and `style` HTML attributes with the `wrap="svg"` parameter.

{news_image wrap="svg" class="my-svg" id="my-svg" style="border: 1px solid #000;" title="My SVG" alt="My SVG" width="100" height="100"}

### Variable Pair Usage

You can show detailed information about the file by using it as a tag pair and then referencing any of the available variables:
Expand Down