Hello, I'm having an issue with custom sizing for images on a Bootstrap grid while creating my Toolset View.
My test page is here: hidden link
As you can see, the two images in the middle are shorter than the two on the outside columns of my grid. I've tried changing the custom image size (I'm using the Post featured image field on the Loop Wizard) but the sizes don't change on the front-end. Is there a way I can adjust the images in my grid to all display on the front-end as uniform height and width without having to individually adjust the dimensions of each individual image?
I'd like for users to be able to click the images to see them larger without linking to the page. Is there a way to do this in the Views editor? Additionally, once users can click for a larger view is there a way to have multiple images in the pop-up? For example, this grid is for wedding dresses and it would be lovely to be able to show images of both the front and back.
Lastly, I want to display a Pinterest Pin-it button on each image in the grid. Similar to above, is there a way to do this within the Views editor or a shortcode I can include?
I'd like for users to be able to click the images to see them larger without linking to the page. Is there a way to do this in the Views editor? Additionally, once users can click for a larger view is there a way to have multiple images in the pop-up? For example, this grid is for wedding dresses and it would be lovely to be able to show images of both the front and back.
Toolset's Blocks editor integration includes a Toolset Image Block and a Toolset Gallery Block. Both have built-in "lightbox" integration, which is the effect where clicking a smaller image triggers an overlay showing a larger image. There is no such effect built into the classic Views interface, so you would have to add custom code to integrate such a feature there. See these similar tickets: https://toolset.com/forums/topic/how-to-display-post-images-in-a-carousel-with-a-lightbox/ https://toolset.com/forums/topic/how-to-get-a-lighbox-effect/ https://toolset.com/forums/topic/creating-multiple-galleries-with-lightbox/
In the Toolset Image Block, you have the ability to assign a gallery group name, to determine which image blocks appear in the same gallery popup. If you don't want to display multiple images for each post when the page loads, only display those extra images in the lightbox popup, you would have to hide the subsequent image blocks using custom CSS, since the image block is designed to be displayed when the page loads.
The image block allows you to create a custom image size, and crop images to fit. To enforce a fixed height for all images, you would need to specify a size that is no taller than your shortest image to enforce a consistent height across all images. Or you could use custom CSS / JavaScript to enforce a maximum image height size without changing the image dimensions in the Toolset Image Block.
The Toolset Gallery Block requires that you add your images to a repeating image field, and display them all when the page loads, so that might not work in your case if you only want to display one image at first but have others in the popup.
Lastly, I want to display a Pinterest Pin-it button on each image in the grid. Similar to above, is there a way to do this within the Views editor or a shortcode I can include?
Toolset does not provide direct integration with Pinterest, so I don't have a shortcode or custom code snippet available to make this work. I suspect it would require a significant amount of custom code. If Pinterest offers a shortcode you can drop into the design, it might be easier and more efficient to drop that shortcode into the Block Editor and display one Pinterest button below the image, since you have more control over that area in the Block Editor. Otherwise, you'll need to write custom CSS to reposition that element over each image.
I did a quick search and the Pinterest documentation for the "save" button is available here: https://developers.pinterest.com/docs/widgets/save/
I'm not sure if they provide support for a shortcode-based approach in WP, that's something you would need to ask the Pinterest support team about.
I've followed your instructions using the second ticket you provided with the Lightbox2 plugin and I've inserted the code you provided in that ticket, adding on custom dimensions, like so:
I've found 2 issues I don't know how to solve from here. First, the images show up blurry with the custom dimensions, and without them included in the code, it crops them to thumbnails.
Second, When you click on an image, you get the Lightbox pop-up (yay!) but when you exit the pop-up, the drop-down boxes above the gallery (Designer, Silhouette, Price Range, Trend, and Sample Size) disappear—see attached image. Any ideas on what I'm doing wrong that may have caused this? You can also test for yourself on my testing page here: hidden link
Finally, I'm going to forget about the multiple images in the Lightbox as it sounds a bit out of my depth at this time. However, I was able to use a plugin already installed on my WordPress site (this one: https://wordpress.org/plugins/pinterest-widgets/) that did all the work for me concerning the Pinterest issue. So that's solved.
It seems that since that other ticket was created, the requirements for implementing Lightbox have changed a bit. Can you try temporarily deactivating the responsive-lightbox plugin? Since Toolset already includes a lightbox library, there may be a duplication conflict causing this issue. Then we can take a closer look at the blurriness issue if needed.
Nice on the Pinterest widgets plugin, I'll bookmark that one!
Alright, got it. So deactivating the plugin worked. All that works great!
The blurriness is still there on the taller images. I've fiddled with a bunch of different dimensions within that code in my last post, but it doesn't appear to actually change the sizes when I refresh on the front-end. I've also tried adjusting the custom dimensions of the featured image field in the Loop Wizard. Any ideas on what might be the issue here? Thank you!
Some of the problem was that the original images are not in the same proportion as 250x380, so without cropping the taller images were being stretched to fill the available space. That causes some blurriness that can be remedied by cropping the images instead of stretching them. However, when you resize the browser window some blurriness will occur naturally in all images because of the browser's resizing process. Different image types resize differently, so you may experiment with JPG vs. PNG to see which results are better in your case.
Excellent! Yes, I had an inking the issue would be varying proportions for product images between designers. However, your cropping solution looks great to me.
Thanks for the tip on image formats, I'll play around with those.
My issue is resolved now. Thank you for all your help. Much appreciated!
