Unable to interactive edit Card images

[NSGICOrganization]

Unable to interactive edit Card images in HUB.  I can edit Text and Hyperlinks in the cards, and I can edit HTML code for cards, but no setting menu displays to allow me to interactively edit the card image when I hover over or click on a card.

[KlaraSchmitt]

Unfortunately, this is correct. The plugin that we use for our Text Card does not support image editing the same way our Image Card does, so modifying the image through the WYSIWYG experience wouldn't yield consistent results. Those cards are part of our code snippets we include in the editor and do require a little bit of HTML knowledge to change the image, but in doing so you're more likely to maintain the code structure that keeps them visually consistent.

You might consider using our Gallery Card if you don't feel comfortable with HTML, as it handles dynamic injection of thumbnails based on the item details. Both Gallery Card and Image Card will also handle responsive resizing automatically for images.

I'm sorry, this is probably not the answer you were hoping to hear.

[NSGICOrganization]

Good to know - thanks!  I'm familiar with using the GUI Editor in Experience Builder to edit a similar Card Feature, but can go the HTML route.  So where / how do I upload my images to replace the default images on the cards?

[KlaraSchmitt · Accepted solution]

This is probably going to be a little more hacky than you'd like and I apologize. We are looking into ways to make pulling in pre-existing images easier as we know many services do offer a media library. There are just some difficulties we're trying to iron out.

If you have images hosted anywhere else, you could use those URLs. But if you need to replace the images and you wish to use the site item attached resources as your image hosting method, you can upload an image via the Image Card. Crop as necessary. Save your site. (You can always remove the image card once you have your image URL.)

Once you have the image you want to use attached to the site as a resource, if you are using a mouse, right-click the image and select Inspect from the dropdown menu. (I'm on Chrome, so the next few screenshots will be depicting Chrome.)

Select Chrome Inspect Option

This will open up the Chrome Dev Tools and should highlight the image in the DOM.

Code inspector showing image html

Right-click the url and open in new tab.

This will open a new browser tab. In the URL bar, you want to scan the url for the image extension. In my case this is a .jpg. Insert your cursor before the question mark, highlight everything from before the question mark to the end of the url, and delete it. You don't want the token as that's associated with your login and won't be there for everyone.

Once you delete the part after the extension you should have an image URL that you can place in the card as a replacement image.

I know this isn't terribly straightforward and I'm sorry about that. Best I can offer at the moment.