I was looking for a solution of displaying the portfolio items just the way they are, but in random order. Browsing the tickets I have just discovered that the Post Grid element has the ability of displaying the Portfolio as well. It does offer the display in random order, but other functionalities seem to get lost:
- No default category option with sortable option enabled. - Image overlay / mouse hover: Without it, the item title will likely be unreadable due to white on white text display occurrences. - The item sizing is out of control with only a 30% item height responsive option being the smallest available. I like to keep the thumbnails square in shape.
I have added the post grid just below the portfolio element , please check it out then you can share screenshot of the areas you are referring to by marking them out.
Is there a solution involving custom CSS as proposed by Tahir? Would it perhaps be easier to build on the Portfolio element instead of the Post Grid element?
It's a bit better, but far from ideal as the aspect ratio is still responsive and thus the thumbnails get cropped. - Very unsightly when using a tall browser window on a 4K monitor.
Also, the other two points still stand:
- No default category option with sortable option enabled. - Image overlay / mouse hover: The item title will likely be unreadable due to white on white text display occurrences. The line breaks are atrocious.
Is there a way to enable a random sort order in the Portfolio element?
Hey Simon, I would recommend sticking with the Post Grid rather than trying to implement new query logic to the legacy Portfolio element. I've edited the Post Grid instance settings on your test page to reflect the design of your reference portfolio. https://spinanimation.com/test/
The only snippet of CSS needed was for the 1/1 aspect ratio, and the rule added was:
Unfortunately there is no option in the current release to select a starting category in the element, but you can link to a specific category by adding ?grid-filter=category_name to your URL e.g. https://spinanimation.com/test/?grid-filter=highlight
Thank you for taking care of this! Much appreciated.
I like that the dark overlay with mouse on hover and descriptions match the Portfolio-portfolio. How was this achieved? - It had a white overlay before and the writing wasn't centered.
However, the aspect ratio of the thumbnails does not appear to remain square, it stretches into portrait format just like before, except that it wouldn't squash into landscape format. - See screenshot
The absence of a default category option is a huge flaw. An alphabetical order seems to be the one and only option. I tried to outsmart it renaming the desired starting category HIGHLIGHT to begin with special characters, but something buggy happened: The category "- HIGHLIGHT - does get selected, but the thumbnails of the category ANIMATIC are displayed. - See screenshot.
1. The overlay settings/alignment can be adjusted can be adjusted in the "Grid item coloring/style" tab within the post grid settings. I've attached a screenshot in regards.
2. I've altered the CSS snippet once more. Can you verify whether the aspect ratio is correct now on your monitor?
3. Because you had changed the name of your category while the Post Grid instance already had it assigned in a specific position, it just needed to be unselected from the instance and reassigned to allow the new order to correctly show. It should be working as expected now on the test page.
I was looking for a solution of displaying the portfolio items just the way they are, but in random order. Browsing the tickets I have just discovered that the Post Grid element has the ability of displaying the Portfolio as well. It does offer the display in random order, but other functionalities seem to get lost:
- No default category option with sortable option enabled.
- Image overlay / mouse hover: Without it, the item title will likely be unreadable due to white on white text display occurrences.
- The item sizing is out of control with only a 30% item height responsive option being the smallest available. I like to keep the thumbnails square in shape.
Please advise.
Hey Again,
Please setup a test page with the Post Grid so we can write up custom css for your requests.
Thanks
ThemeNectar Support Team
Hi Simon,
I have set up a new page called new grid and set the options below
You can check how it turns out and from this page https://spinanimation.com/new-grid/.
Let me know if this is what you wanted.
Thanks.
Hi Judith
Unfortunately, all 3 points that I raised still stand. The native post grid options don't seem to work.
Thanks
Simon
Hi There,
Please share a sample of how you would want the post grid to appear. You can send a sample website url.
Thanks.
The reference for the design is https://spinanimation.com/#work
Thanks
Simon
Hi Simon,
I have added the post grid just below the portfolio element , please check it out then you can share screenshot of the areas you are referring to by marking them out.
Please let me know.
Hi Judith
Can you please not tinker with the live site, much appreciated. I have removed what you added. Also, I did not understand what you asked me to do.
Thanks
Simon
Is there a solution involving custom CSS as proposed by Tahir?
Would it perhaps be easier to build on the Portfolio element instead of the Post Grid element?
Thanks
Simon
Hi Simon,
I apologize for the late turnaround.
Please allow me to escalate this @Tahir to assist further on this.
Thanks.
Hey Again,
The Grid Item Height can be adjusted using CSS which i have added here:
Also, the Overlay for the "Post Grid" element can be set in here:
- No default category option with sortable option enabled.
Have selected the "All" Category in here:
Thanks
ThemeNectar Support Team
Also find the relevant page with the changes here: https://spinanimation.com/wp-admin/post.php?vc_action=vc_inline&post_id=3837&post_type=page .
Thanks
ThemeNectar Support Team
Thank you for the CSS code, much appreciated.
It's a bit better, but far from ideal as the aspect ratio is still responsive and thus the thumbnails get cropped. - Very unsightly when using a tall browser window on a 4K monitor.
Also, the other two points still stand:
- No default category option with sortable option enabled.
- Image overlay / mouse hover: The item title will likely be unreadable due to white on white text display occurrences. The line breaks are atrocious.
Is there a way to enable a random sort order in the Portfolio element?
Please advise.
Escalating this to the developer to check if there is a quickfix available.
Thanks
ThemeNectar Support Team
Hey Simon, I would recommend sticking with the Post Grid rather than trying to implement new query logic to the legacy Portfolio element. I've edited the Post Grid instance settings on your test page to reflect the design of your reference portfolio. https://spinanimation.com/test/
The only snippet of CSS needed was for the 1/1 aspect ratio, and the rule added was:
#ajax-content-wrap .nectar-post-grid .nectar-post-grid-item { min-height: none; aspect-ratio: 1/1; }Unfortunately there is no option in the current release to select a starting category in the element, but you can link to a specific category by adding ?grid-filter=category_name to your URL e.g. https://spinanimation.com/test/?grid-filter=highlight
Kind regards,
Thank you for taking care of this! Much appreciated.
I like that the dark overlay with mouse on hover and descriptions match the Portfolio-portfolio. How was this achieved? - It had a white overlay before and the writing wasn't centered.
However, the aspect ratio of the thumbnails does not appear to remain square, it stretches into portrait format just like before, except that it wouldn't squash into landscape format. - See screenshot
The absence of a default category option is a huge flaw. An alphabetical order seems to be the one and only option. I tried to outsmart it renaming the desired starting category HIGHLIGHT to begin with special characters, but something buggy happened: The category "- HIGHLIGHT - does get selected, but the thumbnails of the category ANIMATIC are displayed. - See screenshot.
Please advise.
Thank you
Simon
Hey
1. The overlay settings/alignment can be adjusted can be adjusted in the "Grid item coloring/style" tab within the post grid settings. I've attached a screenshot in regards.
2. I've altered the CSS snippet once more. Can you verify whether the aspect ratio is correct now on your monitor?
3. Because you had changed the name of your category while the Post Grid instance already had it assigned in a specific position, it just needed to be unselected from the instance and reassigned to allow the new order to correctly show. It should be working as expected now on the test page.
Kind regards,
Wonderful! - Everything works as desired.
With the random selection I can now limit the amount of posts so there's a small fresh selection of items of large categories.
Thank you so much
Simon