Hi - can you advise how I can recall the Portfolio Masonry function to tidy up my layout following some CSS changes I am doing following use of the inline filtering so my nth-of-type layout is respected when looking at just VISIBLE elements. Thanks. P.S. Its the function that is called on browser resize - it re performs the checks and places the divs correctly.
Also allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.
Just noticed https://themenectar.com/salient/freelance-portfolio/ - this is doing what I want re: the styling of elements after filtering... Any chance you can help me to achieve this? Also - how do I include a button to do the AJAX call to load in another X results on the portfolio feed rather than the standard pagination or the infinite scroll - there is not an option for a AJAX button in the main Salient options.
1. Retriggering the masonry layout calculations without modifying the portfolio script (wp-content/plugins/salient-portfolio/js/salient-portfolio.js) would require simply calling a resize trigger on the window object like so:
<script>
jQuery(function($){
var filterTimeout;
$('.portfolio-filters-inline ul li a').on('click', function(){
clearTimeout(filterTimeout);
filterTimeout = setTimeout(function(){
$(window).trigger('resize');
}, 900);
});
});
</script>
However, by doing this method the item animation between filters will still not be perfect.
2. The https://themenectar.com/salient/freelance-portfolio/ demo is utilizing the newer "post grid" element rather than the "portfolio" element. https://themenectar.com/salient/dynamic-post-grid/
I would recommend using that for your customizations since it does not use javascript to calculate the layout positioning and instead is based on pure CSS so incorrect positioning issues from custom CSS won't occur.
The Post Grid element also offers an AJAX load more button for the pagination rather than the traditional pagination with page numbers like the portfolio.
3. Did you resave your permalink after adding the custom slug name? If so, then also verify that you do not have a page created that shares the same slug as your custom single slug, as WP won't be able to handle that by default.
e.g. if you added a custom slug called "plants", there can not be a page that exists with a slug specified as "plants".
Thanks for this - the jQuery call works great - perfect thank you. Is it possible to have the LOAD MORE ajax button using the portfolio system? I am loathed to swap now I have this custom solution working nicely... Hoping I can get the Load More via an ajax button if you could share some code that would work to pull in the next 5 results as the infinite scroll does - just with a physical button instead.
RE: the issues on custom porfolio name - I have a page called 'projects' yes... this is what I want the custom slug to be... are you saying I cant have a page called projects AND have that as the custom slug? I basically want it so that when someone hits the /projects/ page - they see the page you have looked at with al the portfolio items being displayed - then they click on one and the url structure is /projects/project1/ - Surely this is possible?
Sorry one more thing - just noticed that at screens of 470px and below - when you click on a filter in the portfolio area - the inline styles applied to the results doesnt add "display:none" - it does above 470 but not below... this is messing up my formatting on screens at 470 and less... can you advise where in the core portfolio.js / css that this is being set so I can overwrite it please. Thanks
I thought I had fixed the issue on screens at 470 and below by removing all the media querries applied at that size in the portfolio.css file. but not sure its fixed it to be honest... still getting inconsistent results at screen sizes below 470 - works fine about 470px....! Any idea what is causing the issue?
Could you confirm in what JS files the actual filtering logic is included in please, I was hoping not to have to modify the core scripts, applying my custom JS after - but I dont think this approach is working its too buggy - best to amend the code at source and customise it to work as I want rather than hack it post. Thanks
I've had a look at the POST GRID option and while it seems to remove alot of the overhead vs the standard portfolio approach - There appears to be no easy way to overide the item height setting which is not good - I want the feed items to all respect the aspect ratio of a PNG I am injecting into the template so want to kill this "data-grid-item-height" bit of code. Also want to access to the item template so I can change what data is displayed on hover.... where is that located please?
Hi - can you advise how I can recall the Portfolio Masonry function to tidy up my layout following some CSS changes I am doing following use of the inline filtering so my nth-of-type layout is respected when looking at just VISIBLE elements. Thanks. P.S. Its the function that is called on browser resize - it re performs the checks and places the divs correctly.
Hey Again,
Escalated to the developer for further response.
Also allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.
Thanks
ThemeNectar Support Team
Just noticed https://themenectar.com/salient/freelance-portfolio/ - this is doing what I want re: the styling of elements after filtering... Any chance you can help me to achieve this? Also - how do I include a button to do the AJAX call to load in another X results on the portfolio feed rather than the standard pagination or the infinite scroll - there is not an option for a AJAX button in the main Salient options.
One more... sorry! When I change the custom slug and portfolio url to something other than "portfolio" the pagination breaks....??? Any ideas why?
Hey dubbs,
1. Retriggering the masonry layout calculations without modifying the portfolio script (wp-content/plugins/salient-portfolio/js/salient-portfolio.js) would require simply calling a resize trigger on the window object like so:
<script> jQuery(function($){ var filterTimeout; $('.portfolio-filters-inline ul li a').on('click', function(){ clearTimeout(filterTimeout); filterTimeout = setTimeout(function(){ $(window).trigger('resize'); }, 900); }); }); </script>However, by doing this method the item animation between filters will still not be perfect.
2. The https://themenectar.com/salient/freelance-portfolio/ demo is utilizing the newer "post grid" element rather than the "portfolio" element. https://themenectar.com/salient/dynamic-post-grid/
I would recommend using that for your customizations since it does not use javascript to calculate the layout positioning and instead is based on pure CSS so incorrect positioning issues from custom CSS won't occur.
The Post Grid element also offers an AJAX load more button for the pagination rather than the traditional pagination with page numbers like the portfolio.
3. Did you resave your permalink after adding the custom slug name? If so, then also verify that you do not have a page created that shares the same slug as your custom single slug, as WP won't be able to handle that by default.
e.g. if you added a custom slug called "plants", there can not be a page that exists with a slug specified as "plants".
Kind regards,
Thanks for this - the jQuery call works great - perfect thank you. Is it possible to have the LOAD MORE ajax button using the portfolio system? I am loathed to swap now I have this custom solution working nicely... Hoping I can get the Load More via an ajax button if you could share some code that would work to pull in the next 5 results as the infinite scroll does - just with a physical button instead.
RE: the issues on custom porfolio name - I have a page called 'projects' yes... this is what I want the custom slug to be... are you saying I cant have a page called projects AND have that as the custom slug? I basically want it so that when someone hits the /projects/ page - they see the page you have looked at with al the portfolio items being displayed - then they click on one and the url structure is /projects/project1/ - Surely this is possible?
Sorry one more thing - just noticed that at screens of 470px and below - when you click on a filter in the portfolio area - the inline styles applied to the results doesnt add "display:none" - it does above 470 but not below... this is messing up my formatting on screens at 470 and less... can you advise where in the core portfolio.js / css that this is being set so I can overwrite it please. Thanks
I thought I had fixed the issue on screens at 470 and below by removing all the media querries applied at that size in the portfolio.css file. but not sure its fixed it to be honest... still getting inconsistent results at screen sizes below 470 - works fine about 470px....! Any idea what is causing the issue?
Could you confirm in what JS files the actual filtering logic is included in please, I was hoping not to have to modify the core scripts, applying my custom JS after - but I dont think this approach is working its too buggy - best to amend the code at source and customise it to work as I want rather than hack it post. Thanks
I've had a look at the POST GRID option and while it seems to remove alot of the overhead vs the standard portfolio approach - There appears to be no easy way to overide the item height setting which is not good - I want the feed items to all respect the aspect ratio of a PNG I am injecting into the template so want to kill this "data-grid-item-height" bit of code. Also want to access to the item template so I can change what data is displayed on hover.... where is that located please?