sharepoint online Modern upcoming events web part

Question

Hello How to add a custom image upload field/column in Event Modern web part in site pages of office 365 site. I have created Image column and added to Event content type but when I tried to add a new event I am not able to get that image column. I need to get the image from Events list to show in Homepage of my site. By default we have a banner image where we can upload there from Add Event page. But to show that image on the home page. I am not getting the clear image.The resolution I have given in home page in 100*100. But in default banner image the resolution is 1000*200. Can you please suggest me how I can get this custom image with code. Many Thanks Srikanth

Sandeep Kumar Parsam · Answer

Hi Srikanth Below is my response Q: How to add an image column & New column not appearing in new event form. A: I'm not sure why you wanted to add a custom image field when There is a column by the name Banner URL already exist in the event list. anyhow process is same to add the filed.You should add field to the Event content type in order to appear that in the new form. By default this column is not added to the Event content type. Hence it will not appear when you create a event in the classic mode. However in modern UI IT provides an option to choose the background URL As shown in the image. In case if you would like to see the same column in the classic mode Go to List Settings --> Event Content Type --> Add from Existing Site columns -> choose banner URL. with this you can add banner image to the event using classic mode as well. Anyhow image appears only when it is opened in full view not in the webpart. Q: How to change image resolution A: Though you provide an image of different dimensions it is possible to control the image rendering using reniditon ID query string. Just append it to image URL For example Acutal URL: https://{site collection}/sites/{site}/SiteAssests/banner.jpg (dimensions: 1000*200) Modified URL: https://{site collection}/sites/{site}/SiteAssests/banner.jpg??RenditionID=1 (dimensions: 100*100) To view /create image renditions go site settings --> Image rendtions (under look & feel). Q: how I can get this custom image with code. A: I would recommend using REST API follow my blog for referrence http://www.c-sharpcorner.com/article/fetch-user-details-and-profile-picture-from-person-or-group-field-using-rest-api var BannerImageURL = item.JobBanner.Url; // Split and Separate ?RenditionID=2 from the URL BannerImageURL = BannerImageURL.split( ? )[0]; // Get Div element by class and set banner image I will leave upto to work on the code. I hope I answered your queries.

sharepoint online , Modern upcoming events web part