olefredrik / FoundationPress

FoundationPress is a WordPress starter theme based on Foundation 6 by Zurb
https://foundationpress.olefredrik.com
MIT License
2.71k stars 871 forks source link

simple solution for basic gallery styles #1228

Open AmyGail opened 6 years ago

AmyGail commented 6 years ago

I'm working on a site and noticed that WP galleries are unstyled. There's probably a more elegant solution - but on the off chance anyone else is dealing with this here's what's working for me. https://foundation.zurb.com/sites/docs/xy-grid.html#xy-grid-layout

.gallery {
   @include xy-grid;
   @include xy-grid-layout(4, '.gallery-item', true);
}

.gallery-icon {
    @include thumbnail;
}
colin-marshall commented 6 years ago

Might be a good thing to add to FP by default. Could you please take some before/after screenshots? thanks

AmyGail commented 6 years ago

Sure. Still looks a bit rough, but here you go. I've added breakpoints .gallery { @include xy-grid; @include flex-align(justify); @include xy-grid-layout(3, '.gallery-item', true);

@include breakpoint(medium){
@include xy-grid-layout(4, '.gallery-item', true);
}

}

.gallery-icon { @include thumbnail; } screen shot 2018-02-15 at 4 01 02 pm screen shot 2018-02-15 at 4 01 21 pm

AmyGail commented 6 years ago

The next challenge is to figure out how to add modals. Not sure if it's worth the trouble though.

colin-marshall commented 6 years ago

Thanks @AmyGail. You can make modals with the Reveal plugin for Foundation.

AmyGail commented 6 years ago

You bet. Yes, I just have to figure out how to make Reveal work with WP. I've figured it out in the past, but naturally, can't recall how I pulled it off. I'm a hack. ;)

colin-marshall commented 6 years ago

@AmyGail I'll add the help wanted tag and maybe somebody will help add this feature to FP.

emaia commented 6 years ago

Hi @AmyGail @colin-marshall

In my opinion the Reveal plugin isn't a good option for image modals. With other plugins we can get best results and features like responsive size, next/prev and others things. I think the best is implement a basic solution to fix CSS and flexibilize the use of the other modal like the Venobox (http://veno.es/venobox/).

I can add a PHP function to change default Wordpress gallery markup with Foundation classes and html atributes for flexibilize usage of other plugins. What you think?

tiborp commented 6 years ago

I agree that Reveal is not the way to go for this goal, but in general I think we should leave image/gallery-modals to third party plugins (for example: https://wordpress.org/plugins/w3dev-fancybox/).

Imho this kind of functionality should not depend on theme functionality anyway.

colin-marshall commented 6 years ago

I was just thinking of having Reveal pop-up the full size image and have no other functionality. I like @emaia's idea to make the markup Foundation compatible so it can be used in 3rd party plugins.

tiborp commented 6 years ago

I was just thinking of having Reveal pop-up the full size image and have no other functionality

Yes; that's certainly better then the standard image-link (like WP does it).

Still Venobox looks insteresting too :-)

AmyGail commented 6 years ago

Emaia & Colin-Marshall’s ideas sound good to me as well. If you all agree that a plug-in is best practice, then I’m all for it. It’s where i’ve been headed, but I thought I was being lazy. Thanks everyone, for your input and hard work.