Custom Thumb Cropping

Created by PIXELONETRY LLC, Modified on Thu, 12 Dec, 2024 at 6:01 PM by PIXELONETRY LLC


The Elina theme contains a custom thumbnail cropping feature. This feature is most useful if you want to control how your large images are cropped when they are for example shown in your portfolio grid. With this feature you can control exactly how the thumbnails are created from your larger images.

To use this feature go to: Media > Library in the main WordPress menu. Now select any image from the library, an image used in your projects would be most suitable. On the main attachment page, scroll down until you see the dialog box entitled: "Thumbnails". To define a custom crop for a thumbnail, do the following:


  1. This dialog will contain all of the thumbnail version of this attachment which have been auto-generated by the theme for use in those areas you have inserted this image. If this image features in many areas of the theme, or has done at some stage, but was replaced, this dialog may contain numerous thumbnails.
  2. Find the thumbnail which corresponds with the size of the thumbnail in your portfolio page (which you wish to re-crop). You may need to check the size of that image in your portfolio grid page. You can do this with an element inspector which is built into most modern browsers. Use it by right clicking once you are hovering the image, then select "Inspect Element" from the context menu. Now you should be able to find the image size in the panels which appear.
  3. Once you have found the thumb you are looking for, click it in the dialog. This will open the thumb cropping control, hiding all other thumbs in the process.
  4. With your mouse you can now resize and reposition the cropping frame in the window on the left. Once the position has changed you will see a preview of the resulting thumbnail in the window on the right.
  5. When you have found a suitable crop for this thumbnail, click the "Save" button. The crop control will close and the other thumbs will reappear.
  6. Now refresh your portfolio grid page to view the updated thumbnail. Remember to clear your browser cache, otherwise the updated thumbnail may not appear.
Once thumb cropping has been altered, the browser cache should be cleared before viewing the page which contains the updated thumbnail.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article