Jump to content

brandon

Circle Member
  • Posts

    2,215
  • Joined

  • Last visited

  • Days Won

    29

Posts posted by brandon

  1. On that page, it looks to me like captions are showing, not filenames @gabmartinez7. It seems you got that sorted.

    As to the overlapping of the description over the image, that's a matter of adjusting the CSS. I'd use a combination of font-size, line-height, and flexbox to get things looking better. I might also override the overall height of that gallery (currently set at 75vh).

    If that doesn't give you enough to get things the way you want, send me a direct message.

     

     

    image.png

  2. Hi @JanelleNine.

    Here's a bit of code you can use to get you started. If you add other galleries to the the site and only want to target this one, you'll want to adapt the CSS a bit.

    .gallery-fullscreen-slideshow {
      height: auto !important;
    }
    .gallery-fullscreen-slideshow-list {
      max-height: 100vh;
    }

    Let me know how it goes for you.

    EDIT 7/22/2020:

    In some cases, for mobile, you may also need something like

    @media screen and (max-width: 767px) {
      .gallery-fullscreen-slideshow[data-height="L"] {
        height: auto !important;
      }
      .gallery-fullscreen-slideshow-item img {
        object-fit: contain !important;
      }
    }

    -Brandon

  3. Ah, sorry about @Charlest93. I forgot you had already sent a link earlier in this post. Also, your English is much better than my French!

    What you want can be accomplished with CSS alone. However, it does require an understanding of it, and being comfortable using your browser's web inspector to identify elements and get them looking like you want.

    I've written some additional CSS you can add that should help you get a start on it. However, while you can certainly add the following CSS after what you already have, it'd be better to review it and edit your existing CSS to minimize overlap.

    @media screen and (max-width: 767px) {
      .gallery-grid-item {
        padding-bottom: 0;
        margin-bottom: 30px;
      }
      .gallery-item-description {
        padding: 0 !important;
        top: 50%;
        transform: translateY(-50%);
        bottom: inherit !important;
        font-size: 1em;
      }
    }

    Let me know how that works for you.

  4. @gabmartinez7: If you're seeing a filename, that is likely because you have not entered description text. See the third bullet point under "JavaScript" in the original answer.

    However, if that's not the cause, then could you provide a link to the page in question?

    @Charlest93: I'm not sure what you mean by "get the same codes". Having said that, I did take another look at the CSS for the "Slideshow" gallery type where thumbnails are displayed, and I realized that things weren't displaying quite right on mobile. So I made a small adjustment. You could try using the updated CSS in my original post. If that doesn't work, can you provide a link to the page in question?

  5. This is an update to let you know that I've added just a couple lines of CSS to fix the issue with the lightbox caption delay/lag issue. The lines are added at the end of the CSS in the original post. They are:

    transition: opacity 0.1s ease-out;
    
    .gallery-lightbox-item[data-in=false] .gallery-item-description {
      opacity: 0;
    }

    Special note to those who mentioned the issue: @kinapark , @IvanOB , @ed.design , @JohnS123

  6. Hi @etgilbert.

    Well, it's been a long time, so I don't recall if I considered or attempted other approaches. But  "how it affected the outcome...", was to create colored boxes behind the images. Perhaps you mean "affected the outcome compared to some other approach" such as using pseudo elements or JavaScript. Or perhaps compared to doing something with absolute positioning and breaking the relationship between the wrapper and the contents (that could work as well). You might even be able to do it with box-shadow or background positioning. There are probably multiple ways to solve this; I suppose the one above is what seemed easiest (or fastest, or most reliable, or most easily modified later) to me at the moment.

  7. @EllieC: You'll need to add both the JavaScript and the CSS components (both parts are required). The JavaScript adds the captions. The CSS styles how they display. In some cases, you can add the JavaScript to a Markdown block on the page in question. That might not work due to how the script is initialized, but you can give it a try.

  8. Hi @goodwincreative. The function receives a string as its only parameter. That means what you pass must be a string, wrapped in quotes. You can then use single quotes inside the string. Like this:

    addGalleryItemDescriptions("section[data-section-id='5e584f84750bff750e72e2a8']");

    Also, consider using the "<>" button in the toolbar when posting code on the forums. That makes it easier to read and check your code (and helps assure that the forum doesn't mess with it in some way when posting).
        
     

  9. Hi @ClareLaLou. Having spent a few minutes poking around, I think that gets a little too complicated, and not something I can do with the time I have. Because Squarespace has it setup so that images are typically matching in height, I'd have to do a bit more study on CSS grids, then test quite a lot to ensure there were no side-effects for the various galleries. So, I'm afraid, there's nothing I can do about it at the moment.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.