05- Create Image field to display gallery and panorama

Last modified
Friday, 15 January 2021

Image field is one of the best powerfull field for flexicontent, you can create many rules to simplify image insertion for end-user :
- Rezizing on upload with 4 sizes (original, large, medium, small)
- Crop or rezize each thumbs
- Watermark
- Using screenset
- Checking extension
- Rebuild thumbs
- Protect image access
- Folder mode or DB mode
- Mixe image and video
- Layout output with 7 gallery script (prebuild) and you can create your own
- Choosing layout peer display device (desktop and mobile)

Now we create 2 fields, one for first image and one for gallery

  1. create a field "first image"
  2. choose image field type
  3. assign field to your type
  4. set no for multiple values option

Check display

  1. Go to viewing tab
  2.  Set to no display label option

No we will set thumbnails creation

  1. Got to thumbnails tab
  2. Set size for optimisation
  3. Set rule for size
  4. Set processing (rezize or crop)
  5. Set watermark if needed

You can do it for 3 sizes large, medium, small

This process is done on upload file in content, if you change size you need to clean images folder (only rezized file, not original)

Now we can check how field is displayed, in the layout tab you can set many option for display it in item view and category view

  1. Go to layout tab
  2. Choose the galery  style for desktop
  3. Set the size of iage regarding view
  4. In next tab you can set option display for each layout

In this case we choose fancybox gallery, its a simple modal script to open large image. we didn't need more.

Now we can do a gallery field with video integration, its realy simple

Do the same thing like above

  1. Allow multi-values
  2. Allow video insertion
  3. Choose a gallery layout like galleiffic
  4. Set option

Now user can add image and video in same field, changing order by simple drag and drop !