Object grid not showing thumbnails

[zsofiaj]

We are thinking about using an object grid in our forthcoming Indonesian Textiles publication, and I set it up as described here:

https://quire.getty.edu/docs-v1/collection-catalogues/#generate-object-grids

We are using external IIIF images in this book, so I wasn't sure if I needed to add a thumbnail for each entry in objects.yaml. Here is what each entry looks like in our figures.yaml:

• id: "cat-11"
  src: cats/cat-11-ILE2006-4-163ag-obj-111215-0001-pub_2000.jpg
  printImage: _assets/images/cats/cat-11-ILE2006-4-163ag-obj-111215-0001-pub_2000.jpg
  manifestId: https://manifests.collections.yale.edu/yuag/obj/111215
  canvasId: https://manifests.collections.yale.edu/canvas/yuag/0b9de3ff-5a63-44ef-89ba-178bfa068f47
  zoom: true

When I first set up the object grid page, no thumbnails appeared on the page, so I tried adding a thumbnail for a few of the entries in the objects.yaml, but I'm still not getting thumbnails:

https://indonesian-textiles.netlify.app/catalogue/catalogue-grid/

Any ideas on how I can get the images to show up here?

I would also love to get rid of the gray (or "off-white") background behind the filter section with dropdowns and buttons. I was able to do that by changing the background from #eef2f3; to $white; in the object-filters.webc file in two spots, but for some reason it won't work when I add this to the custom.css file instead:

.object-filters {
background: $white;
}

.object-filters__button {
background: $white;
}

I would also like to change the red color of the title font that shows under each thumbnail to the spot color I'm using elsewhere in the publication, and I wasn't able to figure out what controls that.

Thank you!

[Erin-Cecele]

Hi @zsofiaj, is this the process you used to add thumbnails?

• Resize the image (approx. 300 pixels wide)
• Give the image a filename that is distinct from the original image (for example, instead of irises.jpg do irises_small.jpg)
• Add the image to the _assets/images repo
• In the objects.yaml file, add thumbnail: and the path to that image. (If the image is in a subfolder, for example one called "thumbnails" you would add that to the path: thumbnail: thumbnails/irises_small.jpg.

object_list:
 
  - id: cat-1
    artist: Van Gogh
    title: Irises
    year: 1889
    dimensions:  2’ 4” x 3’ 1”
    medium: Oil paint
    location: The Getty
    thumbnail: irises_small.jpg
    figure:
      - id: fig-1-1

Also, make sure you add thumbnail to your object_card in the objects.yaml file:

object_card:
  - thumbnail
  - artist
  - title
  - year

[zsofiaj]

Thanks so much, @Erin-Cecele. I had not given the image a filename distinct from the original image. I added "_thumb" to the end of all of them, and I updated the filename in the thumbnail path, so it looks like this now:

object_list:

  - id: 1-1
    title: "Shoulder Cloth"
    culture: "Aceh"
    geography: "Sumatra, Indonesia"
    date: "19th century"
    medium: "Silk and gold thread; warp-faced plain weave, supplementary weft, and warp ikat"
    dimensions: "59 13/16 × 34 5/8 in. (152 × 88 cm)"
    credit line: "Robert J. Holmgren and Anita E. Spertus Collection, Promised gift of Thomas Jaffe, B.A. 1971"
    inv no: "ILE2006.4.218"
    link: "https://artgallery.yale.edu/collections/objects/111270"
    thumbnail: thumbnails/cat-1-ILE2006-4-218_ag-obj-111270-0001-pub_2000_thumb.jpg
    figure:
      - id: "cat-1-1"
      

I only did this for the first two objects in the objects.yaml file, because I didn't want to do it for all 270 images if this is not quite right. The images are still not loading on the page. Could it be because I haven't added all of them? If yes, I can try to do that next.

And I added thumbnail to your object_card in the objects.yaml file, like this:

object_card:
  - thumbnail
  - title

[zsofiaj]

I wanted to revisit this issue, @Erin-Cecele and @geealbers, I hope you don't mind! Erin, in an older email, you said "I figured out why the images were not populating on your object grid page. It has to do with the manifestID and the cavasID. Once I removed those values, then the image showed up. I’m ccing Greg to help me determine if this is out of scope for the object grid feature or if it is a bug. Thanks for bringing this to our attention." Did you happen to find out more about this? Is it possible to get the object grid working if I'm using external IIIF images, or is there some sort of workaround? Thank you!

[Erin-Cecele]

Hi @zsofiaj, as I expected, this is an issue with external IIIF images not being compatible with the object grid feature. Unfortuantely, external IIIF images weren’t on our radar during the object filters development. However there is a workaround!!

in

_includes/components/object-filters/object-card/object-image.webc

replace

const thumbnail = figures
  ? figures.find(({ mediaType }) => mediaType === 'image').thumbnail
  : data.thumbnail

with

let thumbnail
if (figures) {
  thumbnail = figures.find(({ mediaType }) => mediaType === 'image').manifestId
    ? figures.find(({ mediaType }) => mediaType === 'image').src
    : figures.find(({ mediaType }) => mediaType === 'image').thumbnail
} else {
  thumbnail = data.thumbnail
}

We are going to open an issue (I will post the GitHub # here) to address this with our developers. Thanks for bringing it to our attention.

[Erin-Cecele]

@geealbers where does one change the color of the text that is used on the object filter page?

[geealbers]

To @zsofiaj's point above, a lot of the styles for the Objects Page are semi-problematically located in the .webc files, like _includes/components/object-filters/object-card/object-card.webc for the text on the card, and other bits of css scattered around the files in _includes/components/object-filters.

The styles in those files may have a tendency to override anything you put in the custom.css file, but I believe using !important will fix that in most cases. For example if something like this doesn't work:

.object-card {
  color: blue;
}

I think this should:

.object-card {
  color: blue !important;
}

Also note that in the original example, background: $white; won't work in the custom.css file with or without the !important flag because $white with the dollar sign, is a .scss variable.

[zsofiaj]

Thanks so much, @geealbers. That worked! I added !important for each line in custom.css:

  .object-card {
    background-color: #ffffff !important;
    color: #668395 !important;
  }

  .object-card .arrow {
    fill: #668395 !important;
  }

And thank you for explaining why $white; didn't work. I still haven't wrapped my head around the differences between css and scss, but I will always try to pay attention to this now. Here is our current object grid, with colors adjusted (although the thumbnail images are not yet loading, as I mentioned in my note to @Erin-Cecele above):

https://indonesian-textiles.netlify.app/catalogue/catalogue-grid/