nova-advanced-image-field - GitLite

KO | EN

gitlite — search

#react #android #machine-learning #rust #deep-learning #macos #java #cli #kubernetes #vue #awesome-list #pytorch #ios #open-source

nova-advanced-image-field

(★ 102)

🌄 📐 A Laravel Nova advanced image field with cropping and resizing using Vue Advanced Cropper and Intervention Image

파일 탐색기

최종 버전 다운로드 (.zip)

- FUNDING.yml
- - field.js
  - field.js.LICENSE.txt
- mix-manifest.json
- - field.js
- AdvancedAvatar.php
- AdvancedImage.php
- FieldServiceProvider.php
- TransformableImage.php
.gitignore
CHANGELOG.md
composer.json
LICENSE
nova.mix.js
package.json
README.md
screenshot.png
webpack.mix.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/ctessier/nova-advanced-image-field

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd nova-advanced-image-field

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

3. PHP (Composer)

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
PHP PHP 실행 환경이 필요합니다.
Composer PHP 라이브러리 설치를 위한 패키지 매니저입니다.

composer require ctessier/nova-advanced-image-field

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ php -S localhost:8000 같은 내장 서버로 실행한 뒤 브라우저에서 http://localhost:8000 으로 접속해보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Nova Advanced Image Field</h1>

<p align="center">
  <a href="https://github.styleci.io/repos/156091175?branch=2.x"><img src="https://github.styleci.io/repos/156091175/shield?branch=2.x" alt="StyleCI"></a>
  <a href="https://packagist.org/packages/ctessier/nova-advanced-image-field"><img src="https://img.shields.io/packagist/v/ctessier/nova-advanced-image-field.svg?style=flat-square" alt="Latest Version on Packagist" /></a>
  <a href="https://packagist.org/packages/ctessier/nova-advanced-image-field"><img src="https://img.shields.io/packagist/dm/ctessier/nova-advanced-image-field.svg?style=flat-square" alt="Total Downloads" /></a>
  <a href="https://packagist.org/packages/ctessier/nova-advanced-image-field"><img src="https://img.shields.io/github/license/ctessier/nova-advanced-image-field?color=%23B2878B&style=flat-square" alt="License" /></a>
</p>

<p align="center"><i>An advanced image field for Nova allowing you to upload, crop and resize images</i></p>

This package is built on top of the native Nova image field. It uses [Advanced Cropper](https://advanced-cropper.github.io/vue-advanced-cropper/) to show a cropper on the frontend, and [Intervention Image](http://image.intervention.io) to process the image on the backend.

![screenshot of the advanced image field](https://raw.githubusercontent.com/ctessier/nova-advanced-image-field/2.x/screenshot.png)

## Requirements

<table>
  <thead>
    <tr>
      <th>Version</th>
      <th>PHP</th>
      <th>Nova</th>
      <th>GD (default)</th>
      <th>Imagick</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.x</td>
      <td>>=7.1</td>
      <td>2 or 3</td>
      <td rowspan=2>>=2.0</td>
      <td rowspan=2>>=6.5.7</td>
    </tr>
    <tr>
      <td>2.x</td>
      <td>>=7.3</td>
      <td>4</td>
  </tbody>
</table>

See [Intervention requirements](https://image.intervention.io/v2/introduction/installation) for more details.

## Getting started

Install the package into a Laravel application with Nova using Composer:

```bash
composer require ctessier/nova-advanced-image-field
```

If you want to use Imagick as the default image processing library, follow the [Intervention documentation for Laravel](https://image.intervention.io/v2/introduction/installation#laravel).
This will provide you with a new configuration file where you can specify the driver you want.

## Code examples

`AdvancedImage` extends from `Image` so you can use any methods that `Image` implements. See the documentation [here](https://nova.laravel.com/docs/3.0/resources/file-fields.html).

```php
// Show a cropbox with a fixed ratio
AdvancedImage::make('Photo')->croppable(16/9),

// Resize the image to a max width
AdvancedImage::make('Photo')->resize(1920),

// Override the image processing driver for this field only
AdvancedImage::make('Photo')->driver('imagick'),
```

To display the image as a rounded avatar, use the `AdvancedAvatar` class or the `rounded` method:

```php
AdvancedAvatar::make('Avatar')->croppable(),
AdvancedImage::make('Avatar')->croppable()->rounded(),
```

## API

### `driver(string $driver)`

Override the default driver to be used by Intervention for the image manipulation.

```php
AdvancedImage::make('Photo')->driver('imagick'),
```

### `croppable([float $ratio])`

Specify if the underlying image should be croppable.

If a numeric value is given as a first parameter, it will be used to define a fixed aspect ratio for the crop box.

```php
AdvancedImage::make('Photo')->croppable(),
AdvancedImage::make('Photo')->croppable(16/9),
```

### `resize(int $width = null[, int $height = null])`

Specify the size (width and height) the image should be resized to.

```php
AdvancedImage::make('Photo')->resize(1920),
AdvancedImage::make('Photo')->resize(600, 400),
AdvancedImage::make('Photo')->resize(null, 300),
```

_Note: this method uses [Intervention Image `resize()`](https://image.intervention.io/v2/api/resize) with the upsize and aspect ratio constraints._

### `autoOrientate()`

Specify if the underlying image should be orientated. It will rotate the image to the orientation specified in Exif data, if any.

This can be mandatory in some cases for the cropper to work properly.

```php
AdvancedImage::make('Photo')->autoOrientate(),
```

_Note: PHP must be compiled in with `--enable-exif` to use this method. Windows users must also have the mbstring extension enabled. See [the Intervention Image documentation](https://image.intervention.io/v2/api/orientate) for more details._

### `quality(int $quality)`

Specify the resulting quality of the transformed image.

This only applies to JPG format as PNG compression is lossless. The value must range from 0 (poor quality, small file) to 100 (best quality, big file).

```php
AdvancedImage::make('Photo')->resize(600, 400)->quality(95),
```

_Note: the quality will be passed to the [Intervention Image `save()`](https://image.intervention.io/v2/api/save) method._

### `convert(string $format)`

Specify the desired output format.

```php
AdvancedImage::make('Photo')->convert('webp'),
```

_Note: See [Intervention Image `encode()`](https://image.intervention.io/v2/api/encode) for more details, including the list of allowed formats._