sp unable to retrieve publishing image

[robiharid]

I have a list with a profile image, which is the type Publishing Image. I do not see this as a property of my list item.

I looked up the docs and saw that I had to do differently for publishing-related fields: https://pnp.github.io/pnpjs/sp/docs/items/

Do I have to change the regex match from /PublishingPageImage:SW -> /PublishingImage?
I would like to select all properties as I want the user to pick what properties they want to display, as I would prefer not having two calls in lieu of the .select('fieldvalues')

This is what FieldValuesAsText returns:
FieldValuesAsText:
MetaInfo: ""
odata.editLink: "Web/Lists(guid'124215')/Items(1)/FieldValuesAsText"
odata.id: "url/FieldValuesAsText"
odata.type: "SP.FieldStringValues"

[patrick-rodgers]

Publishing fields are just different and I am not aware of a way to not have two calls. You would need to try it out and see, not sure off the top of my head what the right field name would be, but I think that pattern should still work for you.

[robiharid]

Publishing fields are just different and I am not aware of a way to not have two calls. You would need to try it out and see, not sure off the top of my head what the right field name would be, but I think that pattern should still work for you.

Thanks but the regex matches FieldValuesAsText.MetaInfo, which for me, when console logged, doesn't exist console.log(r[i].FieldValuesAsText.MetaInfo);

Like I show in the OP, the metainfo property is empty - how do I expand on the Publishing Image field?

[patrick-rodgers]

I didn't catch the first time that you are using a publishing field outside of a pages library. Please see this issue from awhile ago and see if that helps you out. That is for an older version of the library but the code should mostly be the same.

[patrick-rodgers]

Going to close this as answered. If you are still having issues please open a new issue and reference this one with additional details. Thanks!

[Gennady-G]

Please see this issue from awhile ago and see if that helps you out. That is for an older version of the library but the code should mostly be the same.

Thank You Patrick very much. Your answer helped me, but I used combination of answers(not sure if 100% correct but worked for me). Also updated code to use new pnp version. So code looks something like this:

// I used sp v.1.3.8 for 2019 on-prem and cloud, so these imports work for versions:
// npm install @pnp/sp@1.3.8 @pnp/odata@1.3.8 @pnp/logging@1.3.8 @pnp/common@1.3.8
import { sp, Item, Web } from '@pnp/sp';
import {
  extend 
} from "@pnp/common";

  public componentDidMount(): void {

    this.getItemsFromSharepoint();
  }

  protected getItemsWithPublishingRollupImage(web: Web, listTitle: string, selects: string[], itemsPerPage: number) {

    return new Promise((resolve, reject) => {

      // this array will be all the results once we are done
      const itemsCollector = [];

      // build some query pieces to use
      const items = web.lists.getByTitle(listTitle).items;
      const query = items.select.apply(items, selects);

      // get the initial list of items
      query.top(itemsPerPage).get().then((results) => {

        // we will use a batch to save as much as possible on traffic
        const batch = web.createBatch();

        var regex = /<img.*?src=['"](.*?)['"]/; // get image url from metadata like

        // now we need to add all the requests to the batch
        // for each item we need to then make a separate call to get the FieldValuesAsHtml
        for (let i = 0; i < results.length; i++) {

          // use the Item class to build our request for each item, appending FieldValuesAsHtml to url
          const htmlValues = new Item(items.getById(results[i].Id), "FieldValuesAsHtml");

          htmlValues.select("Announcement_x0020_Thumbnail").inBatch(batch).get().then(htmlValue => {

            // extend our item and push into the result set
            itemsCollector.push(extend(results[i], {

              // If thumbnail uploaded use it; if error - return empty string so default image will be used
              // Note 'Announcement_x005f_x0020_x005f_Thumbnail' from metadata
              Announcement_x0020_Thumbnail: (htmlValue.Announcement_x005f_x0020_x005f_Thumbnail ?
                regex.exec(htmlValue.Announcement_x005f_x0020_x005f_Thumbnail)[1] : '')  // extract pure image url
            }));
          });
        }

        // execute the batch
        batch.execute().then(_ => {
          // use the behavior that all contained promises resolve first to ensure itemsCollector is populated
          resolve(itemsCollector);
        });

      }).catch(e => {
        reject(e);
      });
    });
  }

  protected getItemsFromSharepoint = async () => {

    const libTitle: string = escape(this.props.listName);
    const itemsPerPage: number = this.props.itemsPerPage;

    const web = new Web(this.props.siteUrl);

    try {

      const itemsCollection = await this.getItemsWithPublishingRollupImage(web, libTitle, ['Title', 'Announcement_x0020_Summary', 'Created', 'ID', 'External_Link', 'Announcement_x0020_Body'], itemsPerPage);
      console.log(`here are news items: ${JSON.stringify(itemsCollection, null, 4)}`);

      this.setState({ items: itemsCollection }, () => {
        console.log('State is set.');
      });

    } catch (e) {
      console.error(e);
    }
  }

and my IListItem.ts interface is:

// IListItem.ts
export interface IListItem {
  Title: string;
  Author: string;
  External_Link: string;
  Announcement_x0020_Summary: string;
  Announcement_x0020_Body: string;
  Announcement_x0020_Thumbnail: string;
  Created: string;
  ID: number;
  Modified: Date;
}

export class ListItem {
  public Title: string;
  public Author: string;
  public External_Link: string;
  public Announcement_x0020_Summary: string;
  public Announcement_x0020_Body: string;
  public Announcement_x0020_Thumbnail: string;
  public Created: string;
  public ID: number;
  public Modified: Date;

  constructor(item: IListItem) {
    this.Title = item.Title;
    this.Author = item.Author;
    this.External_Link = item.External_Link;
    this.Announcement_x0020_Summary = item.Announcement_x0020_Summary;
    this.Announcement_x0020_Body = item.Announcement_x0020_Body;
    this.Announcement_x0020_Thumbnail = item.Announcement_x0020_Thumbnail;
    this.Created = item.Created;
    this.ID = item.ID;
    this.Modified = item.Modified;
  }
}

Thank You twice @patrick-rodgers

[github-actions]

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.