Add Image Gallery to Bricks Builder That Is Easy for Clients to Manage Without Messing Up the Design

Рет қаралды 2,849

Күн бұрын

There's several different ways to add a gallery to a website. Many plugins and widgets. With #BricksBuilder there is a dedicated element for adding a gallery of images.
Here are a few things to consider when adding a gallery to your website if you want clients to manage the them.
1. It needs to be easy 🙂.
2. Limit the number of images that can be added.
3. Disable the ability for changing the layout or design. This will help keep a consistent design on all the galleries displayed on the website.
4. Don't allow setting the thumbnail size to something larger than it needs to be that will hurt page load performance.
The best option to accomplish all of these items is to create custom field for any page or post where you want a gallery. In this training #MetaBox is used. This lets you as the website developer/designer get the perfect design and layout but lets the client manage the photos.
This training also includes a brief peak at the HappyFiles Image Gallery element for Bricks.
#WordPress

Пікірлер: 29

@touchdowntech Жыл бұрын

Shoutout to Michael! He pointed out a better way to write the styling for the hover opacity. Since we're writing in SCSS using WPCodeBox I should have written it this way: ul.image-gallery__grid li { opacity: .7; &:hover { opacity: 1; } } I did update the blueprint with this improvement. This will help keep the stylesheet more organized and clean as it grows over time.

@michaeltrull5788 22 күн бұрын

good video thank you

@touchdowntech 22 күн бұрын

Thanks Michael!

@SeattleCoorain Жыл бұрын

Very informative Bricks Galleries tutorial. Helpful that Touchdown Tech shows both the process and the design thinking behind the process and it's various options. This make the tutorial more versatile and applicable to lots of design situations. Thanks, I subscribed.

@touchdowntech Жыл бұрын

Thanks for the kind words, Mark! And thanks for subscribing.

@quickend01 Жыл бұрын

Very helpful Thank You!

@touchdowntech 11 ай бұрын

Thanks @quickend01!

@MrUffizzi Жыл бұрын

Good tut

@touchdowntech Жыл бұрын

Thanks Dan!

@milkrow 8 ай бұрын

I really like your video. It might be helpful to demonstrate (if possible) the method you might use to provide the same controls to the client when using a Happy Files folder method of populating the gallery. In other words, if there were a way to control the order of the images in the folder (and what options for that control there may be). The folder method would be very helpful, for example, if there is one user assembling the images into folders and yet another who is making the gallery/pages. However, the ability to manage the gallery through the custom fields (in a page or CPT) is really the way to go. Can the two (custom image gallery field + Happy Files) be combined?

@touchdowntech 8 ай бұрын

Good question. I'm not sure and will look into it the next time I"m working on a gallery.

@DQ940 Жыл бұрын

Great tutorial

@touchdowntech Жыл бұрын

Thanks Darren! What other tutorial would you like to see?

@DQ940 Жыл бұрын

@@touchdowntech really like the tutorials with metabox and bricks. I use both of those and there isn't a huge amount of material around on KZfaq about metabox specifically, at least not that I could find. Teachings about best practices in things like accessibility, use of images, SEO etc, I would definitely find helpful. Appreciate all your hard work with this.

@htz70 Жыл бұрын

@@touchdowntech more on how to keep clients out of bricks, so they use WP block editor, but with custom blocks I create ideally in bricks, like we can in oxygen

@biesman5 5 ай бұрын

Nice video. How could it be possible to add a description to the image when you hover your mouse on it? Or would that even be possible since you'd maybe have to change & access the gallery's HTML code somehow?

@touchdowntech 5 ай бұрын

I'm not sure that's possible without using a query loop and querying images into a gallery. Does that make sense?

@charliesasser 5 ай бұрын

Just found your video. I'm a newbie Bricks user and wanted to be able to do something like this. I don't have a premium version of ACF or Metabox (yet) which it looks like I would need to get the correct field type. The other thing I'm curious about is how can I pull in other Media metadata like Title, description, etc. associated with each image in the gallery? I know I can add the "Caption" with a toggle but what about the other metadata?

@touchdowntech 5 ай бұрын

Hey @charliesasser, did you find the answer to your questions? It's a little to long to answer in a comment. But if you're still having the question I could create a video about it.

@DarrinRich Жыл бұрын

What are you using for your media library? Looks much better than default WP media library

@touchdowntech 11 ай бұрын

Sorry for just replying now. I'm using Happy Files Pro to create folders in the media library. It's well worth it!

@chantscreen Жыл бұрын

Brilliant! Really enjoyed it. BTW is there any way to add the thumbnail strip (as in Happy Files gallery lightbox) to the Bricks 1.5 beta gallery as the latter doesn't have the strip? Thanks!

@touchdowntech Жыл бұрын

Hey Tony, it might be possible but not without an additional lightbox plugin or custom code.

@pottiBoo Жыл бұрын

Thanks for the tutorial, it worked well :) What would you do to get this responsive? It looks good until around the 768px breakpoint but on mobile its too small.

@touchdowntech 11 ай бұрын

Hey @pottiBoo, sorry for the late reply. Consider switching it to a single column at smaller breakpoints.

@DimitryChamy Жыл бұрын

Super! 🙋‍♂How would you use the Gallery field to create a background slider for a section?

@touchdowntech Жыл бұрын

I haven't looked into this because I don't like using sliders. If it's something enough people are wondering about I will create a video.

@petermuller1156 Жыл бұрын

Is Bricks not too complicated in general for clients? Did you already use some custom css inside bricks and try to backup/export bricks website? If yes, was your css still there when you restored?

@touchdowntech Жыл бұрын

Hey Peter, thanks for the comment. If you'd watch the video you would have gotten your answer 🙂. I cover this in the video but here's a brief summary: For most clients editing in Bricks is too complicated which is why I show how to create a gallery in Meta Box which is easy for clients to edit and lets you as the website developer control the design.