NorrCompetition | NorrNext Documentation
DocumentationNorrCompetition
  • 🚀Getting started
    • Technical Requirements
    • Installation and Updates
  • 🛠️Configuration
    • Component Options
    • General
    • Contests
    • Contest
    • Entries
    • Entry
    • Categories
    • Category
    • Images
    • Comments
    • Contest Form
    • Permissions
  • 🖼️Contests
    • Managing Contests
    • Creating Contest
    • Contest Layout Options
    • Closing Contest
  • 🏆Entries
    • Managing Entries
    • Adding Entry
    • Approving Entry
    • Entry Data Comparison
    • Entry Layout Options
    • Submitting Entry Form
    • Contestant's Profile
    • Votes Log
  • 📂Categories
    • General Information
    • Managing Categories
    • Creating Category
    • Category Layout Options
  • 🧩Fields
    • General Information
    • Managing Fields
    • Field Types
    • Creating Field
  • 🔋Modules
    • NorrCompetition Entries
    • NorrCompetition Contests
    • NorrCompetition Grid
  • 🔌Plugins
    • NorrCompetition Notifications
    • NorrCompetition Smart Search
    • NorrCompetition Search
    • NorrCompetition Sitemap
    • NorrCompetition Profile Link
    • Application for EasySocial
    • NorrCompetition Application for JomSocial
    • AUP plugin for NorrCompetition
    • NorrCompetition Image Moderation
      • Sightengine Setup
      • Plugin Configuration
  • 💬Comments
    • Integration with Facebook
    • Integration with JComments
    • Integration with Komento
    • Integration with Disqus
    • Integration with VK.com
  • ☁️Remote Storage
    • General Information
    • AWS S3
  • 🖥️Customisation
    • Template Overriding
    • Using content plugins on entry page
    • Link to contestant
    • Events
      • Content
      • Contest
      • Entry
      • Entry Form
      • Field
      • Vote
      • Other
  • ✍️Localisation
    • Language pack installation
    • How to take a part in NorrCompetition localisation
  • 📜Best Practices
    • Recommendations on image sizes
    • Use on multilingual sites
    • Tutorial: How to Create Photo/Video Voting Contest on Joomla
    • Tutorial: Monetize Voting Contests via Membership
    • Tutorial: Monetize Voting Contests via Points
    • Embedding HTML snippets on example of music contest
  • 💡FAQ
    • How the protection from unfair voting is implemented?
    • What notifications does the component send?
    • Create and edit contests on front-end
    • Submitting Entries by Unregistered Users
    • How to install sample data
    • How to change the order of tabs with comments
    • Using navigation module (breadcrumbs)
    • NorrCompetition and YOOtheme Pro
  • 🔍Troubleshooting
    • I do not get notifications from NorrCompetition
    • I get an error or white screen on photo upload
    • No images appear after submitting entries
    • Submit button is not working
  • User is not able to vote. Errors in the console
Powered by GitBook
On this page
  • Image settings
  • Recommendations on creation of watermark
  1. Best Practices

Recommendations on image sizes

PreviousHow to take a part in NorrCompetition localisationNextUse on multilingual sites

Last updated 2 years ago

You can setup the sizes for the following types of images:

  • Small image – this image is used for the list of comtest entries;

  • Medium image – this image is used for entry page;

  • Big image – this image is used for image display in the lightbox;

  • Preview image - this image is used for crop mode. It should be not less than small image size. We recommend you to set it as medium image size.

Setting up different sizes you can achieve the optimal result for your website design.

You can apply own sizes for each contest. Take a look how it is organised on - different sizes are used in all 3 contests.

Image settings

We recommend to read the document , that describes how to setup image settings.

Crop mode ratio

First of all you should decide on ratio. Small Image Ratio parameter is responsible for the crop area that is displayed on the preview image. The cropped image will be resized according to the small image sizes.

This parameter has the following options: 1:1, 2:3, 4:3 and 16:9. By default it is 4:3. Select the desired one and check is it suitable for you or not.

Image sizes

In most cases users will upload the same images that they got from the photographer or have moved from the digital camera.

Considering that the lightbox effect has a responsive mode, we recommend to set sizes for big image that will look good on wide screens.

Here is the example of big image on the wide screen:

In general for medium and big images we recommend to set sizes according to the concept of your website. For example, if it is design projects or CD images then the size of source images could be be the same.

In other cases you should set sizes considering that users can upload landscape and portrait orientation images, so we recommend not to set strict ratios for medium and big images. In this case medium image size could be both in landscape and portrait orientation on the entry page. The same applies to big image.

Take a look on this example:

  • Left image: 1200x800 px

  • Right image: 683x1024 px

In this example we have two images with different ratios. If we setup in settings the same size of one of this images (for example, landscape orientation), then image with the potrait orientation will have too small height in the lightbox.

That is why we recommend to set the maximum size for width and height. In our example that would be 1200x1024.

But for the small image you should set the strict sizes. As a result image with landscape format normally fits into the portrait ratio of small image:

The parameters of small image are important because are used for conception of the website design as you can manually set the output parameters on the contest page; for example, the number of entries per row and the number of rows. That is why the size of small image plays an important role.

Recommendations on creation of watermark

When you want to have a watermark on the uploaded images you should enable it in the image settings. But before that you should create a watermark image. This could be a website name (domain name), trademark or logo.

You should take into account that photos can have completely different colour mixes and watermark should be done universal and good readable.

For that during watermark image creation you can try to use white colour for logo / trademark and a stroke for text titles.

In some cases you may not use transparency, for example if it is a colour trademark that inside the square.

We recommend you to do some testing and choose the optimal watermark before a contest will start and users will start to upload their photos.

Big image view on the wide display
Two different orientations: landscape and portrait
Creation of small image after entry photo upload
📜
the demo website
Images
Creation of small image after entry photo upload
Big image view on the wide display
Orientation examples