https://github.com/markbattistella/image-zoom-publish-plugin
Add a Medium.com style image zoom for items within the document content.
https://github.com/markbattistella/image-zoom-publish-plugin
image publish publish-plugin swift
Last synced: 2 months ago
JSON representation
Add a Medium.com style image zoom for items within the document content.
- Host: GitHub
- URL: https://github.com/markbattistella/image-zoom-publish-plugin
- Owner: markbattistella
- License: mit
- Created: 2022-04-11T12:02:54.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-11T11:46:10.000Z (over 2 years ago)
- Last Synced: 2025-03-11T00:02:13.336Z (3 months ago)
- Topics: image, publish, publish-plugin, swift
- Language: Swift
- Homepage:
- Size: 11.5 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Image Zoom for Publish
Add a `medium.com` style image zoom for images within your document.
The script allows images to be zoomed to the full width of the view port so the user can expand images beyond the container width.
Users can continue scrolling and theimage will resign into its original place.
## Installation
To install it into your Publish package, add it as a dependency within your `Package.swift` manifest:
```swift
let package = Package(
dependencies: [
.package(
name: "ImageZoom",
url: "https://github.com/markbattistella/image-zoom-publish-plugin",
from: "1.1.0"
)
],
targets: [
.target(dependencies: ["ImageZoom"])
]
)
```
You will need to add two javascript items into your ``.
The best way to inject the script is to add it to your `.footer` element:
```swift
extension Node where Context == HTML.BodyContext {
static func footer(for site: Website) -> Node {
return .footer(
...
.raw(""),
.raw("mediumZoom('[data-zoomable="true"]', { margin: 20, background: '#FFF' });")
...
)
}
}
```
## Configuration
In the script configuration is where you can set up the medium.com style zooming.
```javascript
mediumZoom('[data-zoomable="true"]', {
margin: 20,
background: '#FFF'
})
```
The first line is **mandatory** otherwise the images won't register the script.
You can change the `margin` and the `background`.
The `margin` is how much you want the image to be inset when enlarged into full view. It is in pixels.
The `background` is the colour of the overlay which the image sits on top of. The best way to handle it is to use a CSS variable and trigger it for light and dark mode.
For example:
```css
::root {
--background-colour: rgb( 255, 255, 255 );
}
@media all and (prefers-color-scheme: dark) {
::root {
--background-colour: rgb( 0, 0, 0 );
}
}
```
```javascript
mediumZoom('[data-zoomable="true"]', {
margin: 20,
background: 'var(--background-colour)'
})
```
## Usage
### Pipeline
The plugin can then be used within any publishing pipeline like this:
```swift
import ImageZoom
try DeliciousRecipes().publish(using: [
.installPlugin(.zoomImage())
])
```
By default it will show the image captions, however if you wish to hide them under the image do so by installing the plugin as:
```swift
import ExtraComponents
try DeliciousRecipes().publish(using: [
.installPlugin(.zoomImage(showCaption: false))
])
```
### Markdown
When writing your markdown documents you add an image as you normally would. This will automatically be transformed into accepting the zooming attributes.
```markdown
```
If you want to disable the zooming on a specific image add the `nozoom` attribute after the image url:
```markdown
```
It is case insensitive, so any variation should work: `NOZOOM`, `noZoom`, `NoZoom`, or even `nOZooM`
## Contributing
I've turned off Issues and if you wish to add/change the codebase please create a Pull Request.
This way everyone can allow these components to grow, and be the best rather than waiting on me to write it.
### How to help
1. Clone the repo: `git clone https://github.com/markbattistella/image-zoom-publish-plugin.git`
1. Create your feature branch: `git checkout -b my-feature`
1. Commit your changes: `git commit -am 'Add some feature'`
1. Push to the branch: `git push origin my-new-feature`
1. Submit the pull request