WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Jetpack Gallery Carousel placemant of images (21 posts)

  1. indoctrinated
    Member
    Posted 1 year ago #

    I've recently gotten Jetpack's carousel up and running on my site (example gallery), but the images when displayed are placed more than 550px from the top of the viewport.

    I'm viewing my site in Chromium ( 23.0.1271.97), but the displacement is also reproduced in the mobile version of Firefox.

    I'm wondering what causes this, and whether it's something I need to fix in my theme, or is inherent in Jetpack itself.

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

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Another plugin might be causing the issue. Could you try to deactivate all plugins one by one, and see if one of them conflicts with Jetpack Carousel?

  3. indoctrinated
    Member
    Posted 1 year ago #

    The result persists with all plugins (besides jetpack) disabled.

    I have a screenshot with the debug frame open.

    Edit:

    The selected carousel has a computed style of "top: 573px;"
    <div class="jp-carousel-slide selected" style="position: relative; left: 0px; width: 1023px; height: 767px; top: 573.8249999999999px; -webkit-transform: translate3d(441px, 0, 0);"><img src="http://guiltyxindoc.com/media/P1011355.jpg"></div>

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    When switching to a different theme like Twenty Twelve, do you still see the extra margin?

  5. indoctrinated
    Member
    Posted 1 year ago #

    No, it is not replicated in TwentyTwelve.

    But my theme does not have any rules that should override the styling of the carousel.

  6. indoctrinated
    Member
    Posted 1 year ago #

    Any idea why Jetpack is creating an inline top offset that is so large? I can't figure out what sets off this behavior. The style is inline, so there is no way for me to override it, either (without hacking through JS of course).

    The only things I can think of are:
    1) An element that affects the slide's flow (which there shouldn't be)
    or
    2) Something is tricking the javascript into thinking the viewport is larger than it really is.
    3) Aliens.

  7. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Although the Alien theory makes sense, I'd vote for some extra Javascript in your theme. I looked around but couldn't find anything that could cause the problem.

    I'll ask someone else to have a look, and we'll keep you posted. In the meantime, could you try to delete Jetpack and reinstall it, just in case the issue might be caused by some incomplete Jetpack files?

  8. indoctrinated
    Member
    Posted 1 year ago #

    I commented out any queued scripts (there was only one) in my functions.php. I also commented out the enqueue of jQuery in header.php.

    I just tried a reinstall of the Jetpack plugin, and no dice.

  9. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    It seems we found a solution!

    Since you didn't set any doctype in the HTML, when javascript looks for the window height, it returns the document height, which is much taller and causes top to get set to a much higher value.

    Could you add a doctype to your theme?

    <!DOCTYPE html>

  10. catBreeze
    Member
    Posted 1 year ago #

    Can you tell me how to change the width of the tiled gallery and slideshow? Would like to increase it to 100%.Thanks.

  11. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    The Galleries will use the entire width of your content area if you define a $content_width value for your theme.

    Try adding the following code to your theme's functions.php file:

    if ( ! isset( $content_width ) )
        $content_width = 600;

    Of course, you will have to change that value to match your own theme's content width.

  12. indoctrinated
    Member
    Posted 1 year ago #

    It seems we found a solution!

    Since you didn't set any doctype in the HTML, when javascript looks for the window height, it returns the document height, which is much taller and causes top to get set to a much higher value.
    Could you add a doctype to your theme?
    <!DOCTYPE html>

    Thanks, Jeremy. I feel silly.

    Any idea why the images in carousel are larger when viewing from a tablet in portrait mode?

    It doesnt affect use too much, but I've been wondering why.

    And are there any resources for theme developers to make sure their themes support Jetpack functionality?

    Regards.

  13. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Any idea why the images in carousel are larger when viewing from a tablet in portrait mode?

    @indoctrinated Would you mind posting a link to a screenshot here, so I can have a look?

    And are there any resources for theme developers to make sure their themes support Jetpack functionality?

    You can find some information and help about each module here:
    http://jetpack.me/support/

  14. indoctrinated
    Member
    Posted 1 year ago #

    The landscape doesn't fill like the portrait does, and gives the impression of being larger.

  15. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Thanks for the screenshots, it helps.
    Since the Carousel is built to show the description below the image, your images will always be resized to give some space to the description. If you were to make the images bigger in the landscape view, the title would disappear.

  16. Gunderdog0717
    Member
    Posted 1 year ago #

    I'm having difficulty with the Jetpack Carousel only when galleries are inserted on pages, not posts. It works perfectly on my posts. But on pages the images are not sized into the standard tile format and are in a variety of sizes. There is an example at the bottom of this page. http://prtcdressage.com/?page_id=2 In addition, when I am creating the gallery, I only have 2 options, default and slideshow, not "tiles" "circles" etc. And on the WP Dashboard Settings: Media page, the only image carousel options I have are background color and whether or not to show metadata, but cannot "set to cool mosaic tiles" as the information in my jetpack carousel settings say I should. Any suggestions? Thanks very much.

  17. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    @Gunderdog0717 Could you check that the Tiled Galleries module is correctly activated on your site?

    If it is, and if the Gallery type options still do not appear, could you try deactivating all plugins that may change the default behaviour of the WordPress galleries?

  18. Gunderdog0717
    Member
    Posted 1 year ago #

    Thanks - turns out that was part of the problem. I activated Tiled Galleries and then had the options for square, circles, etc. I deactivated all other image-related plug-ins. I also discovered that I needed to upload unaltered images for use in the carousel. If I pulled images out of the library that had been resized at any point previously on the site, those images appeared in their original proportions, not the square thumbnail format. These things together resolved the issue. Thanks again.

  19. mchebib
    Member
    Posted 1 year ago #

    Hi Jeremy & WP community.

    My website's layout is horizontal, where viewers would always scroll right for more content. Galleries are big part of it as it is an architectural website. This introduction is important because I am looking for a fix for the first issue, even better the first and second issues.

    First issue:
    When I generate the gallery (Tiled/Mosaic) and click on the image, it opens the light box at left side of the page, meaning the visitor must scroll all the way to the left to discover that the image was opened there. I tried hardly to fix using CSS. I could do that through setting some element positions to FIXED. However, when trying on mobiles devices (iPad, Android phones, iPhones) it fills the screen letting no way to exit the slide show :(

    Second issue:
    Is there a way to make the gallery carousel mobile friendly where users can simply swipe the images to keep the same experience of the website itself (especially on mobile devices - where my audience most use)?

    Thank you for helping me out. I have been researching and trying to fix for almost a week now.

    Here is a link to one gallery that I will keep as tiled for now: http://ckarchitecture.com/portfolio/architectural/view/1030/ines-patisserie-dubai/

    =)

  20. mchebib
    Member
    Posted 1 year ago #

    I fixed it for now. Thanks =)

  21. webjac
    Member
    Posted 1 year ago #

    Thanks Jeremy Herve you saved my day twice today!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic