Tumblr widget not showing the latest posts/photos

[Joey_J]

Hi @Max, let me ask one question. On my Tumblr widget (https://2a12030814ee40459ee2f81d8cc54fa8.elf.site), when I click the last two photos (29th [floating shrine photo] and 30th [bridge photo]), the pop-up shows the third last image (28th). I’ve tested on a few desktop browsers (Firefox, Edge), but showing the same behavior. Would you mind kinldy checking and fixing? Thank you in advance.

[Max]

Hi there, @Joey_J

Thanks for bringing this to our attention!

I’ve passed the issue on to the devs and will update you once it’s fixed

[Max]

Hi there, @Joey_J

The issue occurred because of the styles used in the Custom CSS field, We’ve fixed it using this script in the Custom JS field on the Settings tab:

const WIDGET_ID = '2a120308-14ee-4045-9ee2-f81d8cc54fa8';
const feed = document.querySelector(`.elfsight-app-${WIDGET_ID}`);

feed?.addEventListener('click', (e) => {
  const card = e.target.closest('[class*="CardContainer-sc"]');
  if (!card) return;

  const postLink = card.querySelector(
    '[class*="SourceLink__StyledLink-sc"]'
  )?.href;
  if (!postLink) return;

  setTimeout(() => {
    const postInPopup = document.querySelector(
      `[class*="${WIDGET_ID}"] [class*="Feed__PopupPost-sc"]:has([href="${postLink}"])`
    );

    postInPopup?.scrollIntoView();
  }, 500);
});

Please check your widget and let me know if it’s fine now

[Joey_J]

Thank you @Max for your help. I’ve tested it, but the result is inconsistent — it works properly only about half the time. Any chance to fully fix? By the way, you mentioned this might be “because of the styles used in the Custom CSS field.” Could you please specify which style in particular is causing the issue?

[Max]

Hi there, @Joey_J

Ah, I am so sorry about that! I see that the issue occurred again and passed it to the devs for further investigation. I’ll keep you updated

Here is the style causing this issue:

.global-styles,
[class*="Feed__PopupPost"]:not(:nth-child(-n+30)),
[class*="Feed__PopupLoader"] {
  display: none;
}

[Joey_J]

Thanks for your help! By the way, my other Tumblr widget (https://d15eeb3eea8d4583bf22f501bcfff939.elf.site) doesn’t use this mentioned style, but the same thing is happening, too (by clicking the last two photos, the pop-up shows the third last image), so probably the style in question isn’t the cause? Thank you again.

[Max]

Thanks for sharing this insight!

I’ve passed this info on to the devs and will get back to you once I have any news

[Joey_J]

Hi @Max, do you have any update on this? Thank you in advance for your advice!

[Max]

Hi there, @Joey_J

Apologies for the long wait!

Our devs are still investigating the issue. I really hope they’ll be able to resolve it soon and I’ll update you as soon as I have more news

[Max]

Hi there, @Joey_J

Thank you for waiting!

Our devs investigated this behavior and here is what’s been found. If the images haven’t yet been cached by the browser, and we click on one of the latest posts, the popup opens like this:

When clicking on the last post, the page scrolls to it, but the post still appears at the bottom of the screen because of the popup positioning. Then, once the images load, it shifts downward below the viewport.

There are two possible ways to fix this issue:

1. Switch to the Classic popup style, which reliably opens the correct post without any jumping.

2. Use this CSS code to reserve space for the image upfront, which also effectively fixes the issue:

[class*="Skeleton__StyledSkeleton-sc"] {
  height: 500px;
}

Please try it out and let me know if the suggested solutions helped

[Joey_J]

Thank you, Max, for your help! I’ve tried both options, and the first one works perfectly. The second option (CSS tweak) isn’t quite working 100% of the time (it’s hit and miss, not just the last two photos, but happening with any photo). Since I still prefer the “Feed” pop-up style, would you mind kindly taking another look? Thank you in advance.

[Max]

Got your point!

Could you please test the widget with the CSS code applied in your browser’s incognito mode and let me know if the issue still persists?

[Joey_J]

Thanks. I’ve tried with Firefox (private window), but it still persists.

[Max]

Thanks! I’ll discuss it with the devs and will get back to you with an update

[Joey_J]

Thank you for your help! By the way, let me check one more thing. When sorted by “Random”, photos are supposed to be displayed in a random order each time the page is refreshed? If so, it doesn’t seem like working (I’m referring to Top 40 Photo Gallery [LASTLIGHTSNET-BEST]), as the order is same every time I reload the page. Thank you in advance for looking into it.

[Max]

Ah, I see the issue, and I am so sorry about that!

Our devs will check it too. I’ll keep you updated

[Max]

Hi there, @Joey_J

Apologies for the delayed response!

The only solution to fix the issue with the popup is to limit the image height using this CSS code:

[class*="Feed__FeedPost-sc"] [class*="CardMediaBlock__MediaBlock-sc"],
[class*="Feed__FeedPost-sc"] [class*="Skeleton__StyledSkeleton-sc"] {
  height: 600px;
}

[class*="Feed__FeedPost-sc"] [class*="CardMediaBlock__MediaBlock-sc"] img {
  object-fit: cover;
}

Please try it out and let me know if it worked.

Regarding the random sorting, the order changes only once (when enabling the Random sorting), but after that the post order will remain the same. So, it won’t change after each page load.

Let me know if this explains things or if you have any questions left

[Joey_J]

No worries, thank you for your kind help! Yes, the CSS code works (I needed to change the property of “object-fit“ to “contain“, though, to preserve the aspect ratio of photos). Also, noted regarding the random order. I don’t have any other questions for now. Thank you!

[Max]

Great, you’re always welcome