New Elgg Cover Photo Plugin ͡° ͜ʖ ͡°

When people visit Elgg Sites, most of the visitors will start viewing the site page from the top of the page then scroll to the bottom of the site and in most cases, the first contents on any website normally covers the top quarter of the Profile Page or Company Page.  For example, Facebook page and many popular social networks' top page covers a quarter of the user's desktops. Also,  the same applies to most hand-held devices like Tablets, Smartphones, Mobiles and many more small devices. By now I think I have given you enough hints what this discussion is all about - Cover Photo!

Cover Photo is important!  Eight out of ten online users are now favoring Cover Photo in addition to their Avatars or profile icons on their profile or company page!

Why is Elgg Cover Photo plugin important or crucial? At the moment, Photos are most effective way to engage online users and through photos, users can reach the most people within the same site or network... How? Photos can create curiosity, inspire, stimulate, motivate, encourage, influence, rouse, move, stir, energize, galvanize, incite and even challenge viewers ...  And for these reasons, most users will like to use cover photo on their page or profile. However, most online users do not have time to design cover photos  or most users will never even bother to download photo editing software like Photoshop to edit, crop, and resize their cover photo before uploading the image or photo to elgg sites.  Hence, most users will normally have a tendency of clicking upload button, then select an image from their computers or mobile phones folders and hope that elgg software will upload their file properly by using (GD or Image-magic library) to resize or crop the cover photo. In most cases, the user’s cover photo ends up looking weird or butchered after cover photo is uploaded to the site.

Even for most  advanced elgg users who are creating business page or personal profile, it is a nightmare or frustrating to spend a lot of time designing  a cover photo for a business page or personal profile page only to realize that the uploaded cover photo or image on elgg site that they have put a lot of their thoughts and time does not look the same or even close to the original image on their storage devices.

According to my own quote from somewhere in my favorite unpublished book, "The hardest thing to do with online users is to change their browsing behaviors." If you have doubt on this observation, here is the reason why. Most of the online users are used to swimming, walking, driving, cycling or cruising on Facebook streets, Google Streets, Twitter Streets, Snap-chart Streets, Instagram Streets and many more online streets. No wander today Facebook is copying snap-chart App by using a copycat app called Bolt to copy, imitate and mimic Snap-Chart App features. Why? Young Teenagers are glued to snap-chat app and Snap-chart Company has refused to be bought by Facebook. So, if you want some of these same users who normally will not need large fonts or font resize button or magnifying glasses to use or spend time on your site -- you might need some features on your site that they like on other sites. But where do most Young Teenagers get free time to browse sites - they don't want to stay out of their parents' basements or houses and therefore have little to worry about paying bills.

Online browsing is like a journey and through online user’s behavior we find what works and what doesn't work. Almost all online users tend to have a few things in common like :-  Seeing, Looking, Glancing, Gazing, Staring at photos or images online. To be more specific, most users like viewing online profile cover photos, Avatars icons, photo albums, cats and dogs images on profile pages or company pages. So, adding a cover photo upload option for your site users on Elgg sites can not be a bad idea.

If you are not convinced by now that elgg needs a nice Cover photo plugin then continue reading…

If you’re thinking that a cover photo idea is a big joke, watch out for the power of Cover photo! On 2012, Facebook Pages were turned into the timeline layout pages with the cover photo.

By choosing the right  images for devices, the Elgg based sites will have an advantage to its users. Also, the right image size for a device's screen will take up less bytes in the server and likewise on the user's device memory, and thus  images will be loaded or transferred faster to the browser.

There are now more online users on earth that have access to a mobile phones than previous years or generations and so are apps, mobile web, and even more Smartphone’s exciting features being developed every single minute by software developers from all over the world. In addition, most of the Cover Photos images viewed from popular social networks are blocked out because popular sites like Facebook most of the time will try to use the same picture for all mobile phones images that they are serving to the user through CSS resize or on the fly image resize scripts.

While I was developing a mobile, Smartphone and desktops theme, I faced some few issues with mobile and Smartphone devices when i tried using the Elgg default icon size configuration to resize the cover photos for elgg users. I tried to use the elgg default icon setting and elgg File classes and ended up with inconsistent Cover photos.  While testing the default elgg GD and ImageMaic functions, I noticed that most of the rectangular cover photo  I uploaded  were inconsistent or failed to resize properly.  So I started thinking about writing a plugin for elgg rectangular cover photo to see how elgg would handle the uploaded images by users while using a GD Image library to process and resize cover photos.

So, a few weeks ago, I started developing a plugin to solve this problem so that small devices and desktops plugin developers who might want to incorporate Elgg Cover photos in their theme development can have peace of mind.

The Elgg Cover Photo plugin is now working but, at this moment I am testing the plugin to clean some few bugs.

To cut long story short, Elgg Cover Photo will enable elgg users and theme developers to:-

  • Elgg users can create a good-looking cover photo for their business page or personal profile page
  • Elgg Cover Photo resizes a single image into six different configure sizes during image upload time so that no need to resize the image through CSS while serving mobile or desktops - hence, page loads faster and  for responsive images sites will even show the image better.
  • The Elgg Cover Photo serves rectangular composition icons or images with exact height and width dimensions that is set by the elgg site administrator .
  • Most of the users will not need to take a lot of their time to design their elgg Cover photos images.
  • The Elgg Cover Photo uploaded by user on elgg site will be exact or look alike but resized into several sizes and shapes on desktop, mobile, and smartphones with very little distortion.

Detailed measurements: The Image or photo a user uploads is resized into six different images and here are the default sizes

  • Official Elgg topbar image dimension:  320pixels wide by 180 pixels tall--Smartphone image
  • Official Elgg tiny image dimension:  320 pixels wide by 95 pixels tall – Mobile image
  • Official Elgg small image dimension:  900 pixels wide by 200 pixels tall
  • Offical Elgg medium cover photo sizes: 600 pixels wide by 200 pixels tall
  • Official Elgg Large cover photo size: 851 pixels wide by 315 pixels tall - You probably guessed it by now ... it's the official  Facebook Cover Photo size!
  • Official Elgg master image dimension:  990 pixels wide by 288 pixels tall

Note: the above measurements can be changed to desired rectangular cover photos by elgg administrator without any headache.

Oh!  When it comes to bandwidth, shared hosting account Elgg cover photo usage and many more features for the Elgg cover photo plugin, I will leave such matters for future discussions.

Share your thoughts if you think that Elgg Cover Photo plugin is something you might need.

  • nice idea @tom i am waiting for your plugin .. what type of bugs you faced ?

  • @ sathishkumar , There are a few bugs that I was checking for especially when a user's profile is banned by an admin the cover photo should change to an elgg banned user default icon. The plugin seams to work well for admin and non admin. Just trying to clean a few files a little.

  • @Tom, I would like a Cover Photo plugin. I had some users requesting this and I think it will be a very nice enhancement to profiles. I like the Google+ implementation more than Facebook, they have a rounded avatar/picture and an overlay with some Essential user information displayed, just a thought.

  • @Gerard, Before developing Cover Photo plugin, I was able to make a Google+ profile photo page for mobile and desktop for elgg users without problem. However, i was running into some issues while loading the cover photo on mobile devices. The cover photo on desktop was able to load ok just like Google+ profile but while using the same image on the mobile phones devices , i realized that the mobile devices were loading cover photo the whole screen of the mobile while using responsive image css. That is why i decided to resize cover photo during image upload time once just like Elgg user's avatars icons sizes so that i could just pick the size of the image i wanted to load on the mobiles and on the desktops without compressing or resizing the image by css.

  • If your image CSS was responsive then there is definately something wrong, because it should be perfectly possible to scale the image in mobile browsers to something you prefer.

    You might want to take a look how hypegallery uses it's gallery cover photo, that one show perfect on mobile browsers

  • Isn't possible to create three layers, (background cover, overlay with some transparancy and avatar on top ? Resizing would be better done based on relative sizes than fixed, like Dries suggested.

    You mentioned using Elgg Avatar icon size during upload. That is nicely done so you should be able to recreate it in any format given a fixed length and width ratio.


  • i'm clicking the deactivated like button here

  • @ Dries, Thanks for your input concerning the possibility to scale the image in mobile browsers to something I prefer. The reason why i preferred to upload user images and resize them during upload  resize the image into various cover photos dimensions with configured sizes is that, it is much easier to load the right size of cover photo for a user from the Elgg server and then serve the image to the user's device. In addition, it is easier to deal with browsers that lag behind or outdated browsers which do not support most of the modern HTML5 CSS and small devices. And for smaller devices like mobile phones, smaller images tend to take less time to load. Finally, i wanted to make my live a bit easier so that css could do minimum work to resize the Elgg user's cover photo especially for responsive sites.

    Also, If the Elgg user cover photo or image size (kb) is large, it is not a good idea to resizing the original image to a smaller size by using CSS. Here are three reasons why?

    • Poor image quality: The browsers' resizing software are designed for speed, not quality and using css to resize large images might give a lower quality of image to a viewer or user when the loaded image is compared to original image.
    • client-side performance:   If the site user's graphics performance is low,  older computers and small devices e.g mobile, resizing the image through CSS can slow down the  site.  Hence, users  will not be happier with responsive web sites that takes forever to load.
    • High bandwidth usage: if you send a large size (kb) image to a elgg user and then reduce large image using CSS image to fit small devices on browser side, your site would be sending more data that is not needed from your server.
  • @ ura soul, Thanks, I just realized that Elgg community does not have like button. Thanks though for clicking the like button LOL.

  • @tom did u hosted this plugin in github so that any of our guys can help it ..