Update to site user avatars to use CSS3 rounding for modern browsers. Older browsers...

git-svn-id: http://code.elgg.org/elgg/trunk@5870 36083f99-b078-4883-b0ff-0f9b5a30f544

diff --git a/mod/profile/views/default/profile/css.php b/mod/profile/views/default/profile/css.php
index e36aa1184f9d3216061b5f6d16ec57d8d0f90fcb..435aa4cc36d399286e15d0d042b8bccf9b42d143 100644 (file)
--- a/mod/profile/views/default/profile/css.php
+++ b/mod/profile/views/default/profile/css.php
@@ -46,13 +46,41 @@
 .usericon {
        position:relative;
 }
-.usericon.tiny {
+.usericon.tiny,
+img.tiny {
        width:25px;
        height:25px;
-}
-.usericon.small {
+       /* remove the border-radius if you don't want rounded avatars in supported browsers */
+       -webkit-border-radius: 3px; 
+       -moz-border-radius: 3px;
+       -moz-background-clip:  border;
+       
+       -o-background-size: 25px;
+       -webkit-background-size: 25px;
+       -khtml-background-size: 25px;
+       -moz-background-size: 25px;
+}
+.usericon.small,
+img.small {
        width:40px;
        height:40px;
+       /* remove the border-radius if you don't want rounded avatars in supported browsers */
+       -webkit-border-radius: 5px; 
+       -moz-border-radius: 5px;
+       -moz-background-clip:  border;
+       
+       -o-background-size: 40px;
+       -webkit-background-size: 40px;
+       -khtml-background-size: 40px;
+       -moz-background-size: 40px;
+}
+img.large {
+       width:200px;
+       height:200px;
+}
+img.medium {
+       width:100px;
+       height:100px;
 }
 
 /* ***************************************

diff --git a/mod/profile/views/default/profile/icon.php b/mod/profile/views/default/profile/icon.php
index d5623e0c8b946d264a046a24492e16c0b8be5709..775da97ab3aba822693e8b2a607460d54f99fd59 100644 (file)
--- a/mod/profile/views/default/profile/icon.php
+++ b/mod/profile/views/default/profile/icon.php
@@ -98,8 +98,15 @@ if ($vars['entity'] instanceof ElggUser) {
                                }
                
        } 
-       
-       ?><img src="<?php echo $vars['entity']->getIcon($vars['size']); ?>" border="0" <?php echo $align; ?> alt="<?php echo htmlentities($vars['entity']->name, ENT_QUOTES, 'UTF-8'); ?>" title="<?php echo htmlentities($vars['entity']->name, ENT_QUOTES, 'UTF-8'); ?>" <?php echo $vars['js']; ?> /><?php
+
+       // Rounded avatar corners - CSS3 method - users avatar as background image so we can clip it with border-radius in supported browsers
+       ?>
+       <img src="<?php echo $vars['url']; ?>_graphics/spacer.gif" border="0" <?php echo $align; ?> alt="<?php echo htmlentities($vars['entity']->name, ENT_QUOTES, 'UTF-8'); ?>" title="<?php echo htmlentities($vars['entity']->name, ENT_QUOTES, 'UTF-8'); ?>" <?php echo $vars['js']; ?> style="background: url(<?php echo $vars['entity']->getIcon($vars['size']); ?>) no-repeat;" class="<?php echo $vars['size']; ?>" />
+       <?php
+       /*
+       original avatar method
+       <img src="<?php echo $vars['entity']->getIcon($vars['size']); ?>" border="0" <?php echo $align; ?> alt="<?php echo htmlentities($vars['entity']->name, ENT_QUOTES, 'UTF-8'); ?>" title="<?php echo htmlentities($vars['entity']->name, ENT_QUOTES, 'UTF-8'); ?>" <?php echo $vars['js']; ?> />
+       */
 
        if (!$override) { 
        ?>