Skip to Content Skip to Menu

How can we remove the canvas preview or make it fit automatically when they...

2 years 6 months ago #329496 by GODpleasers
How can we remove the canvas preview or make it fit automatically when they... was created by GODpleasers
How can we remove the canvas preview or make it fit automatically when they upload a new canvas image?

Come worship Jesus with us..
GOD Speaks internet radio- :-) - GOOD :-) - Music that employs life, deliverance, & restoration - COMPLETE :-)
godspeaksinternetradio.com/

Please Log in or Create an account to join the conversation.

  • krileon
  • krileon
  • ONLINE
  • Posts: 48541
  • Thanks: 8290
  • Karma: 1445
2 years 6 months ago #329503 by krileon
Replied by krileon on topic How can we remove the canvas preview or make it fit automatically when they...
Canvas does not have a static width. It has a static height, which is 200px. That should match what you see on profile assuming the widths are similar. You can set the canvas field to display on 2 lines in profile edit for it to preview better. Aside from that if you don't want it displayed you'll need to write custom CSS to hide it.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

2 years 6 months ago - 2 years 6 months ago #329505 by GODpleasers
Replied by GODpleasers on topic How can we remove the canvas preview or make it fit automatically when they...
This seems to have worked for both the preview and the canvas...
Code:
.cb_template .cbCanvasLayout .cbCanvasLayoutTop .cbCanvasLayoutBackground .cbImgCanvas { background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } .cb_template .cbCanvasLayoutBackgroundImage, .cb_template .cbImgCanvas { background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; }
...

Also setting the field for it for Maximum Image Height 199 and Maximum Image width 669. Also setting maintain aspect ratio to yes.

Any how with these setting if its bigger than the canvas are it shrinks it to fit and if its smaller it keeps it original size.

Any more tips you can think of please let me know.
Come worship Jesus with us..
GOD Speaks internet radio- :-) - GOOD :-) - Music that employs life, deliverance, & restoration - COMPLETE :-)
godspeaksinternetradio.com/
Last edit: 2 years 6 months ago by GODpleasers. Reason: Justadding my findings to be helpful in case any one else is wondering.

Please Log in or Create an account to join the conversation.

  • krileon
  • krileon
  • ONLINE
  • Posts: 48541
  • Thanks: 8290
  • Karma: 1445
2 years 6 months ago #329507 by krileon
Replied by krileon on topic How can we remove the canvas preview or make it fit automatically when they...
Canvas has a static 200px height unless you rewrite the canvas CSS. The ideal image settings for the canvas field are as follows.

Maximum Image Height: 200
Maximum Image Width: 1280
Maximum Thumbnail Height: 100
Maximum Thumbnail Width: 640
Maintain Aspect Ratio: Yes, with User Cropping
Allow Client Resize: Enable

As for your CSS you'll need to make it more specific. You can use .cbEditProfile.cb_template to specifically style profile edit only. Beyond that I cannot help you as we do not provide custom coding assistance. Simple examples are provided to active professional/developer subscribers only and some basic coding assistance is provided to developer subscribers only.

Profile edit preview will always show the thumbnail image. It does not show the full size image there.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon
Powered by Kunena Forum