Phoca Extensions
Free extensions for Joomla! CMS

Guide to resize thumbnails

Category: Phoca Gallery Component
 
Since version 2.6.0 you need not to create background image manually in image editor, see: http://www.phoca.cz/documents/2-phoca-gallery-component/317-styling-background-image
 

This guide explains step by step what you have to do when you want to resize your thumbnails. In the example the small thumbnail is going to be resized from 50x50px to 75x75px and the medium thumbnail from 100x100px to 150x150px.

  1. Delete all the 'thumbs' folders on the server in images/phocagallery/[folder]/ 
     
  2. Set the new sizes in the global settings = Components » Phocagallery » Control Panel (Gallery v1.8.8) » [parameters] button.
    small image is displayed in category list layout (categories view)
    medium image is displayed in category layout (category view)
    large image is displayed when you click on the medium image
     
  3. Create new shadows for the small and medium images.
    Phoca Gallery has 3 shadows:
    shadow(100x100) is used in category layout by default (shadow1 in versions prior to 2.1.0)
    shadow(200x200) is not used by default (shadow2 in versions prior to 2.1.0)
    shadow(50x50) is used in category list layout by default (shadow3 in versions prior to 2.1.0)

    In this case we have to create new shadow images. Look in your icon settings (global settings) whether you need to create .gif or .png files.
    The shadow is a white square with a border and a shadow (for the default template). The size of the white square is: image height + 6px x image width + 6px. The surrounding border is 1 px with the html color: #CCCCCC. The shadow is 5 px with an 120 degrees angle. The total shadowfile for the small image is sized 93x93px and for the medium image 168x168px. Name the shadow 'shadow3.gif or .png' for the small thumbs and 'shadow2' for the medium thumbs.

    Phoca Gallery - Background Shadow Image

    Upload the shadowfiles to your server in the folder components/phocagallery/assets/images 
     
  4. Set the right shadow in the global settings.
    Category display settings: in the setting 'Image background shadow' choose shadow(200x200) (shadow2 in v2.0.2 or before)
    Set 'Enable Thumbnails Creation' to yes. Then save the parameters and go to the Images tab. (Gallery in v1.8.8). The new thumbnails are already created when the setting was on, or it is now and if not: refresh the gallery page.
     
  5. Go and enjoy your website
     
  6. Only for versions prior to v2.1.0:
    Change setting in created menu items
    Go to Menu » Main Menu (e.g.) » Phoca Gallery Categories (e.g.) » Parameters-Component. Set the new sizes of the thumbnails in each Phoca Gallery menu item.
    (In v2.1.0 those parameters should be empty - then settings from global are taken)
    When you create a new Menu item, remember to change the thumbnails sizes in Parameters-Component, because the menu item takes the default sizes (50x50px and 100x100px)

 

 

 

Phoca Forum - Latest Topics