sharepoint online , Modern upcoming events web part

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

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.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayakumar Balasubramaniam8y ago
Hi Srikanth,

I add field to the Event content type, say a text field, but it's not appearing in New Event Modern page.

Looking for your help.

Thanks,
Jayakumar B
Sandeep Kumar Parsam9y ago
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.