TVTopShelfCarouselItem title display on top of image - tvos

I have implemented a tvOS 13 fullscreen top shelf extension with TVTopShelfCarouselItems that have a imageURL and a previewVideoURL set.
The item's title however is only displayed when the video is playing, not while the image is shown. It doesn't matter if the items have or don't have a previewVideoURL set.
The behaviour is different in Apple's TV app that show's the title also on top of the image (for movies that don't have the title in the poster).
Is there a way to achieve this behaviour?

After further investigation of Apple's TV app behaviour, it seems that Apple works around this issue by embedding the title in the image.
Because the title on top of the image is also visible when the information overlay is hidden.
I filled an enhancement request feedback with Apple.

Related

blurry video thumbnails in shopify theme

I've an issue with blurry video thumbnails with a shopify theme (Flex from Out of the Sandbox). The image in the middle is a blurry video thumbnail, whereas the top and bottom one are regular sharp product images. Link to sample product.
I tested the content within different environments:
The video itself is sharp, which is visible when it's being streamed
-> video is not the issue
The video thumbnail is sharp on another theme (Debut from Shopify)
-> Shopify CDN is not the issue, must be the theme I am using
I also uploaded a cover jpeg within Shopify admin which didn't change anything.
I couldn't identify the problem by inspecting with the browser dev tools. Can somebody give me a hint how to fix this?
In your liquid code the image URL filter is set to '300x300' (see below image)
You may just remove this or set it to 1024x1024 for better image.
Hope this info will help you.
Best of luck

Image on website not displaying on iOS devices

I have a website where I also run a blog at http://climatecanchange.com/blog/ and the blogs are stored in a mysql database and each is matched to a unique image in one folder. I use php to get the image filename and other data to display all the blogs on my page.
For blog #2, my image is not showing on any iOS device (Chrome and Safari) though it can be seen on computers and Google Pixel too.
The link is http://climatecanchange.com/blog/blogs.php?id=2. When I open the image in a new tab it just shows white space. But, when I try to save it (on Chrome), it saves the actual image to my camera roll.
Can someone please help me with this? Why is there a problem with displaying that specific image?
The image format is Web/P which appears not to be supported in Safari right now
https://caniuse.com/#feat=webp

facebook messenger og:image cropping

I have some issues with my website image preview when I share my website as private message on Facebook (in messenger not Facebook post). In my html homepage I use og:image and I tested with two different image (obviously not in the same time) size 200x200 and 600x315 (I also try by specify the width and height with og:image:width and og:image:height but nothing change).
When I share the website link (with 200x200 image) on facebook messenger (as private message in chat to a friend) I obtain on desktop a preview (in the small chat on bottom or directly in messenger) with my website description on the right and my website image not cropped on the left and this is correct due to using an image small than 600x315. On messenger mobile instead I see the image cropped on top and the description on bottom and this bad.
Then I try, as recommend by facebook, to use an image 600x315 and in this case the result got worse because on desktop I see in the small chat the website description on the right and the image cropped on the left and If I open messenger I see a large image not cropped on top and the description on bottom. On messenger mobile instead I see the image cropped on top and the description on bottom.

Img alt on mobile screen

I have got some pictures on my site as a summary, so when the user hovers the image, it shows the alt message as normal.
When it cames to a touch screen, if I tap over the image it doesn't show anything and the user can`t know what the image means.
How could i work around to show a text when the user taps over the image on a touch screen?
The mobile screen (precisely on touchscreen device) not support hover action. And hover action will works if you long touch on your device.
Read this article for better comprehension.

Why do my webpage images appear sideways in my HTML but correct when in full screen?

If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.