Security Alert: 26 BuddyDev accounts compromized in brute force attack.

BuddyDev

Search

[Resolved] Cover Image cropping feature (like the avatar cropping feature)

Tagged: 

  • Participant
    Level: Enlightened
    Posts: 56
    Andy on November 20, 2015 at 12:35 pm #1719

    Hi Brajesh,

    There is a script that I really need, regarding the new cover image in BuddyPress 2.4 and I would definitely buy it if you make it into a plugin.

    You know that cropping feature for the avatar where a user can crop the image when they upload an image. Is it possible to have this cropping feature for the cover image?

    So it gives a user the ability to crop the part of the image they like, but there is a more important part of it for me, which is why I really need it. My header image must keep the ratio for the way I like to design my header image to respond to small screen sizes.

    I have set the cropper image for a 3:1 ratio (1200px by 400px):

    function cm_xprofile_cover_image( $settings = array() ) {
    $settings[‘width’] = 1200;
    $settings[‘height’] = 400;

    return $settings;
    }
    add_filter( ‘bp_before_xprofile_cover_image_settings_parse_args’, ‘cm_xprofile_cover_image’, 10, 1 );
    add_filter( ‘bp_before_groups_cover_image_settings_parse_args’, ‘cm_xprofile_cover_image’, 10, 1 )

    But when a user uploads images of different sizes, it needs to always have the ratio that I set for the cover image settings_parse_args (3:1 ratio), which is why I need that cropping feature – so a user can still upload any size image, but the cropping feature will ensure that the user will crop the cover image to the 3:1 ratio.

    Thanks in advance

  • Keymaster
    (BuddyDev Team)
    Posts: 24706
    Brajesh Singh on November 20, 2015 at 1:15 pm #1721

    Hi Andy,
    Though I don’t have a plugin here is something that will hard crop the image to your dimensions

    

function buddydev_enable_crop_for_cover_image( $args ) {
	$args['crop'] = true;
	
	return $args;
}
add_filter( 'bp_after_attachment_cover_image_edit_image_parse_args', 'buddydev_enable_crop_for_cover_image' );

function cm_xprofile_cover_image( $settings = array() ) {
$settings['width'] = 1200;
$settings['height'] = 400;

return $settings;
}
add_filter( 'bp_before_xprofile_cover_image_settings_parse_args', 'cm_xprofile_cover_image', 10, 1 );
add_filter( 'bp_before_groups_cover_image_settings_parse_args', 'cm_xprofile_cover_image', 10, 1 );

    Please give it a try and let me know if that crops or not? I am certainly thinking to do something similar in next few months if no one comes up with.

    PS: For posting code please use backticks here( `)

    Thank you
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 56
    Andy on November 20, 2015 at 1:51 pm #1724

    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.

  • Keymaster
    (BuddyDev Team)
    Posts: 24706
    Brajesh Singh on November 20, 2015 at 7:43 pm #1728

    Hi Andy,
    Thank you.
    I had a look at the code and it seems that BuddyPress does have the warning available. I am not sure why it is not being shown( I could not test it).

    As per the code I saw, When small dimension image is uploaded, there should be a warning there.

  • Participant
    Level: Enlightened
    Posts: 56
    Andy on November 21, 2015 at 4:19 pm #1739

    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?

  • Keymaster
    (BuddyDev Team)
    Posts: 24706
    Brajesh Singh on November 23, 2015 at 12:47 pm #1742

    Hi Andy,
    Sorry about the delay. Been a little beet inactive on weekend.

    You are right about the message. I am also integrating the new cover image to our upcoming theme and have faced similar issue. There is a way to do it by unhooking the core ajax upload handler

    
remove_action( 'wp_ajax_bp_cover_image_upload', 'bp_attachments_cover_image_ajax_upload' );

    and adding our custom handler for the action that generates the error. But I am not sure if that will be the best thing to do(and another issue is future compatibility).

    If you are interested in this approach, I can assist with the code.

  • Participant
    Level: Enlightened
    Posts: 56
    Andy on November 23, 2015 at 4:50 pm #1744

    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 9 years, 1 month ago by Andy.
    • This reply was modified 9 years, 1 month ago by Andy.
    • This reply was modified 9 years, 1 month ago by Andy.
    • This reply was modified 9 years, 1 month ago by Andy.
  • Keymaster
    (BuddyDev Team)
    Posts: 24706
    Brajesh Singh on November 24, 2015 at 12:45 pm #1758

    Hi Andy,
    Thank you.
    I will do that. The above code was not complete, we removed the handler but did not provide any handler, so It was bound to have issue.

    I will post the code a little bit late today for the custom handler.

    Also, I will love to see how are you managing it specially the responsive aspect. I am using 2000x400px image for the header and It seems wastage of bandwidth to load such a large image. I will see if we can add multiple versions of the header image to avoid this wastage of bandwidth.
    How are you managing this aspect?

  • Participant
    Level: Enlightened
    Posts: 56
    Andy on November 24, 2015 at 4:04 pm #1759

    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
    Andy on November 24, 2015 at 5:34 pm #1760

    And just to add a few more things:
    background-position: center;
    background-size: cover;
    padding-bottom: value%; // value% depends on the image ratio you have.

    These are the three main things to control my responsiveness.

    But I added a few extras to crop the image –

    For desktop screen, it shows the full image width but I cropped the top and bottom by adding height:value; because 1500px by 500px comes out a bit large in height.

    At screen size ~ 990px I removed the height and added the padding-bottom, this then shows the parts we cropped and it now shows the full image and it will respond all the way down showing the full image.

    But at about 600px screen size, the 3:1 ratio might start looking a bit small in height, so you can optionally crop the left and right of the image by adding a higher percentage value for padding-bottom: value%;

    • This reply was modified 9 years, 1 month ago by Andy.
    • This reply was modified 9 years, 1 month ago by Andy.
    • This reply was modified 9 years, 1 month ago by Andy.
    • This reply was modified 9 years, 1 month ago by Andy.

The topic ‘ [Resolved] Cover Image cropping feature (like the avatar cropping feature)’ is closed to new replies.

This topic is: resolved