Skip to content

Latest commit

 

History

History
107 lines (81 loc) · 2.22 KB

readme.md

File metadata and controls

107 lines (81 loc) · 2.22 KB
Raw

Unstable for the moment, no guarantee of compatibility between the updates.

Presentation

A plugin to generate different image sizes and return them in a <picture> tag with different breakpoints and screen resolution. The plugin checks the existence of an image size, if it does not exist, generates it and saves it.

Features

  • Keypoint resize keypoint
  • On the fly resize
  • Webp
  • Retina
  • Responsive picture tag
  • …

Requirement

  • PHP 7
  • Imagick
  • WordPress > 4.9

Getting started

1. Install plugin

  • Download zip file of this repo
  • Unzip file in wp-content/plugins/
  • Go to wp-content/plugins/pictifly on terminal
  • type composer install

2. Register image sizes

Pictifly use two type of image size :

  • simple : Only one size, same for all breakpoints. With 2x retina support
  • responsive : Size for multiple breakpoints support retina

Example

// register a responsive size
$args = [
   'ratio' => [350, 190],
   'breakpoints' => [
       'xs' => 350,
       'md' => 650,
   ]
];
$attach = [
  'post_type' => ['recipe'],
];
pf_register('recipe', $args, $attach);


// register a simple size
$attach = [
    'post_type' => ['recipe']
];
pf_register_simple('recipe-simple', 100, 100, true, $attach);

2. usage in template

// get picture tag
$image = pf_img($image_id, 'recipe-simple', false);
// display picture tag
pf_img($image_id, 'recipe-simple', true);

// get only url (Work only with simple size)
$url = pf_simple_url($image_id, 'recipe-simple');

3. Set breakpoints

add_filter('pf_configs', 'pf_configs_filters');
function pf_configs_filters($default){
  $default['breakpoints']=array(
    'xs'  => 0,
    'sm'  => 180,
    'md'  => 640,
    'lg'  => 1024,
    'xl'  => 1200,
    'xxl' => 1440
  );
  return $default;
}

Next Step

View full doc here (in french)