Is there a way to show Masonry Gallery 'sort options' down the side? - Support

Tagged: Masonry Gallery

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
April 12, 2020 at 5:28 am #1203038
duncast
Participant
Is there a way to show Masonry Gallery ‘sort options’ down the side of the gallery, rather than only at the top?

I currently have a gallery linking to portfolios on my website that are sorted into separate portfolio categories which I then have on the gallery as a ‘sort option’ I’d love the option of having this menu of ‘sort options’ down the side of my page as it’ll become a little unweildy to have more than a few all listed at the top of the gallery.
- This topic was modified 4 years, 7 months ago by duncast.
April 13, 2020 at 4:43 am #1203204

Rikard
Keymaster

Hey duncast,

I think that would be difficult since the element is full width, I would advice that you keep it as it is. The CSS to create what you want would likely be difficult to implement as well, and it would likely be very difficult to get it looking right for smaller screens as well.

Best regards,
Rikard

April 13, 2020 at 6:21 am #1203217
Guenni007
Participant
First: You mean that Masonry for Posts/Portfolio etc. ?- because a masonry (image) gallery has no sortoptions to preselect in the alb element.

Due to the changing height of the Masonry container this is very inconvenient. A sorting element placed above keeps its position whether it is followed by 30 Masonry elements or only 4.

See Examplepage here: https://webers-testseite.de/portfolio/

Because these two containers are siblings you can change their position by ( via child-theme functions.php ) :
( adjust to your page ID )
```
function change_position() { 
if(is_page(2623)){
?>
<script>
(function($){
	$('.av-masonry-container').insertBefore($('.av-masonry-sort'));
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'change_position');
```
this f.e. in quick css
```
.page-id-2623 .av-masonry-sort {
    position: relative;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    margin-bottom: 60px !important;
}
```
April 14, 2020 at 3:32 am #1203424

duncast
Participant

Ok no worries – I’m mainly looking for a way to recreate this photographer’s print shop https://luketscharke.com/product-category/gallery/award-winning/
for my own print shop at https://stevenduncanart.com/my-shop/

At the moment – in this case – I am using the Masonry gallery listing my products for sale, I like the way the gallery sorts the different tags, but Id like to add more tags, hence the reason why i want to mimic the gallery on the other site.

What I may have to end up doing is create a different page for each tag and link them all using a menu located down the side.

April 14, 2020 at 10:53 am #1203515
Guenni007
Participant
on your page : https://stevenduncanart.com/fine-art-prints-shop/?v=6cc98ba2045f#
please try in quick css:
(if it is only for that masonry – better give a custom class to the masonry f.e.: sort-left )
```
#top div.container .av-masonry.sort-left .av-masonry-sort {
  width: 18%;
  float: left;
}
.av-masonry.sort-left .av-masonry-container {
  width: 80%;
  float: left;
  clear: none;
}

#top .av-masonry.sort-left .av-sort-by-term {
  float: none !important;
}

#top .av-masonry.sort-left .av-sort-by-term a {
    display: block;
    text-align: left;
    float: none !important;
    clear: both;
}

#top .av-masonry.sort-left .av-sort-by-term .text-sep {
    display: none;
}
```
April 14, 2020 at 11:01 am #1203518

duncast
Participant

Oh that is brilliant! Thanks so much!

April 14, 2020 at 11:06 am #1203519
Guenni007
Participant
if the titles are a bit too long – maybe a different styling could be better.
```
#top div.container .av-masonry.sort-left .av-masonry-sort {
  width: 18%;
  float: left;
  overflow: visible;
}

.av-masonry.sort-left .av-masonry-container {
  width: 80%;
  float: left;
  clear: none;
  margin-top: 50px;
}

#top .av-masonry.sort-left .av-sort-by-term {
  float: none !important;
  padding-top: 40px !important;
}

#top .av-masonry.sort-left .av-sort-by-term a {
    display: block;
    text-align: left;
    float: none !important;
    clear: both;
}

#top .av-masonry.sort-left .av-sort-by-term .text-sep {
    display: none;
}

#top .av-masonry.sort-left .av-current-sort-title {
	text-align: left
}
```
April 14, 2020 at 11:10 am #1203521

duncast
Participant

Yes I was just thinking that, the two word titles still take up two lines though but I can always adjust the length or the width of the menu bar thanks to your css. Thanks a bunch!

April 14, 2020 at 11:15 am #1203523
Guenni007
Participant
```
#top div.container .av-masonry.sort-left .av-masonry-sort {
  width: 18%;
  float: left;
  overflow: visible;
  margin: 5px !important;
}

.av-masonry.sort-left .av-masonry-container {
  width: 80%;
  float: left;
  clear: none;
  margin-top: 50px;
}

#top .av-masonry.sort-left .av-sort-by-term {
  float: none !important;
  padding-top: 40px !important;
}

#top .av-masonry.sort-left .av-sort-by-term a {
    display: block;
    text-align: left;
    float: none !important;
    clear: both;
}

#top .av-masonry.sort-left .av-sort-by-term .text-sep {
    display: none;
}

#top .av-masonry.sort-left .av-current-sort-title {
	text-align: left;
	white-space: nowrap
}
```
April 14, 2020 at 11:18 am #1203524
Guenni007
Participant
you had to find a solution for small screens on that – maybe you put the whole code only for a min width:
```
@media only screen and (min-width: 768px) {
  …
}
```
April 14, 2020 at 11:23 am #1203525

duncast
Participant

Ah, good point, thanks for that!
It would be absolutely perfect if I were able to organise the sorting options now in the menu, like add sub links or add spaces inbetween a group of selections – but I understand that’s probably not in the scope of the widget :)

Thanks for your help!

April 14, 2020 at 11:28 am #1203526

Guenni007
Participant

each button got his unique class as f.e. : landscape_sort_button etc. pp
so you can select them very specific to insert f.e. a top-border – but a hierarchical structure would be hard to get here
_________

by the way, I would recommend you not to use any merging or caching tools while you are working on the styling.
You don’t always see immediately if something is effective – besides that it’s hard to give the right hints even as an advisor.

April 14, 2020 at 11:38 am #1203530

duncast
Participant

Oh neat, that will probably come in handy, thankyou :)

You’ve been most helpful! This has saved me a bunch of time building whole pages based on tags, so this is great :D

April 14, 2020 at 2:37 pm #1203599

Victoria
Inactive Moderator

Hi duncast,

Glad you got it working for you with Guenni007’s help! :)

If you need further assistance please let us know.

Best regards,
Victoria

May 16, 2021 at 6:03 pm #1300579

Raphael
Participant

Hi guys, is there a way to sort by mouseover instead on click? I found it in the masonry shortcodes! Thanks!!

May 18, 2021 at 9:01 am #1300897

Rikard
Keymaster

Hi Rafíyel,

That is not possible unfortunately.

Best regards,
Rikard
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.