Login   |   Register RSS
Website Design Westminster Orange County
  • Website Design
  • Website Online
  • Website Framework
    • Information Framework
    • E-Commerce Framework
  • Pricing
  • Contact
    • About us
    • Tutorials
Việt Ngữ English
Contact | Tutorials 
N_22 To Setup Default Sizes For Images

(View PDF file)

You’ve already known that you don’t need to prepare your pictures to a specific size before uploading it to the website. The Control Panel has a built-in function to resize your picture to the predetermined sizes. Your website already comes with some default sizes; but you can change them to suit your needs.

If you want to change these default sizes, do as follow.

1. Login the Control Panel. Go to “System Tools” on the Top Menu and select “Website Configuration” in the drop down list.


2. Then, click “Image Setting” on the left panel. You will see a page with current default sizes on the right. Regular image is the image that is displayed along with an article.


3. On the same line with “Size of Thumbnail Image”, change the default size of the thumbnail image as necessary.

4. On the same line with “Size of Regular Image”, change the default size of the regular image as necessary.

5. On the same line with “Size of Large Image”, change the default size of the large image as necessary. This large image will be displayed when a viewer clicks on the regular image in the article.

6. In the “Image Resize Rule” section, you can select one of the 4 rules to resize the image:

  • White Fill. The image will be resized until one side fits and the other side is less than fit. The unfit area will be filled with white color.
  • Resize & Crop. The image will be resized until one side fits and the other side is still larger than fit. That side will then be cropped to fit the predetermined size.
  • Distort Image. Both sides of the image are resized to fit the predetermined size. The resulting image will be distorted.
  • Resize by one side. The image is resized based on the side you want to fit. The other side may be smaller or larger than the predetermined size.

    The following table shows you how the resulting image will look like if you use one of the 4 resizing rules.

7. On the same line with “Image Quality”, you can select a different quality. If you choose a larger number, the image is better but the file size will also be larger.

    Other than setting up the default image sizes, here you can also setup the image mask function and the text size of the image caption.

8. If you want your logo to appear on all your images, you can setup to do so in the “Mask Image Setup” section.

  • Use Mask Image. Check this box if you want to use this function.
  • Mask Image File Path. Fill in the path to the mask image in the web server. You can click the “Browse” button to upload the mask image similar to the way you insert an image into an article. NOTE: You should prepare an image with a transparent background in the PNG file format.
  • Mask Image Position. Click this box and select one of the positions in the drop down list.
  • X-Y Coordinates of Mask Image. Enter the starting coordinates where the mask image will start to be drawn on the image.
9. If you want to change the color and size of the caption text, you can change the data in the “Image Caption Setup” section. NOTE: The caption text will be generated as an image and it is a part of the picture.
  • Font Face. Enter the font name you want to use for the caption text.
  • Font Size. Enter the size you want for the caption text.
  • Font Color. Fill in a hexadecimal code of the color you want for the caption text. The color code must start with a “#” sign and 6 alphanumeric characters.
10. Click the “Update” button to save the changes you’ve just made.

NOTE: We do not mention the default size for slide images in this article because you will determine the size when you are uploading them.

You’ve just learned how to setup default sizes for images in your web site.
  • Tweet
PrintSend Mail
Sort
N_01: Basic Procedure in Managing Your Webiste
N_02: To Upload a Top Banner to the Website
N_03: To Add a Category to the Webiste
N_04: To Create the Top Menu for the Webiste
N_05: To Add Category "About Us"
N_06: To Add the Contact Page to the Website
N_07: To Add an Article to the Website
N_08: To Insert a Picture into an Article
N_09: To Edit, Delete An Article
N_10: To Add a Category for Photos
N_11: To Add a Slide Show to the Website
N_12: To Edit, Delete a Category
N_13: To Add a Video Clip to the Website
N_14: To Edit While Viewing the Web Pages
N_15: To Change the Display of an Article List
N_16: To Change the Display of an Article
N_17 To Place an Advertisement on the Website
N_18 Display Types for Advertisements
N_19 How To Layout Your Homepage
N_20 To Show, Hide And Edit The Special Boxes
N_21 Search And Filter Tools In The Control Panel
N_22 To Setup Default Sizes For Images
N_23 To Insert a Video Clip Into An Article
N_24 To embed a Youtube Video in your Website
N_25 To Post a Book on Your Website
N_26 To Post a PDF book on the Website
Sort
Free Website

Privacy - Term Of Use - Stock Images
VNVN System
14902 Moran Street
Westminster, CA 92683-5538
Phone: 714.510.2968
Copyright © 2013 vnvn.com All rights reserved www.vnvn.net
Best viewed with FireFox, Chrome, Safari, Opera, IE 8 at resolution of 1024x768