Changeset 10155 for trunk/src/bp-templates/bp-legacy/buddypress-functions.php

Timestamp:

09/29/2015 10:42:56 PM (9 years ago)

Author:

imath

Message:

Introduce functions to register and enqueue the Cover Images Javascript and Css

• Add the cover-image.js Javascript and register it inside Core Common Scripts
• Make sure to enqueue Cover Images script only when needed ("change-cover-image" screens)
• Create a new function to attach an the inline css specified inside the Cover Image feature settings
• Create the inline css for BP Legacy.
• Adjust our main css file (buddypress.css) and the companion stylesheets
• Add the Cover Images Backbone template into bp-legacy/buddypress/assets/_attachments

Props r-a-y

See #6570

File:

• trunk/src/bp-templates/bp-legacy/buddypress-functions.php (modified) (1 diff)

trunk/src/bp-templates/bp-legacy/buddypress-functions.php

@@ -1718 +1718 @@
     die();
 }
+
+/**
+ * BP Legacy's callback for the cover image feature
+ *
+ * @since  2.4.0
+ *
+ * @param  array  $params the current component's feature parameters
+ * @return array          an array to inform about the css handle to attach the css rules to
+ */
+function bp_legacy_theme_cover_image( $params = array() ) {
+    if ( empty( $params ) ) {
+        return;
+    }
+
+    // avatar height - padding - 1/2 avatar height
+    $avatar_offset = $params['height'] - 5 - round( (int) bp_core_avatar_full_height() / 2 );
+
+    // header content offset + spacing
+    $top_offset  = bp_core_avatar_full_height() - 10;
+    $left_offset = bp_core_avatar_full_width() + 20;
+
+    $cover_image = isset( $params['cover_image'] ) ? 'background-image: url(' . $params['cover_image'] . ');' : '';
+
+    $hide_avatar_style = '';
+
+    // Adjust the cover image header, in case avatars are completely disabled
+    if ( ! buddypress()->avatar->show_avatars ) {
+        $hide_avatar_style = '
+            #buddypress #item-header-cover-image #item-header-avatar {
+                display:  none;
+            }
+        ';
+
+        if ( bp_is_user() ) {
+            $hide_avatar_style = '
+                #buddypress #item-header-cover-image #item-header-avatar a {
+                    display: block;
+                    height: ' . $top_offset . 'px;
+                    margin: 0 15px 19px 0;
+                }
+
+                #buddypress div#item-header #item-header-cover-image #item-header-content {
+                    margin-left:auto;
+                }
+            ';
+        }
+    }
+
+    return '
+        /* Cover image */
+        #buddypress #header-cover-image {
+            height: ' . $params["height"] . 'px;
+            ' . $cover_image . '
+        }
+
+        #buddypress #create-group-form #header-cover-image {
+            position: relative;
+            margin: 1em 0;
+        }
+
+        .bp-user #buddypress #item-header {
+            padding-top: 0;
+        }
+
+        #buddypress #item-header-cover-image #item-header-avatar {
+            margin-top: '. $avatar_offset .'px;
+            float: left;
+            overflow: visible;
+            width:auto;
+        }
+
+        #buddypress div#item-header #item-header-cover-image #item-header-content {
+            clear: both;
+            float: left;
+            margin-left: ' . $left_offset . 'px;
+            margin-top: -' . $top_offset . 'px;
+            width:auto;
+        }
+
+        body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content,
+        body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
+            margin-top: ' . $params["height"] . 'px;
+            margin-left: 0;
+            clear: none;
+            max-width: 50%;
+        }
+
+        body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
+            padding-top: 20px;
+            max-width: 20%;
+        }
+
+        ' . $hide_avatar_style . '
+
+        #buddypress div#item-header-cover-image h2 a,
+        #buddypress div#item-header-cover-image h2 {
+            color: #FFF;
+            text-rendering: optimizelegibility;
+            text-shadow: 0px 0px 3px rgba( 0, 0, 0, 0.8 );
+            margin: 0;
+            font-size:200%;
+        }
+
+        #buddypress #item-header-cover-image #item-header-avatar img.avatar {
+            border: solid 2px #FFF;
+            background: rgba( 255, 255, 255, 0.8 );
+        }
+
+        #buddypress #item-header-cover-image #item-header-avatar a {
+            border: none;
+            text-decoration: none;
+        }
+
+        #buddypress #item-header-cover-image #item-buttons {
+            overflow:hidden;
+            margin: 20px 0 10px;
+            padding: 0 0 5px;
+        }
+
+        #buddypress #item-header-cover-image #item-buttons:before {
+            content:"\00a0";
+        }
+
+        @media screen and (max-width: 782px) {
+            #buddypress #item-header-cover-image #item-header-avatar,
+            .bp-user #buddypress #item-header #item-header-cover-image #item-header-avatar,
+            #buddypress div#item-header #item-header-cover-image #item-header-content {
+                width:100%;
+                text-align:center;
+            }
+
+            #buddypress #item-header-cover-image #item-header-avatar a {
+                display:inline-block;
+            }
+
+            #buddypress #item-header-cover-image #item-header-avatar img {
+                margin:0;
+            }
+
+            #buddypress div#item-header #item-header-cover-image #item-header-content,
+            body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content,
+            body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
+                margin:0;
+            }
+
+            body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content,
+            body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
+                max-width: 100%;
+            }
+
+            #buddypress div#item-header-cover-image h2 a,
+            #buddypress div#item-header-cover-image h2 {
+                color: inherit;
+                text-shadow: none;
+                margin:25px 0 0;
+                font-size:200%;
+            }
+
+            #buddypress #item-header-cover-image #item-buttons div {
+                float:none;
+                display:inline-block;
+            }
+
+            #buddypress #item-header-cover-image #item-buttons:before {
+                content:"";
+            }
+
+            #buddypress #item-header-cover-image #item-buttons {
+                margin: 5px 0;
+            }
+        }
+    ';
+}