0

Back in SP2013, there was a publishing image column I could add from site columns. It allowed me to browse for an image in the SP sites or enter a URL. However in modern SP lists, there is no such column. Closest thing is a hyperlink that's rendered as image. Company employees can't be expected to use that. We would need that picker dialog. How can we re-add this?

I noticed that some of the default widgets that let you pick a widget, has this picker and it even lets you pick from stock images. It would be ideal to have that as a column that could be added to a list.

3 Answers 3

0

This can be done for modern team sites OR old classic sharepoint sites only. You can enable the Sharepoint publishing feature. This will make classic publishing image column available to be created under site column. You can then add these to lists.

enter image description here

1
  • This converts the list to classic. See accepted answer.
    – omega
    Sep 14, 2020 at 2:11
0

This is not available in modern SharePoint list column, probably out of security or storage consideration.

Modern SharePoint has developed a Picture column for lists and libraries, possibly the best OOB solution you can find for the time being.

If you are open for custom solutions, see the link here for an example: Create simple custom lookup picker in "Hyperlink or Picture" Column.


Picture column:

enter image description here

8
  • What is that oob picture column you are referring to? And what about the other proposed solution here by Akshay? Is that really not supported on modern lists?
    – omega
    Sep 11, 2020 at 7:18
  • @omega The Picture column is the same as the Hyperlink column in classic experience, which I’m sure you have seen already. I’ve added a screenshot in the previous reply. The columns proposed by Akshay are still listed in the official document, but I cannot find them anywhere in my tenant, so sorry that I cannot confirm for you. support.microsoft.com/en-us/office/… Sep 11, 2020 at 7:33
  • What about this?
    – omega
    Sep 11, 2020 at 12:29
  • support.microsoft.com/en-us/office/…
    – omega
    Sep 11, 2020 at 12:29
  • On the top it says SharePoint online
    – omega
    Sep 11, 2020 at 12:30
0

Option 1)

You can follow this

https://support.microsoft.com/en-us/office/add-publishing-columns-to-content-types-lists-or-libraries-4e268d2e-4822-4bc6-a992-88287119a052

to create a site column for "Image with formatting and constraints for publishing" to the custom columns group, and then add the site column from there, but it does convert the list to a classic experience which some may not prefer (source: https://techcommunity.microsoft.com/t5/sharepoint/publishing-image-fields-and-the-new-sharepoint-list-and-library/m-p/44987). Maybe Microsoft will upgrade this experience in the future...

Also a typical Rest API/PnPjs call to the Image field doesn't seem to work. There is a differant API call needed. See this How to read from the Image column in sharepoint Online lists using RestAPI?

PnPjs also has an alternative way to get it listed here

https://pnp.github.io/pnpjs/sp/items/#retrieving-publishingpageimage

I haven't tried it, but seems like it could work. But they do mention a lot of data is stored in this metadata and would be retrieved as a result, so limit the rows returned (see How to read from the Image column in sharepoint Online lists using RestAPI?)

There is a uservoice for this to make a modern file picker too

https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/32249674-upload-image-in-picture-column-type

If you like it, vote on it.

Option 2)

  1. Set up an extension for listviewcommandset for context menu for list items that opens a dialog when clicked.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/guidance/using-custom-dialogs-with-spfx

  1. In the dialog, show this file picker component to let the user pick an image. Also use PnPjs to show a dropdown of list fields that are url type (which are also image format).

https://pnp.github.io/sp-dev-fx-controls-react/controls/FilePicker/

  1. Upon picking an image, use PnPjs to set the absolute image link to the field selected in the dropdown.

This technique allows everything to remain 100% modern, but limits the formatting options on the image since it is stored as a url. However if you need additional formatting, you could custom build the img tag with more fields and set it back into a single/multi line field instead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.