How do I insert the ImageMediaInfo in my Pop Up Template?

[ChesouyeCoye]

I am recreating something similar to the screen shot attached.  I have sucessfully generated my pop up template but I would like to add an image to it. See my code pen here: 

https://codepen.io/chesouye/pen/mdzzryK?editors=100

[LaurenBoyd]

Hi @ChesouyeCoye -

The following sample shows how to add ImageMediaInfo to a PopupTemplate: https://developers.arcgis.com/javascript/latest/sample-code/popup-multipleelements/

I updated your Codepen to add the example ImageMediaInfo. You will just need to update the title, caption, and the url to your hosted image: https://codepen.io/laurenb14/pen/JjmmRwv?editors=1000 

Hope this helps!

[ChesouyeCoye]

Thank you so much! I really appreciate it. Is it possible to have different images for each point on the map? 

[LaurenBoyd · Accepted solution]

There would need to be some logic within your PopupTemplate content to show a different image per feature, so a function needs to be used to format the content. My colleague created an example to show specific ImageMediaContent depending on the feature that is clicked on: https://github.com/lboyd93/DevSummit-Presentations/tree/main/2023/data-from-anywhere/ogc-layer 

Live app here: https://lboyd93.github.io/DevSummit-Presentations/2023/data-from-anywhere/ogc-layer/step4-popup/ 

Something like this example where a specified ImageMediaInfo is shown first depending on the feature's attributes:

const whaleLayer = new WFSLayer({
        url: "https://geo.pacioos.hawaii.edu/geoserver/PACIOOS/PACIOOS:hi_pacioos_all_whales/ows",
        ... other layer properties
        popupTemplate: {
            title: '{species} ({num_seen})',
            outFields: ['*'],
            content: formatContent
        }
    });

    // can read from external source in a more complex application
    let whaleMediaInfo = [
        {
            title: "<b>Whales</b>",
            type: "image",
            caption: "Whales are among the largest and oldest animals on Earth. They can be found in every ocean and range in size from the small dwarf sperm whale to the massive blue whale, the largest animal on the planet.<br> Credit: NOAA Fisheries; Unsplash",
            value: {
                sourceURL:
                    "https://github.com/yxeHu/developer-summit-demos/blob/main/whales.png?raw=true",
                linkURL: "https://www.fisheries.noaa.gov/whales"
            }
        },
        {
            title: "<b>Melon-Headed Whale</b>",
            type: "image",
            caption: "Melon-headed whales are a robust small whale found primarily in deep, tropical waters worldwide. <br> Credit: NOAA Fisheries",
            value: {
                sourceURL:
                    "https://media.fisheries.noaa.gov/styles/full_width/s3/dam-migration/melon-headed.jpg?itok=8p46JyBt",
                linkURL: "https://www.fisheries.noaa.gov/species/melon-headed-whale#overview"
            }
        },
        {
            title: "<b>Short-Finned Pilot Whale</b>",
            type: "image",
            caption: "Short-finned pilot whales are long-lived, slow to reproduce, and highly social. They are globally in tropical and temperate oceans. <br> Credit: NOAA Fisheries",
            value: {
                sourceURL:
                    "https://media.fisheries.noaa.gov/styles/full_width/s3/dam-migration/750x500-short-finned-pilot-whale.jpg?itok=oBURO5bv",
                linkURL: "https://www.fisheries.noaa.gov/species/short-finned-pilot-whale"
            }
        },
        {
            title: "<b>Humpback Whale</b>",
            type: "image",
            caption: "Humpback whales live in all oceans around the world, and they gets its common name from the distinctive hump on its back. <br> Credit: NOAA Fisheries",
            value: {
                sourceURL:
                    "https://media.fisheries.noaa.gov/styles/full_width/s3/dam-migration/2160x1440_humpbackwhale_noaa.jpg?itok=02bN5-Mw",
                linkURL: "https://www.fisheries.noaa.gov/species/humpback-whale"
            }
        },
        {
            title: "<b>False Killer Whale</b>",
            type: "image",
            caption: "False killer whales are social animals found globally in all tropical and subtropical oceans and generally in deep offshore waters. <br> Credit: NOAA Fisheries",
            value: {
                sourceURL:
                    "https://media.fisheries.noaa.gov/styles/full_width/s3/dam-migration/false_killer_whale.jpg?itok=r0oUwcYY",
                linkURL: "https://www.fisheries.noaa.gov/species/false-killer-whale"
            }
        },
        {
            title: "<b>Killer Whale</b>",
            type: "image",
            caption: "The killer whale, also known as orca, is the ocean’s top predator. The species the most varied diet of all cetaceans, but different populations are usually specialized in their foraging behavior and diet.<br> Credit: NOAA Fisheries",
            value: {
                sourceURL:
                    "https://media.fisheries.noaa.gov/styles/full_width/s3/2020-09/killer_whale.jpg?itok=hIzXcrH7",
                linkURL: "https://www.fisheries.noaa.gov/species/killer-whale"
            }
        },
        {
            title: "<b>Sperm Whale</b>",
            type: "image",
            caption: "Sperm whales are the largest of the toothed whales and have one of the widest global distributions of any marine mammal species. They are found in all deep oceans, from the equator to the edge of the pack ice in the Arctic and Antarctic. <br> Credit: NOAA Fisheries",
            value: {
                sourceURL:
                    "https://media.fisheries.noaa.gov/styles/full_width/s3/dam-migration/sperm-whales-nefsc.jpg?itok=dOWMygh4",
                linkURL: "https://www.fisheries.noaa.gov/species/sperm-whale"
            }
        },
        {
            title: "<b>Blainville's Beaked Whale</b>",
            type: "image",
            caption: "Blainville's beaked whales are little-known members of the beaked whale family. This species lives in tropical to temperate waters worldwide. <br><i>Head of a solitary adult male Blainville’s beaked whale showing the high bottom jaw line and the erupted teeth.</i><br> Credit: NOAA Fisheries",
            value: {
                sourceURL:
                    "https://media.fisheries.noaa.gov/styles/full_width/s3/dam-migration/750x500-blainvilles-beaked-whale.jpg?itok=T738G4Nb",
                linkURL: "https://www.fisheries.noaa.gov/species/blainvilles-beaked-whale"
            }
        }
    ]

    function formatContent(feature) {
        const whaleDate = feature.graphic.attributes.date;
        const whaleType = feature.graphic.attributes.species;

        // construct the text for description with TextContent
        const whaleText =
            "This group is observed by <i>{obs_method}</i> on " + (new Date(whaleDate)).toLocaleDateString();
        const textElement = new TextContent({
            text: whaleText
        });

        // construct the MediaContent based on whale species
        let activeIndex = 0;
        whaleMediaInfo.forEach((el, index) => {
            const whaleMediaTitle = el.title.toLowerCase().replace(/'/g, "");
            if (whaleMediaTitle.includes(whaleType.toLowerCase())) {
                activeIndex = index;
            };
        })
        const whaleMediaElement = new MediaContent({
            mediaInfos: whaleMediaInfo,
            activeMediaInfoIndex: activeIndex
        });
        return [textElement, whaleMediaElement];
    }

In your case, you can just create an ImageMediaInfo per feature (if you only want one image and not a few as shown above).

Depending on how many features you have, it may be better/easier to enable attachments on your data and use AttachementsContent to display those images if possible. That way the images are stored on the service itself and not generated client-side.

[АртурМухаметзянов]

Hello!

I have a similar problem, but it is more likely due to a lack of understanding of how to set different URLs for different lines.
There are more than 900 positions in my table, each of which needs its own photo, I have my own photos, but even by setting test URLs I was only able to set one image for all rows. How to make pictures individual?
How can I download them from my computer?

Thank you very much..