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.

  • @ sathishkumar, I was hoping to upload it on github today but my schedule could not work as expected. Hope to upload it on my github account soon so that anyone who might wish to check it out can test it.

  • @ sathishkumar, The beauty of Elgg cover photo plugin is that If a user upload a large resolution image, the Elgg cover photo plugin will take the original image and reprocess it into multiple images of various sizes with very little loss of image quality or without cropping any part of the cover photo. Then, when your visitors are viewing their cover photo on the mobile phone for example a 320 pixels wide by 95 pixels tall image on Elgg site, it’s actually a 320 pixels wide by 95 pixels tall image that Elgg cover photo resized and sharpened using the user's uploaded original large image.

  • @tom nice work after uploading put the link i will check it

  • @  sathishkumar ,  Thanks for your concern. For the past few weeks, I have been busy with work and family schedule. Anyway, I will upload the Elgg cover photo plugin soon so that you can check it out. I hope it will be of great help to others.

  • For the past few months, I have been extremely busy. Thanks for the patience with my hectic schedule for those who were waiting for elgg cover photo plugin.

    Once I get off from work today, I will make it easier for community try the beta version of elgg cover photo just like Facebook's cover photo.

  • How do we change profile icon size from medium to large ? tried every thing its not working for me, could you please suggest , thanks!

  • Bumping up this question if any body knows in the community..

    How do we change profile icon size from medium to large in this plugin ? tried every thing its not working for me, could you please suggest , thanks!

  • I never tried this plugin so I don't know if it uses the profile icon in any way. As I understand the description, it does NOT alter the profile image at all but provides the option to display a second image (the cover image) on the top of the profile pages. So, there is probably no point in trying to change the size of the profile image by modifying anything in the code of this plugin. Also, the original cover photo plugin from https://elgg.org/plugins/1960721 might no longer work on any recent version of Elgg. You haven't mentioned which version of Elgg you use... An updated version would be available from https://elgg.org/plugins/2091029 (not tested myself, so no idea if it really works on Elgg 2 - but probably won't work on Elgg 3 either!).

  • @worldopensources, It has been a while since i worked on  Elgg Cover Photo plugin code. It was a good idea to help elgg developers and site owners to provide enhanced tools for Elgg sites just as I have written in the post above. I could look into the codes but at the moment I have time constrain due to work and family schedule and any improvement or modification to the original code will be appreciated.

    @iionly, Long time since we corresponded. Thank you for your help and guidance to the question regarding Elgg Cover Photo. Elgg is a powerful tool from the back-end side. The front-end (what the world sees will need some more development or design improvement)  in order to compete with WordPress design appeal and hence attract more talented developers and website owners.