Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

simple solution for basic gallery styles #1228

Open
AmyGail opened this issue Feb 14, 2018 · 11 comments
Open

simple solution for basic gallery styles #1228

AmyGail opened this issue Feb 14, 2018 · 11 comments

Comments

@AmyGail
Copy link

AmyGail commented Feb 14, 2018

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
Copy link
Collaborator

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

@AmyGail
Copy link
Author

AmyGail commented Feb 15, 2018

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
Copy link
Author

AmyGail commented Feb 15, 2018

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

@colin-marshall
Copy link
Collaborator

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

@AmyGail
Copy link
Author

AmyGail commented Feb 16, 2018

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
Copy link
Collaborator

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

@emaia
Copy link
Contributor

emaia commented Feb 22, 2018

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
Copy link

tiborp commented Feb 22, 2018

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
Copy link
Collaborator

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
Copy link

tiborp commented Feb 22, 2018

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
Copy link
Author

AmyGail commented Feb 22, 2018

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants