News:

Join the Facebook Fan Page.

Main Menu

Avatar Thumbnails

Started by Stanyy, April 24, 2015, 08:49:58 AM

Previous topic - Next topic

Stanyy

Quote from: Kindred on April 25, 2015, 09:36:46 PM
resizing the image height/width (for real, not by css) **WILL** reduce the file size as well. period.

It would be helpful if you actually try the things you say before saying them. Both methods actually produce the SAME result (i.e alters the display, not the file).

Quote from: Kindred on April 25, 2015, 09:36:46 PM
If the mods that br360 pointed you to do not actually change the width/height, but merely alter the displayed height/width, then - obviously - the file size will not change...
The mods br360 suggested does not use css. He has the mod installed on his forum which I have used for illustration in my previous post.

Just to make sure we are on the same page, these are the two methods I think you're referring to:

CSS resize:
<img src="image.png" style="width:100px;height:50px;" />

'Real' resize:
<img src="image.png" width="100" height="50" />

They are both loading the original filesize. Same thing.

Suki

There is A LOT of misunderstandings here...

Anyway, Stanyy the two process you are referring to, "'Real' resize" and "CSS resize" are the same, those are typically called "client side resizing" and can be done with HTML, CSS or JavaScript.

What you want (and Kindred refers to) is typically called "Server side resizing" and can be easily done in SMF, let me get my morning cup of coffee and will take a look at it.
Disclaimer: unless otherwise stated, all my posts are personal and does not represent any views or opinions held by Simple Machines.

Kindred

exactly what Suki said...    What you have done, in both cases is NOT ACTUALLY RESIZING THE IMAGE... it is just displaying the image in a different size.   A *FILE* change, resizing the height/width **WILL** change the file size, since the file itself is being reduced.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Xpresskonami

how I wish smf got a lot of  plugins as WordPress .... have been trying to get image slider for smf with thumbnail but never get am...
so I try to use other editing slider......with different images

demo

Suki

Disclaimer: unless otherwise stated, all my posts are personal and does not represent any views or opinions held by Simple Machines.

Stanyy

Quote from: Suki on April 26, 2015, 08:49:32 AM
There is A LOT of misunderstandings here...

Anyway, Stanyy the two process you are referring to, "'Real' resize" and "CSS resize" are the same, those are typically called "client side resizing" and can be done with HTML, CSS or JavaScript.

What you want (and Kindred refers to) is typically called "Server side resizing" and can be easily done in SMF, let me get my morning cup of coffee and will take a look at it.
Server side sounds promising. Please can you look into it and maybe set up an example displaying the original image and a compressed version of it? Thank you.

Quote from: Suki on April 27, 2015, 08:39:41 AM
???
Actually I was waiting for you to finish coffee.

Suki

That was in reference to Xpresskonami's post which seemed out of place.  I'll take a look shortly.
Disclaimer: unless otherwise stated, all my posts are personal and does not represent any views or opinions held by Simple Machines.

Kindred

one thing... you use the term "compressed version"   Which is incorrect.
You are not talking about a compressed version. You are talking about a resized version.

compression does not resize....
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Stanyy

Quote from: Kindred on April 27, 2015, 10:58:17 AM
one thing... you use the term "compressed version"   Which is incorrect.
You are not talking about a compressed version. You are talking about a resized version.

compression does not resize....

I am trying to avoid any further confusion.
Given that the subject of the discussion is producing a light weight version of an image, and given that I already know how to resize an image via css (which isn't part of the discussion), wouldn't  'compressed' be the right word to use?

I get it, the width and height of the image would be altered which would lead to a reduction in its filesize. Perhaps I should say "resize and compress" because 'resize' explicitly means altering dimensions, nothing more.

Kindred

And yet, by using the wrong terms, you are potentially ADDING to the confusion.

no.. compression on an image is very different from resizing the original image (and I am not talking about your CSS or inline image resize - I am talking about an actual resize of the image and re-saving the image file itself)

compression is something completely different.
https://www.google.com/search?q=compress+images

and has nothing at all to do with height and width.

resizing the actual image willr esult ina smaller file size... but again, has nothing at all to do with compression

Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

margarett

Just a sidenote:
If you perform the trick mentioned here
http://www.simplemachines.org/community/index.php?topic=293441.0
to move the avatars folder, thus taking it out of attachments handling, your browser will cache the image. Which means that, most of the times, nothing is actually transferred. In this case, it's even better to have just a single image and let CSS resize it ;)
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Suki

Oh yes, what Margarett surely is the correct way to go  but if you still want to resize an attachment and since I already wrote this class :P

Open your Sources/Display.php  and find:


// On some of the less-bright hosts, readfile() is disabled.  It's just a faster, more byte safe, version of what's in the if.


and above that add this:



// Do we want to resize this image?
if (isset($_REQUEST['image']) && (isset($_REQUEST['width']) || isset($_REQUEST['height'])))
{
require_once($sourcedir . '/ResizeImage.php');
$resizedObj = new ResizeImage(array(
'source' => $filename,
'width' => isset($_REQUEST['width']) && ctype_digit($_REQUEST['width']) ? $_REQUEST['width'] : null,
'height' => isset($_REQUEST['height']) && ctype_digit($_REQUEST['height']) ? $_REQUEST['height'] : null,
'fileExt' => $file_ext,
'ratio' => true
));
$resizedImg = $resizedObj->resize();

if ($resizedImg)
$filename = $resizedImg;
}



Now download the attached file and upload it to your Sources folder.  SMF does have functions for resizing an image but those are built thinking aobut saving the image on your server rather than resizing it on-the-fly.

To resize an attach image just add a width and/or height param to the url, a normal attach avatar url would be like this:

site.com/forum/index.php?action=dlattach;attach=3;type=avatar

To have it resized to 100px width then add a wifth param at the end:

site.com/forum/index.php?action=dlattach;attach=3;type=avatar;width=100

Just keep in mind that this simple class doesn't handle gif animations or png transparency and that it some cases the pageload you will save will be negligible so its always better to follow up  Margarett's advice.

Disclaimer: unless otherwise stated, all my posts are personal and does not represent any views or opinions held by Simple Machines.

Stanyy

Quote from: Suki on April 27, 2015, 01:24:08 PM
Oh yes, what Margarett surely is the correct way to go  but if you still want to resize an attachment and since I already wrote this class :P


Looks good.

Honestly I have been trying to get this to work. Don't know where to add the width parameter to the url like you have described. The avatars have been resized with html. Here is how it is in my Display.template.php

<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', str_replace('class="avatar"', 'class="avatar" width="50" height="50"', $message['member']['avatar']['image']), '
</a>';

Suki

Replace that code with this one:


<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
<img class="avatar" src="', $message['member']['avatar']['url']), ';width=100" />
</a>';


Just keep in mind that this will only work for avatars stored as attachments, external avatars will not be affected by this.
Disclaimer: unless otherwise stated, all my posts are personal and does not represent any views or opinions held by Simple Machines.

Stanyy

Quote from: Suki on May 04, 2015, 02:53:07 PM
Replace that code with this one:


<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
<img class="avatar" src="', $message['member']['avatar']['url']), ';width=100" />
</a>';


Just keep in mind that this will only work for avatars stored as attachments, external avatars will not be affected by this.

Code replaced.
Now I get a complete blank page when i view topics.

Suki

Use this instead:

<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
<img class="avatar" src="', $message['member']['avatar']['href'], ';width=100" />
</a>';
Disclaimer: unless otherwise stated, all my posts are personal and does not represent any views or opinions held by Simple Machines.

Advertisement: