Display problems with Jetpack

  • Resolved ThomasFrick

    (@thomasfrick)


    11 years, 5 months ago

    Hello everybody,

    Jetpack is a very neat plugin, I didn’t found better free tiled gallery plugin in here.

    But I have some display problems on my personal website (work in progress):

    http://www.xaelgraphics.com/

    #1 You can see there is a little white space between each caption. I can’t find how to remove it…Tried a lot of things, but nothing to do. It’s not even a margin or a padding…

    #2 Some of my pictures are scaled up, sometimes, one picture take the FULL WIDTH of the page, that breaks the pixel ratio… Sometimes, i would like to have more pictures on the same line (not only 2 or 3, but 4 or 5, do you see what I mean?) How could I set up a maximum width for each pictures?

    #3 I tried to add a scaled transition, with an overflow. On hover, I would like my pictures to be displayed OVER evrithing else…I can’t find out how to make this.

    Sorry for my spelling, I’m not english. And I’m learning CSS3, not always easy 🙂

    Thank you in advance!

    https://wordpress.org/plugins/jetpack/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    11 years, 4 months ago

    You can see there is a little white space between each caption.

    It seems you’ve managed to fix this already, since I don’t see that white space:
    http://i.wpne.ws/YOpo

    #2 Some of my pictures are scaled up

    if you use the Tiled Gallery type, Jetpack automatically calculates the number of columns based on your theme’s content width, and on the number and size of your images.
    For example, if you were to upload more portrait images, you’d get more columns than if you were to use landscape pictures.

    You can’t consequently change the number of columns nor set up a maximum width for each picture, unless you use the “Thumbnail Grid” gallery type.
    Rest assured, though: pictures are not upscaled, so they’ll never be larger than the original image you uploaded.

    I tried to add a scaled transition, with an overflow. On hover, I would like my pictures to be displayed OVER evrithing else

    Since Jetpack doesn’t offer such option, you’ll need to add some custom CSS to create that hover effect. I’d suggest googling for effects that you like, and then use your browser inspector to test things on your site.

    I hope this helps.

    Thread Starter ThomasFrick

    (@thomasfrick)

    11 years, 4 months ago

    Hello jeremy,

    #1: I managed this by scaling each ” .tiled-gallery .tiled-gallery-item “
    by 1.02, it was the only solution to hide this white space.

    #2 Ok, I understand better. But if you scroll down on my main “concept art page” you’ll be able to see some pictures like the “Rorkal Noir” , “Shell monster” or “Crow Lord”, and you’ll notice they are scaled up, the original size is way smaller than the displayed size 🙂

    #3 I already used custom CSS to display this hover effect. I was a nice transition + scale. Transition worked, scale applied, but the “.tiled-gallery .tiled-gallery-itemimage” was displayed UNDER the other picture lines, and not over it. That was strange, I removed it. I tried to play with Z-index, overflow etc, but couldn’t find a solution.

    Thanks for your fast answer!

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    11 years, 4 months ago

    “Rorkal Noir”‘s original image is 733x1000px, and is resized to a 620x847px image in my browser:
    http://i.wpne.ws/YPek

    Could you show me what you see on your end? You can use http://snag.gy/ to post your screenshots here.

    I already used custom CSS to display this hover effect.

    I’m no CSS expert I’m afraid, and this is not related to Jetpack itself, so I suggest posting in the Themes & Templates for help:
    https://wordpress.org/support/forum/themes-and-templates

    If you post the CSS you tried to use, volunteers might be able to test it and help you tweak it.

    Thread Starter ThomasFrick

    (@thomasfrick)

    11 years, 4 months ago

    Ok, I’ve not the same size.

    #1 I disabled the scale “hack” I used to remove the white space between tiles, to show you.
    This space is not CSS generated, it seems you have a javascript line which adds some pixel to each tiled.img div…It’d be so cool if we could control/remove the size of this space with CSS only. Do you plan to change it?

    #2 Not the same thing here: I use Chrome, last version. When i “inspect” the img,it says it is 933* 1274 px..I took a 1/1 ratio screenshot:

    View post on imgur.com

    Thanks for your help 🙂

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    11 years, 4 months ago

    This space is not CSS generated, it seems you have a javascript line which adds some pixel to each tiled.img div…It’d be so cool if we could control/remove the size of this space with CSS only. Do you plan to change it?

    I don’t think we will. The whole gallery is controlled with Javascript, since each image size is calculated on the fly based on numerous factors (size of the images, orientation, theme’s content width).

    #2 Not the same thing here: I use Chrome, last version. When i “inspect” the img,it says it is 933* 1274 px..I took a 1/1 ratio screenshot:

    Could you show me the details of the browser inspector on your end?

    Thanks!

    Thread Starter ThomasFrick

    (@thomasfrick)

    11 years, 4 months ago

    Hi Jeremy,

    thank you for giving your time, that’s very nice.

    #1 I understand…But it could really improve your plugin, if you added something to control/remove this little space in the options , or somewhere (obviously not in CSS). I guess I’m not the only user who expect that (or maybe am I 🙂 ?)
    Same thing, it’s sad we are forced to set a fixed pixel layout-width in the media settings to allow the generation of the rows, it’s no more responsive 🙂

    #2 Here is a screenshot of the inspector (Chrome)
    https://imgur.com/cgCaoHY

    See, I tried to change the order of some pictures, and the tile gallery scaled up my big artowrk to 1899px * 2682px !
    I guess there is a little issue with your algorythm, same problem with firefox and safari.
    You can see this on my site, if you scroll down to my monster gallery
    http://www.xaelgraphics.com/

    I really appreciate your help, keep up the good work, Jeremy 🙂

    Thomas F.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    11 years, 4 months ago

    Same thing, it’s sad we are forced to set a fixed pixel layout-width in the media settings to allow the generation of the rows, it’s no more responsive 🙂

    The gallery will respect your theme’s $content_width value if you set one (ref), and if your theme is responsive, the gallery will be responsive as well.

    See, I tried to change the order of some pictures, and the tile gallery scaled up my big artowrk to 1899px * 2682px !

    I can’t reproduce, but that’s most likely because my monitor is not big enough. I’ll ask our Javascript expert to take a look, and I’ll get back to you as soon as we can address the issue.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Display problems with Jetpack’ is closed to new replies.