Some images not showing up in hub site

594
9
09-26-2019 12:39 PM
Trippetoe
Occasional Contributor III

About 2-3 days ago, some images stopped showing up on our Hub site.  In particular, no images that are on our self-styled-cards appear in "view" mode; in "edit" mode only about 1/3 of images appear. Other images - like background images for a row - appear in both "edit" and "view" mode.  In all cases, the images are hosted on a different server, i.e. an image URL is set (not uploaded to hub).

Any thought about what's going on? I noticed in the Hub change log, you guys released a new feature intended to optimize image loading. Timing wise, that change and some of our images no longer loading seem related.

Thank you.

Tags (2)
0 Kudos
9 Replies
GrahamHudgins
Esri Regular Contributor

Can you link us your site? if it's private, do you mind giving us access

Trippetoe
Occasional Contributor III

Hey Graham Hudgins

We are still having many problems with images in our Hub site.  We have removed all absolute positioning from our custom css. that worked for a few images but did not for many as well. 

Here's some example - in the screen cap below the hub page is in Edit mode. The image for card 1 is completely missing. we have not touched the card during this edit 'session'.  The image for Card 2 is present - it shows up as soon as we touch the edit button (the gear) for that card.  Once we close the gear, the image stays visible (Card 3).  The image will also stay visible after tapping the 'Save' button for the page.  However, if i tap the View button for the page, and the page reloads, none of the images are visible (just like Card 1).

Hub images not always showing

Here's the relevant code for the card:

.doc-link--container {
   width: calc(100% - 30px);
   max-width: 275px;
   margin: 0 auto;
   margin-bottom: 30px;
   margin-top: 100px;
   height: 325px;
   background-color: white;
   border-radius: 5px;
   box-shadow: -1px 3px 7px #888888;
   overflow: hidden;
}
.doc-link--header {
   width: 100%;
   height: 200px;
   overflow: hidden;
   border-radius: 5px 5px 0px 0px;
   background-color: #dddddd;
}

.doc-link--img {
   max-width: 275px;
}

<div class="doc-link--container">
 <div class="doc-link--header">
    <img class="doc-link--img" src="https://<url>/assets/photos/transportation-doc-link-1.PNG">
 </div> ....

0 Kudos
GrahamHudgins
Esri Regular Contributor

Hard for me to guess at what's happening here without a login (but i'll try all the same)

 - Images disappearing....are you using image URLs that contain tokens to the ArcGIS Platform? Anything meaningful happening about those images in the console?

 - Saves not showing up on your site...it can take a few seconds for a save to show up on PUBLIC sites. Is this site public?

Your code "works" for me but I suspect it's not a 1:1 representation

0 Kudos
Trippetoe
Occasional Contributor III

Thanks for taking a guess even though you don't have access to the site

None of our images require a token. so that's not it. And the site is not yet public; its limited to our Organization

we are in the process of adding height and width to every image and that seems to be clearing up some of the problems. we'll keep plugging away.

0 Kudos
Trippetoe
Occasional Contributor III

Hey Graham,

The site is private. What user name would you like me to add so you can view the site?  feel free to ping me directly.

Ah, and thanks for your super-fast response!

GrahamHudgins
Esri Regular Contributor

edited - any username is fine. please add me at ghudgins@esri.com 

0 Kudos
Trippetoe
Occasional Contributor III

to follow up on the this thread --- 

From an email with Graham 

I see the issue. It looks like absolute positioning isn’t allowing the browser to detect when the user is looking at your image.

 

If you re-work your custom CSS to not use absolute positioning then you should have a workaround. In the meantime, we took a copy of your custom CSS and will see what we can do to detect the user in this situation. Will keep you posted.

 We are going to rework our CSS to see if that solves the problem. I'll report back.

0 Kudos
MichaelVolz
Esteemed Contributor

Thanks for sharing this information about issues with configuring a hub site.

0 Kudos
MelissaBrooks
Occasional Contributor

.. following, we had similar issues, our images stored on our server would not show up, one will even not show up or even be updated unless the code contains text, very weird.

ie I have to use

<p class="text-center" style="padding-top:25px;"><a target="_blank" href="https://data.linz.govt.nz/layer/95525-new-plymouth-010m-urban-aerial-photos-2017/"><img height="120" src="https://atlas.npdc.govt.nz/images/aerialicon.png"></a><span style="color: rgb(230, 227, 227); background-color: initial;">a</span></p>

and not the code below as I'd like, as the code wont stick unless there is some text (hence the "a" with the same colour as our sites background!)

<p class="text-center" style="padding-top:25px;"><a target="_blank" href="https://data.linz.govt.nz/layer/95525-new-plymouth-010m-urban-aerial-photos-2017/"><img height="120" src="https://atlas.npdc.govt.nz/images/aerialicon.png"></a></p>

0 Kudos