Home Forums Product Support Novella Photos in iOS not working properly

Tagged: , , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #3753
    Cody Pope
    Participant

    Not sure what is going on, but the majority of my photos (header photo on post and on menu page, parallax gallery photos, and some of the regular photos) are not appearing in iOS Chrome or Safari. The parallax gallery photos are “zoomed in,” for lack of a better description. The header photo is missing. And a few other photos are missing/broken. The site is here: https://countingthedead.com/2014/08/23/counting-the-dead/

    Any advice?

    #3781
    Jenny @ Aesop
    Keymaster

    Hi Cody.

    First, you need to remove this bit of CSS from the theme file and put it in an external plugin like Simple Custom CSS. You should never edit core files as your changes will be overwritten on theme updates.

    
    .novella-entry .novella-entry-mast .novella-entry-mast-img:after {
        opacity: .6;
    }
    

    Second, while using the Chrome emulator for iOS (4/5), the images are appearing for me. Is it possible that a phone setting or perhaps a server outage was causing the images to not display?

    #3798
    Cody Pope
    Participant

    Hey Jenny!,

    Thanks, just being a little sloppy with the opacity change CSS. But in any event, .6 is the default value, and with it removed I’m getting the same picture errors. I’m aware that custom CSS is overridden by theme updates.

    Header Image:
    I’ve modified the image in the header by uploading a much smaller version, and got it to display properly in iOS but now it is “broken” in the desktop version. It’s calling on the 1200×1250 image for the header, essentially oversizing the image and not allowing it to be wide enough. The header image should be a wide image in the desktop version, and not be calling the 1200×1250 image. The original image is here, and I prefer that the header called upon an image of this or bigger (I had to downsize ounce already) in the desktop version.

    Stacked Parallax Gallery Broken:
    These are still completely broken in iOS despite multiple attempts at updating them. I’ve tested the site now on iPads, multiple versions of iPhones, and using the emulator in Xcode, and I get the same error in every case. I suspect the site is calling the wrong image sizes in iOS here as well since I’m using high-res images by default, but I’m not sure.
    First Parallax Image on Desktop Computer (functional)
    First Parallax Image on Desktop Computer (functional)

    First Parallax Image on Safari emulator (broken)
    First Parallax Image on Safari emulator (broken)

    First Parallax Image on Chrome on iPad (broken)
    First Parallax Image on Chrome on iPad (broken)

    Grid Gallery Broken:
    In order to fix this I had to limit the sizes of my photos. Anything wider than about 3000 px breaks the iOS version.

    • This reply was modified 7 years, 3 months ago by Cody Pope.
    #3800
    Cody Pope
    Participant

    Minor update, increasing the size of the header image makes it even worse, and it still calls on the 1200px width image (in this case a https://countingthedead.com/wp-content/uploads/2014/08/eye-big-1200×2035.jpg ). So it seems the header image is limited to 1200px in width no matter what?

    #3801
    Cody Pope
    Participant

    Jenny, one more update. Here is what I’m talking about for the header image in case I was unclear:

    Header image on main page (Story list page or “Homepage”)
    Header image on main page.

    Header image on story page
    Header image on story page
    So both the header images are limited to 1200px. However, the story page grabs the cropped tallest image by default. And, the mainpage grabs the downsized image by default. In any event, it seems odd that the header image would be limited to only 1200px, since it will be oversized and grainy on most computers.

    #3807
    Jenny @ Aesop
    Keymaster

    Hi Cody. Thanks for your replies.

    Header Image:
    The header image comes from the featured image box in each post. WordPress generally associates posts and featured images in the database with some behind the scenes IDs. What I would recommend is editing the post, remove the featured image that’s there, then choose a new featured image, and publish the post. Both the grid image and the post image will pull from this featured image and adjust its size to fit as necessary. Let me know if that fixes the issue.

    Parallax Issue:
    This is how my emulator displays the first parallax image for iPad 3/4 on Safari: https://awesomescreenshot.com/08f3dmccbf I don’t see a Chrome on iPad option in my list but it’s still odd why you are seeing something different than I. Have you tried clearing your browser cache? Are you using a WordPress caching plugin?

    #3808
    Cody Pope
    Participant

    Hey thanks!

    First, for the header image, WP/Novella is always choosing the tallest 1200px width image. I’ve deleted and resized the image and re-uploaded and removed it from post many times. No matter what, WP generates a 1200px image (usually by centering and cropping, with the default height of the original image) and uses this image no matter what the screen resolution. I can see the images that WordPress is generating in the FTP, and you should be able to see here: https://countingthedead.com/wp-content/uploads/2014/08/. If you scroll through that list you’ll see that aside from the native originals, WP/Novella are not producing images large than ~1250px. The only solution I’ve found is to make the header image 1200px in width before uploading it. Again, either WP or Novella are purposefully limiting the width of the header image to 1200px…

    For the Parallax Issue, I’d see if you can get on a native iOS device and test the page. I’ve got no caching plugin installed. I also have cleared the cache on four iOS devices (two iPads, and two iPhones) with the same result in Chrome and Safari. I also get the same error when I use the Mac native emulator in OSX Mavericks (Xcode). The emulator clears the internal cache in each restart. If you can, please test it on a native iOS device and see if you get the error, and get back to me.

    #3818
    Jenny @ Aesop
    Keymaster

    Heya Cody!

    After some Google searching, it looks like the 1200px value is set by WordPress. I did find a post that shows you how to alter the featured image size. You can read more about it here: https://colorlib.com/wp/forums/topic/featured-image-not-resizing-past-1200px/. I hope that helps! You may also be able to find a WordPress plugin to add/edit featured image sizes as well at https://wordpress.org/plugins/.

    Unfortunately I don’t have any iOS devices to test on – all Android here. 🙂 I’ll see if Nick has access to one or see if I can figure something out and get back to you.

    #3822
    Jenny @ Aesop
    Keymaster

    Hi Cody! Thanks for your patience while researching this a bit.

    After speaking with Nick, he believes it is some sort of bug that is specific to iOS devices and possibly retina related. This is quite a unique bug but we will get it fixed, rest assured. Keep an eye out for a Novella update. Reviewing the changelog before you update will mention if an iOS fix was added.

    I apologize for any inconvenience this issue has caused. We’ll get it fixed up soon!

    #3842
    Cody Pope
    Participant

    Jenny thanks for the help on this! I’ll look forward to an update. From what I’ve gathered, it has something to do with background-size: cover often not working correctly in iOS. If I find a solution before the update, I’ll let you guys know.

    #3844
    Jenny @ Aesop
    Keymaster

    That would be great Cody, thanks!

    #3877
    Cody Pope
    Participant

    Jenny!,

    I hope all is well! I was able to fix the iOS parallax image problem by adding this to the CSS:

    .aesop-stacked-gallery-wrap .aesop-stacked-img {
      background-attachment: scroll;
    }

    I haven’t tested it on an Android device, if you want to make sure for me that it didn’t break that mobile version. This solution works in Chrome and Safari on both iPads and iPhones with up-to-date software. I haven’t tested it on non-retina device, however.

    #3878
    Jenny @ Aesop
    Keymaster

    Hi Cody.

    I visited your site on my Android device. The images are not appearing pixelated (which is good!) but your site is now not displaying properly on Android. Screenshots follow.

    Your site: https://i.imgur.com/20yyVln.png

    My site: https://i.imgur.com/BSK6JnM.jpg

    I’m not sure what you’ve done to alter this but my test site has no CSS changes whatsoever so it is all stock, out-of-the-box.

    If you make some changes, I’ll be happy to test them out. 🙂

    #3880
    Jenny @ Aesop
    Keymaster

    Also, I just noticed that the Novella 1.0.3 update that went out recently includes this fix: “Fixed blurry Stacked Gallery images on iOS”

    #3952
    Cody Pope
    Participant

    Hey Jenny! Thanks! It looks like Nick’s patch was doing more or less the same thing as my fix. In any event, the other oddity you were seeing was a broken iFrame (my fault), that was only up for a few hours. Thanks for all the help on this. You can mark it now as resolved.

    #3967
    Jenny @ Aesop
    Keymaster

    Great Cody! Thanks for letting me know 🙂

    Have a great weekend!

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.