Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pixel-open/prestashop-image-optimizer
Image optimizer module is an easy way to resize and compress images on the fly.
https://github.com/pixel-open/prestashop-image-optimizer
image prestashop prestashop-module quality seo webperf
Last synced: 3 months ago
JSON representation
Image optimizer module is an easy way to resize and compress images on the fly.
- Host: GitHub
- URL: https://github.com/pixel-open/prestashop-image-optimizer
- Owner: Pixel-Open
- License: mit
- Created: 2023-09-15T12:17:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-20T13:37:20.000Z (over 1 year ago)
- Last Synced: 2024-10-10T00:41:00.602Z (3 months ago)
- Topics: image, prestashop, prestashop-module, quality, seo, webperf
- Language: PHP
- Homepage: https://pixel-open.org/projects/responsive-optimized-images-on-prestashop
- Size: 24.4 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Prestashop Image Optimizer
[](https://php.net/)
[](https://www.prestashop.com)
[](https://github.com/Pixel-Open/prestashop-image-optimizer/releases)
## Presentation
Image optimizer module is an easy way to resize and compress images on the fly. Use responsive images with size alternatives.
## Requirements
- Prestashop >= 1.7.6.0
- PHP >= 7.2.0
## Installation
Download the **pixel_image_optimizer.zip** file from the [last release](https://github.com/Pixel-Open/prestashop-image-optimizer/releases/latest) assets.
### Admin
Go to the admin module catalog section and click **Upload a module**. Select the downloaded zip file.
### Manually
Move the downloaded file in the Prestashop **modules** directory and unzip the archive. Go to the admin module catalog section and search for "Image Optimizer".
## Widget
```html
{widget name='pixel_image_optimizer'}
```
### Options
#### The image to optimize
- **id_image**: the prestashop image id (ex: 1)
```smarty
{widget name='pixel_image_optimizer' id_image=1}
```
- **image_path**: the image path (ex: img/cms/image.jpg)
```smarty
{widget name='pixel_image_optimizer' image_path='img/cms/image.jpg'}
```
#### Optimizer options
- **alt**: alternative text (optional)
- **class**: img element class name (optional)
- **image_name**: image name (optional, keep the same image name if empty)
- **quality**: image quality from 0 to 100 (optional, used only for jpg and webp)
- **width**: maximum width (optional)
- **height**: maximum height (optional)
- **ext**: convert image to jpg, png, gif or webp (optional)
- **breakpoints**: Alternative widths of responsive images in px (e.g. "500,800,1200") (optional)
- **template**: custom template file
### Examples
#### Product image
```smarty
{foreach $product.images as $image}
{widget name='pixel_image_optimizer'
id_image=$image.id_image
image_name=$product.name
alt=$image.legend
class="product-image"
quality=80
width=750
}
{/foreach}
```
Result:
```html
```
#### Simple image
```smarty
{widget name='pixel_image_optimizer'
image_path='img/cms/image.jpg'
quality=90
height=600
}
```
Result:
```html
```
#### Responsive image
```smarty
{widget name='pixel_image_optimizer'
image_path='img/cms/image.jpg'
quality=90
width=1200
breakpoints='500,800'
}
```
Result:
```html
```
### Custom template
You can create your own template to display image.
Create a new template file in the **pixel_image_optimizer** directory for your theme:
*themes/{themeName}/modules/pixel_image_optimizer/custom.tpl*
Add the **template** option in the widget with the template path:
```smarty
{widget name='pixel_image_optimizer'
image_path='img/cms/image.jpg'
width=1200
template='module:pixel_image_optimizer/custom.tpl'
}
```