Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • October 9, 2019 at 12:00 am #1146305
    webWahine

    Hello
    I’m trying to add an image gallery to a post using default mode to add in images, set to 3 columns and currently full size. It appears that the basic setting of using ‘full size is being ignored.

    The images in the test example are almost all 1920×1440, but the element called #gallery is much smaller than 100% in the single post page (see private page). I tried this, but no luck –

    #gallery-2 {
    width: 100% !important;
}

    So then I tried this –

    #top .gallery .gallery-item {
    margin: 1px 1px 0 0;
    width: 33% !important;
    height: auto !important;
    padding: 0;
}

    One image is portrait so it’s not the same size, and I’d like them to all be consistent, so what code would I use to crop the portrait one, please, assuming it’s an edit to height:auto?

    Also, I’d like to display the image caption before it links to a light box. Thank you in advance :)

    October 9, 2019 at 3:55 am #1146334
    webWahine

    Ok, I’ve found a great option and have fixed this but want to share!

    Instead of the default gallery (very minimal) I used a shortcode to use a masonry gallery instead and have adjusted a bit of css to make it look better, mainly because my client has captions of varying lengths. So all is well and this is done. Thank you :)

    figcaption {
     text-decoration: none;
    font-size: 11px;
    line-height: 14px;
    font-style: italic;
    color: #666 !important;
}

.main_color .container .av-inner-masonry-content {
    background: #ebebeb !important;
	min-height: 70px !important;	/* this makes a nice equal height for short and long descriptions */
}
    October 9, 2019 at 6:01 am #1146381
    Nikko

    Hi webWahine,

    Thanks for sharing your solution :)

    Best regards,
    Nikko

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