BuddyDev

Search

Replies

  • Participant
    Level: Enlightened
    Posts: 56

    No problem Brajesh, Yes, when I first read it, I tested that hook out, I thought that hook was the answer and then you just need to add the error message. When I read it again, I realisd I misundrstood and couldn’t edit my reply. Thank you very much for looking into this. You are the best.

    As for the image, if you want a full screen image, I would recommend 1500px by 500px as this is the same image dimensions as twitter and there are a lot of free 1500px x 500px images available on the internet for users to use. And I can set it in a way where it always takes up the full screen, and to make it respond beautifully.

    I have a very keen eye on design, and I’m always asking questions on forums on how to do the most advanced designs. I’ve come up with a great solution with just a little bit of CSS code.

    Firstly, I use an image tag in my template ‘$cover_image_url = bp_attachments_get_attachment( 'url', array( 'item_id' => bp_displayed_user_id() ) ); to handle the cover image. But I assume you are using the default CSS ‘backgound-image: url();’ to handle the cover image, this requires different CSS because we have to open the container, and in a way to make it responsive. I was just testing this out, and I’ve got it.

    check out this 1500px x 500px image – remember to make your window screen smaller to check out the results on different screen sizes:

    http://codepen.io/anon/pen/YybyRq?editors=110

    To make a backgound-image: url(); responsive, we need to open up the container so it responds, for a 1500px x 500px image, this is padding-bottom: 33.30%;

    When we get to smaller screen sizes (such as 600px), if the image starts to look small, we can change it more to a 3:2 ratio simply by making the padding-bottom slightly bigger 40% as I done. Just let background-size: cover; and background-position: center; take care of the rest. For desktop screen the height is too big so we make it smaller by just setting a height on the container, again letting again letting background-size: cover; and background-position: center; take care of it.

    Finally, it gets even better, if there is a cropping feature (like the one I first mentioned), a user can upload any size they like, and let the cropper crop it 3:1, even if is a small image like 600px x 200px, the CSS I provided will stretch the image and ensure it will always be full width with a 3:1 responsive design, with the exact same results as if it was 1500px by 500px. Here is another example of the same CSS code, but with a small 600px x 200px:
    http://codepen.io/anon/pen/jboZXM?editors=110
    it produces the same results (but it just stretches it for desktop screen, making it a bit blurry, but users will have that recommended message to follow for the best quality). This is why it would also be cool for a cropping feature like the avatar crop.

    Hope you like this design, you don’t have to use it but might give you some ideas for your theme.

  • Participant
    Level: Enlightened
    Posts: 56

    I would be interested in that approach and I would be very grateful if you could create a custom handler for the action that generates the error for me 🙂

    It does the job preventing the images being uploaded, but it also prevents images from being uploaded over my set dimensions (1200px by 400px) – so users can’t upload cover images at all.

    Also, I can show you some of my CSS header designs of the way I like to set up header images with CSS on codepen/jsfiddle if you like so you can get some cover image design ideas for your upcoming theme. I like having cover images set in a certain way ready for all screen sizes. So just let me know if you’d like to see my cover image CSS design, and I’ll set it up on codepen. But you’re already the best with code so I doubt you need it.

    Thank you.

    • This reply was modified 6 years, 1 month ago by Andy.
    • This reply was modified 6 years, 1 month ago by Andy.
    • This reply was modified 6 years, 1 month ago by Andy.
    • This reply was modified 6 years, 1 month ago by Andy.
  • Participant
    Level: Enlightened
    Posts: 56

    Thanks Brajesh.

    On the cover image page, there is only a recommended message before a user uploads anything, it says “For better results, make sure to upload an image that is larger than 1200px wide, and 400px tall.”

    This is just a recommended message and doesn’t prevent a user from uploading a smaller image. Is this the message you meant? Because I’ve also still got a fresh WP multisite and BP install, with all plugins removed (except for BuddyPress) and it is not preventing a user from uploading a small dimension image. Is this something that can be turned on do you know?

  • Participant
    Level: Enlightened
    Posts: 56

    Hi Brajesh,

    Thanks for the fast support. I was unaware of that hard crop.

    It kind of works, if a user uploads an image larger than my set height and width, then yes, it crops it down to that size.

    But if a user uploads a smaller image, it uploads the image as it is. A cropping feature like the avatar crop will fix this.

    Or

    I can use that hard crop, but then if a user uploads an image under my set height and width, I need the image to be prevented from uploading and displaying an error message saying ‘The header image cannot be uploaded because the header image must have a minimum width of 1200px and a minimum height of 400px’.

    Do you know how to do this?

    I’m not expecting any help with this, I was just mainly suggesting a feature request, but any help appreciated.

  • Participant
    Level: Enlightened
    Posts: 56

    Thanks. I meant to say the activity action type, not the scope. But ‘mpp_media_upload’ is working for the action type too. I’m not a great coder, I just have some coding and BuddyPress knowledge to enhance my theme, I removed the activity sub menu filter on the main activity page and managed to come up with something like the code below, and it now all works great, unless you notice anything wrong with it:

    /**
    * Filter activity loop
    *
    * Display just the activity updates (with media) on front-page from the logged in user and
    * from who a logged in user is following
    */
    function cm_activity_filter( $retval ) {

    if ( bp_is_activity_front_page() ) {
    $retval[‘scope’] = ‘following,just-me’;
    $retval[‘action’] = ‘activity_update,mpp_media_upload’;
    }

    return $retval;
    }
    add_filter( ‘bp_after_has_activities_parse_args’, ‘cm_activity_filter’ );

    • This reply was modified 6 years, 2 months ago by Andy.
  • Participant
    Level: Enlightened
    Posts: 56
    Andy on in reply to: [Resolved] MediaPress on multisite issue #1601

    Hi Brajesh.

    Wow, that was fast. Yes that has fixed the problem. I’m delighted this issue has been resolved because this plugin is the best. I will definitely be recommending this plugin to other BuddyPress users.

    Thank you.