New Profile Photo And Logo Upload Functionality

We are excited to announce a big update that will change how images are handled by the system. The first update is for Profile Photos and Logos, but we will be rolling out this same functionality to photos in member feature posts and all other places images are uploaded to your website in the near future. 


Please note that this is currently in BETA, and if you would like to participate in our BETA launch, please submit a ticket here:  http://bootstrap.brilliantdirectories.com/support/tickets/new


This is a free update for all Brilliant Directories users. 



What Is Addressed With This Update?

Images being saved in a temporary folder to be processed by the system - all images will be processed on the fly before being uploaded, saving valuable storage space for your website.Standardizing and optimizing the size of images uploaded to the system - this will allow pages to load more quickly and will reduce the amount of bandwidth used by each page load.Optimizing for social media sharing - every profile page will have a primary image (profile photo or logo) that is sized properly for social media sharing by default.


How Are Images Going To Be Handled In The Future?


Prior to this update, the entire image that is uploaded would be saved in a temporary folder before it was cropped and resized at better resolutions for display on the website. In some cases, large image files were also used to display at a much smaller size on the live website. With this update, images are only saved at optimized sizes for the different areas they display throughout the site, and they are all processed on the fly, without being saved in a temporary folder first.  This reduces both overall bandwidth and storage use for your site, and results in faster performance when loading a page. 



Social Media Sharing


When uploading a profile photo or logo, two copies of the image will be saved: one that is optimized for display on your website, and one that is optimized for social media sharing. Currently, Facebook and many other popular social media sites require images to be at least 200px x 200px to be shared on their platform.  One copy of the image will be saved to be at least this size, and another will be saved that is optimized for displaying on your website.



Where Can I Access The New Image Settings?


If you've requested the BETA installation, you can access your new image settings by going to ADMIN >> SETTINGS >> IMAGE SETTINGS:



You are now able to create the image settings for the following:

Profile Photo for Website
Profile Photo for Social Media Sharing
Logo for Website 
Logo for Social Media Sharing



Please note that editing the Profile Photo or Logo is done by editing them as a group.



Ratio


The "Ratio" refers to the Aspect Ratio of the image, which is how large the height of an image will be relative to the width of the image and vice-versa.  


For example, a 1:1 aspect ratio means it will be a square - for every 1 pixel of width, the image will have 1 pixel of height.  As another example, the Aspect Ratio of an HD television is 16:9 (a rectangle that is wider than it is tall), meaning the image on the television will have 16 pixels of width for every 9 pixels of height.  


A "Free" aspect ratio means there is no set aspect ratio at all, meaning the image can be any shape.


For more information about Aspect Ratios, please see the Wikipedia article on the topic.



Width


The width of the image in pixels.



Height


The height of the image in pixels.



Profile Logo Settings


Here are some things to know regarding editing Profile Logo:

The ratio of the Profile Logo will always be "FREE" so members are not forced to upload a logo that is a certain shape - it can be square, wider than it is tall, or taller than it is wide. 

Since the ratio is always "Free", the "Width" and "Height" numbers serve as limits for the maximum width and height of the image.  For example, if both the Width and height are set to 150px, and a member uploads an image that is 1500px wide x 750px tall, the final image will be resized to be 150px wide x 75px tall, maintaining the same aspect ratio of the original image, but downsized to be no more than 150px x 150px limit.

There is a preview area that allows you to see what it will look like on your website or via social media sharing:



If you attempt to set the "Profile Logo Social Media" dimensions to be less than the required 200px x 200px, an error message will appear:



Profile Photo Settings


The Profile Photo Settings work very similarly to the Profile Logo Settings, with the one difference being that it is possible to set a specific Aspect Ratio for Profile Photos. We always recommend NOT using the "Free" ratio for Profile Photos so that these images uploaded by members will be uniform wherever they are displayed on your website . Whichever ratio you select for your Profile Photo will automatically be used for the Social Media sharing setting as well: 




How To Upload Logo Images As A Member


Login as member and go to "Profile Photo" Tab

Click on "Upload Logo":




Select an image to upload

Click on Upload Image. If the logo is not large enough the member will receive the following message, warning them that the current image is smaller than 200px x 200px and will have to be stretched in order to meet the minimum size requirements for sharing on social media websites:




How To Upload Logo Images As A Member


When uploading the profile photo, they will follow the same process as uploading a Profile Logo.  However, your members will be required to use the built-in cropping tool which will ensure that the final image uses the ration specified in the Profile Photo Settings:




The crop box will turn red the moment that your member tries to crop the image in a size that will create an image that will be less than the 200px x 200px size required for social media sharing:



The following warning message will show should they wish to force the crop regardless:


 

 

It is now possible to revert, rotate, and so forth while cropping profile photo images using the tools below the image:





Looks great! One question: Will setting the dimensions, say to a square ratio, force the crop selection tool to reflect that? I've been on a quest and finally got my user avatars displaying in a circle. But those with uneven ratios stretch in the circle. I'm trying to avoid that. Will this resolve that? Will CSS revisions still be applicable?

1 person likes this

I requested to have the beta added to my site, but its been nearly a month. Any update on this?

And, since this only updates the photo uploader for the Profile Pic / Logo, is there any estimate on when it would replace the other photo uploaders?


Since the other uploaders are the ones that use Flash, and therefore do not work on any iOS device, they are actually more critical to my users...


Thanks,

Atg

This has been a wonderful update for keeping Profile default images all the same size as the resizer tool is great. Is there a reason the logo upload doesn't have the same tool? I'd like the same uploader function but with the different constraint dimension sized (as set in the backend parameters)

Screen%20Shot%202016-11-08%20at%203.40.22%20PM.png

Screen%20Shot%202016-11-08%20at%203.39.32%20PM.png


 

Steve, I love the new profile image editor and presets too. I agree with the notion on having the same for the logo. If you don't mind, may I ask how you got the editor design looking so clean? Are the color variables for this in a form or buttons setting in the site admin? Thanks.
Hi Johnny,

What do you mean? Are you referring to the green colors? Those are directly connected with the settings in the Design Settings>Default Button Link

Screen%20Shot%202016-11-08%20at%204.27.39%20PM.png



If not that, could you please explain more.

 

Login or Signup to post a comment