1. Control Images Size is easy

Control Images Size is easy

  |   4
Resize images automatically

We have seen a lot of people asking how to resize image within Short and fullstory in Datalife Engine, the best trick is to use CSS to control them by adding css style within the short/fullstory area, however, there are a lot of people still not know where to start to add those css styles, so in this tutorial I will show you the very simple way to do that with both CSS ways and using javascript for those who don't want to deal with CSS.

Please note that if you already have some image styles in your css, this method may not work properly due to CSS rules which already specified, in that case you must find your css style which already existing in your content of css area...!

Using CSS styles to control images in both shortstory and fullstory


This method is most recommended because it's easy to control the size in different area of your site contents, this tutorial will primary control the specific area of short and fullstory only, to start with this way, you should find the css class which wrapping your content, for example I will make example of this tutorial on "Default" theme of any version of DLE, in "Default theme files "shortstory.tpl" and "fullstory.tpl" are looking like this:
<div class="maincont">
{short-story}
<div class="maincont">
{full-story}
so both files are using the same class as "maincont", however, both files have top level of CSS class to control both files, in shortstory.tpl on top level using
<div class="base shortstory">
in fullstory.tpl on top level using
<div class="base fullstory">
This is good thing if you want to set shortstory and fullstory for different sizes of images like you want shortstory to have smaller than fullstory and want fullstory to get full sizes (bigger size per say)

1) Case Scenario #1, if you want both shortstory and fullstory to use the same size of images, you can do that by simply open /style/styles.css and find:
Information!You must register before you can view this text. Please register or Login
Add the size you want to specify the max size, for example:
Information!You must register before you can view this text. Please register or Login
The tag max-width and max-height are the maximum size of images, if the size bigger than 300px on both width and height, it will automatically resize back to 300px either way, you can also change to different size of max number value you want, if anyone don't have the class .maincont img you can simply add it in your css file, if you are using different themes than Default theme, then find out which class you are using in both files and add that class name follow by img for example theme "WStarter" is using class
<div class="c_module">
so what you need is add css class as
Information!You must register before you can view this text. Please register or Login
so check your theme for class it's using...

2) Case Scenario #2 if you want separate size of images in both shortstory and fullstory, then add the following class in css
Information!You must register before you can view this text. Please register or Login
Now you will have shortstory to use max size of 300px and fullstory to have 500px max size...

Using javascript to control images


This method is very easy and simple by add the following javascript code in your-theme/main.tpl before </head>
Information!You must register before you can view this text. Please register or Login
Note that, there are 3 area that contain the number, you need to adjust, all 3 of them are 500, the js script is set to max = 500, the first one is if image wider than 500px then it will resized back to 500px (second one), and height*500 is the same as width if image higher than 500px it will resized back to height of 500px...so you have to change all 3 areas if you want to set in different number, the value must be absolute number without px or % at the end...like 300 or 400 or 450 etc.

- Tip #1: this javascript will not need any css like method #1 so you need to pick one not both.
- Tip #2: the javascript will apply to all images within your website regardless of where you add images, it will apply to all of them, if you have banners and some other images then use CSS instead of javascript
- Tip #3: if you want to use javascript to control the different size in both short and fullstory, then please use aviable/not-aviable tags, for example:
Information!You must register before you can view this text. Please register or Login

Please note that, this tutorial has nothing to do with upload images and add images via URL, this option can be set in DLE Admin CP > System Settings > Image Settings tab
- Auto resize large images: This option is to allow script to resize all images that you and your members upload to your website, if image bigger than size you specified, then the images will be resized and it will create thumb image and then automatically add highslide for popup windows to see original size of image

- Max size of (external) linked images: This option is to set the max size of image when you and your members add image from external websites like image host servers etc, if image bigger than size you specified, then the images will be resized and it will create thumb image and then automatically add highslide for popup windows to see original size of image

But the css and javascript will not control this part of script but it will control images which already added or uploaded to display the size you want, so they are completely difference...

So I hope this tutorial will help many people who are trying to accomplish the solutions for your websites to control posted images...

If you have any questions and have any problems, please post your comments or you can use forum for supports regarding this matter...
Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.

Details

+25

Comments 4

thamn20
thamn20
Members
Commented By thamn20 on May 28, 2013 (8:57 pm)
im using your "Using javascript to control images" but it only resize the image of the first post in my main page, can you check this?
N/A 2Forum topics : 0Forum replies : 0Forum likes : 0
noobos
noobos
DLE TEAM
Commented By noobos on May 28, 2013 (10:09 pm)
I have checked it and it's working fine for me, unless you have other js or jquery to get conflict...what's your website?
16 302Forum topics : 12Forum replies : 1036Forum likes : 170
thamn20
thamn20
Members
Commented By thamn20 on June 5, 2013 (2:42 am)
hi noobos,
can you check my website (rlsfile.net) ?
thanks
N/A 2Forum topics : 0Forum replies : 0Forum likes : 0
spamhater
spamhater
DLE TEAM
Commented By spamhater on June 5, 2013 (11:04 pm)
thamn20
First you have to fix your html code because messed up your site and layout, the image and code should work fine after you fixed the html error...
24 386Forum topics : 12Forum replies : 950Forum likes : 130

Love is a symbol of eternity. It wipes out all sense of time, destroying all memory of a beginning and all fear of an end!
Great achievement is usually born of great sacrifice, and is never the result of selfishness...Without continual growth and progress, such words as improvement, achievement, and success have no meaning.
Information!Would you like to leave your comment? Please Login to your account to leave comments. Don't have an account? You can create a free account now.
DLEStarter Notice!Please note...Every hack and every module will get additional queries from your database and some hacks and some modules may result your server overload, so install only what you "need", remove any hacks and modules from your script when you don't need them, all hacks and modules appears in this website are not guaranteed by DLEStarter Team for your script security and compatibility, please read instruction carefully and use hacks and modules at your own risk...Thank you.