WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Responsive rendering on Jetpack Gallery (14 posts)

  1. roseba
    Member
    Posted 8 months ago #

    In testing rendering of the site I'm building I noticed odd behavior in the Jetpack Gallery, Carousel view.

    On a large viewport (1200+), the title will display on the left side, while the caption will be in the center right below the image. The title is lower on the page than the caption. I would have been happy to have a different choice about this placement.

    However, when I view this on an iphone4, the title is placed higher on the page. The caption doesn't display at all because it out of viewport and you can't scroll down to see the rest.

    In a few other viewports I saw similar behavior where the title and the captions switch relative position on the page.

    When moving the viewport in my browser here - http://arielshallit.com/wp/#jp-carousel-898, the placement of both title and caption seems to float without a known relationship to the placement of the photo. Is there something I'm missing here?

    Wouldn't it make sense to have title and caption stacked and in the center of the page below the image?

    I tested this on Twenty Thirteen to make sure it wasn't an issue with my theme. The images I serve up are various sizes, some landscape and some portrait.

    As an aside, why would the font-face not cascade and use the same font as the rest of the theme requiring a function to a new stylesheet simply to change it from sans-serif?

    http://wordpress.org/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    Thanks for the report. We've made quite a lot of changes to the Carousel module in the past few days. Would you mind trying to install Jetpack's development version, and let me know if you still experience these issues?

    Thanks!

  3. roseba
    Member
    Posted 8 months ago #

    I installed the alpha.

    Linked are screencaps from my phone. 329x420 - https://www.dropbox.com/sh/4bmvagmb3d0f4rt/J7H1iS31Cf

    The first photo is of flowers capped in portrait. Notice the title wraps and does not display within the viewport? (You can't see the caption at all.)

    If you change the orientation of the phone, the photos shrinks leaving a lot of blackspace around it, but the title doesn't even display.

    Notice in landscape the image shrinks down and places itself in the middle of the screen. It leaves a lot of blackspace around it, but the title doesn't appear in spite of the image shrinking.

    The third is a portrait with a short title. In this viewport you can just barely see the top of the letters for the caption. You can scroll down and see the full title, the caption and the view full size option, but it only shows on scroll. Shouldn't it reduce to fit the viewport in this instance?

    As far as the rest of the Jetpack, I'm happy to report any findings that I notice although I'm only using a few components from it.

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    I think these caption issues are related to this bug that was introduced in WordPress 3.7, and will be fixed in 3.7.1.

    Could you try to add the following constant to your site's wp-config.php file: according to the ticket it should fix the issue until the new version of WordPress is released:

    define('SCRIPT_DEBUG', true);

    Let me know if it helps.

  5. roseba
    Member
    Posted 8 months ago #

    I cleared all my caches; pages and module caches.

    I'm afraid I see no difference. At 768x1280 it renders OK but all the text ends up out of viewport (below the screen). On 600 and below, the title text wraps like the screenshot. I retested this again using Twenty Thirteen. The results are the same.

  6. roseba
    Member
    Posted 8 months ago #

    FYI. The development version of Jetpack adds a new menu item in the administrative interface between "Pages" and "Comments" called "Food Menus". A new content type?

  7. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    WordPress 3.7.1 was released last night and includes fix for the caption issue. Do you still see the bug after updating?

    FYI. The development version of Jetpack adds a new menu item in the administrative interface between "Pages" and "Comments" called "Food Menus". A new content type?

    Jetpack does indeed include a few Custom Post Types, that only get activated when you use a theme that requires it. But that development version includes a bug, as you realized, and the Custom Post Type is always activated. It will be fixed during our tests.

  8. roseba
    Member
    Posted 8 months ago #

    I uploaded the new version. A little tricky because my WP install believed it was "already" installed. I had to fix that through FTP.

    Anyway, I unfortunately don't see any change. The appearance is adequate for desktop but seems to breakdown below 600 or so. I don't have endless testing tools and the tool I use isn't an exact replication, but I can confirm that it appears like this in both iPhone4 and the Galaxy S4.

    The screenshot included is an emulation of the Google Nexus Tablet (603x933) which is this viewport and lower it breakdown. So everything below it wraps.
    https://dl.dropboxusercontent.com/u/14962511/carousel-wrap.jpg

    At desktop if you use MagiCSS live editor as a Chrome plugin, you can see the background using this code:

    .jp-carousel-titleanddesc {
    background-color: pink;}
    /*complely collapses at smaller viewports*/
    
    .jp-carousel-titleanddesc-title {
    background-color:yellow;}
    
    .jp-carousel-titleanddesc p{
    	color: orange;
    }

    I use colors so I can clearly see what I'm working it.

    Then reduce your browser size and watch what happens to the pink background. It collapses to 0px.

  9. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    Could you try to disable the Minify module in your caching plugin, and let me know if it helps?

    If you still experience issues, it might also be worth switching to one of the default themes for a few minutes, to make sure that the problem is not caused by some theme styles bleeding out into the Carousel view.

    Thanks!

  10. roseba
    Member
    Posted 8 months ago #

    It appears to be working, just taking a long time to populate onto difference devices. I have confirmation on a Samsung Galaxy4, Iphone 4 and the Galaxy Note.

    Thank you for your help and your patience!

  11. roseba
    Member
    Posted 8 months ago #

    I hate to be the barer of bad news or a nudge, but unfortunately this is still buggy.

    These screen shots are using Twenty Thirteen with no modifications at all on the iphone4s. The default theme on one of the most common mobile phones and caching completely deactivated. You don't get more ubiquitous than that. It's still buggy. :(

    Valentine2 uses title and description.
    https://www.dropbox.com/sh/4bmvagmb3d0f4rt/J7H1iS31Cf#lh:null-valentine2.jpg

    Flowers in the field uses title and caption. I scrolled on the page so you can see what is happening.
    https://www.dropbox.com/sh/4bmvagmb3d0f4rt/J7H1iS31Cf#lh:null-flowers-field.jpg

    I understand how tricky this is to get working.

  12. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    The screenshots do not seem to be available anymore. Could you upload them again, so I can take a look?

    Thanks!

  13. roseba
    Member
    Posted 8 months ago #

    Sorry. I had the retrieve the images from my recycle bin and reupload them.

    https://dl.dropboxusercontent.com/u/14962511/flowers-field.jpg
    https://dl.dropboxusercontent.com/u/14962511/carousel-wrap.jpg
    https://dl.dropboxusercontent.com/u/14962511/valentine2.jpg

    Since the update, I still occassionally see the wrapping where the title and description is 75px wide, forcing it to wrap.

    The issue where it is cut off at the bottom of the iphone4 viewport is still evident. I don't know what happens on the 5 since I don't own that hardware, and it's hard to simulate that behavior on an emulator.

  14. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 8 months ago #

    Thanks! I was able to reproduce the issue on one of my test sites, with only Twenty Thirteen installed.
    We'll take a look at this and see how we can address the issue. I'll post again here when I have some news.

    Thanks again for the report!

Reply

You must log in to post.

About this Plugin

About this Topic