-
AuthorPosts
-
March 4, 2018 at 7:23 pm #921121
We are developing a new site with Enfold, and the Portfolio Grid is not doing something that we are used to with the Angular theme.
With Enfold, when the ‘next page’ button is clicked, it does do it but the browser scrolls to the top of the page (so you have to scroll back down to see the next 4 items that were selected in the ‘next page’).
Example: http://0e5.ad2.myftpupload.com/portfolio-item/adams-senior-apartments/
With our company site (which uses Angular), when you click on the ‘next page’ button, the page ‘stays put’ (doesn’t move/scroll up), so you can see the items scroll left in front of you, and then you can select the next ‘next page’ button to see more items scroll to the left.
Example: https://visualimpactsystems.com/example/print-flyers/
Can Enfold’s Portfolio Grid do this?
Thanks for you efforts in this.
Mark Besh
Visual Impact SystemsMarch 5, 2018 at 10:33 am #921380Hey mbesh,
I do not really see the behavior you’re describing on the page you linked. Can you make a small screencast of the issue, please?
Best regards,
VictoriaMarch 5, 2018 at 3:15 pm #921510Victoria,
A screenshot is not going to help you—it’s an ‘interactive’ thing.
Click on the following link (Enfold):
Now, scroll down to the “Other Projects” area. Click on the #2 ‘button’. See how it ‘scrolls’ you back to the top of the page? (and you no longer can see the “Other Projects”).
Now, click on this link (Angular):
Now, scroll down to the “Related Entries” area. Click on #2 ‘button’. See how the page stays ‘still’ (items scroll to the left, and it displays the next 4 items) and you now can click on #3?
Thanks,
MarkMarch 6, 2018 at 11:22 am #922158Hi Mark,
Those are two very different components, with Angular it looks like a slider with Enfold, well this the pagination should be ajax in this case. How are you building this page? Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
Victoria- This reply was modified 6 years, 8 months ago by Victoria.
March 13, 2018 at 7:02 pm #926199This reply has been marked as private.March 14, 2018 at 7:55 am #926460Hi Mark,
I can’t see any login details in the thread unfortunately. How exactly did you send it? Please post the details in the private content box of your reply instead. That way all moderators can access the information.
Best regards,
RikardMarch 14, 2018 at 1:54 pm #926607Rikard,
Hmmm… I replied on March 7th with the details in the “Private Content” area, but I also “Set as private reply” (which I did not do this time).
Thanks for your time on this.
MarkMarch 20, 2018 at 10:43 am #929679March 23, 2018 at 3:39 pm #932001Victoria,
I don’t want to show “posts”, I want to display “portfolio items” (their “projects”). I could not see how to show portfolio items with that behavior.
The “Portfolio Grid” behavior is doing what we want except for one thing: When you click on the next page ‘button’ (1, 2, 3, etc.), the page scrolls up to the top (instead of staying ‘still’ right there, and just scrolling the next 4 projects to the left, like how it works on our site, using Angular:
We also deleted the “WPFront Scroll Top” plugin to see if that was the problem—and it was not.
Any ideas?
Thanks,
Mark
Visual Impact SystemsMarch 24, 2018 at 8:52 am #932251March 24, 2018 at 7:12 pm #932454Victoria,
Oops. When I opened the editor I just saw 4 items to choose from and didn’t notice the drop down to click on to select other categories. It does work, but not exactly as I would like it to.
First off, it doesn’t have the same ‘look’ as the Portfolio Grid (with the pics next to each other, dividing lines, the page ‘buttons’, and the note that this is only “Page X of 8”). In addition to that, the projects are presented in an ascending order. Is any of this possible with the “Post Slider” (with CSS?)
Still, cannot the ‘scrolling to the top of the page’ be stopped when using the Portfolio Grid?
Thanks for all your help on this!
Mark Besh
Visual Impact SystemsMarch 27, 2018 at 5:55 am #933382Hi Mark,
On this page http://0e5.ad2.myftpupload.com/portfolio-item/adams-senior-apartments/
I added the id completed_projects to the color section with the completed projects, you can add this code in functions.php. It will add the #completed_projects to the link and so when the page loads it will go to that section. You do need to add this id to all the pages where you need this beahvior.add_action('wp_footer', 'ava_new_custom_script'); function ava_new_custom_script(){ ?> <script type="text/javascript"> (function($) { function a() { $('.pagination-wrap.pagination-portfolio a').each(function() { var link = $(this); link.attr("href", link.attr("href") + "#completed_projects"); }); } $(window).load(function() { a(); }); })(jQuery); </script> <?php }
If you need further assistance please let us know.
Best regards,
VictoriaMarch 27, 2018 at 9:01 pm #933878Victoria,
I added your code to the “functions.php” file (in the themes/enfold folder) and added it at the end (just after the last “add action” code that was already there) [ Shown below ]. I doesn’t seem to do anything—it still ‘jumps up’ to the top of the page when you click on the pagination ‘buttons’. I cleared the GoDaddy cache, and looked at it with Chrome, Safari, and Firefox and the same thing happens (cleared their caches, too).
So, I add the “completed_projects” ID to another portfolio item (“Ambrose Ridge”), and it still jumps up to the top of the page:
Any suggestions?
Thanks for all your effort!
Mark Besh
Visual Impact Systems===============
. . . .
/*
* compat mode for easier theme switching from one avia framework theme to another
*/
add_theme_support( ‘avia_post_meta_compat’);/*
* make sure that enfold widgets dont use the old slideshow parameter in widgets, but default post thumbnails
*/
add_theme_support(‘force-post-thumbnails-in-widget’);/*
* display page titles via wordpress default output
*/
function av_theme_slug_setup()
{
add_theme_support( ‘title-tag’ );
}add_action( ‘after_setup_theme’, ‘av_theme_slug_setup’ );
/*title fallback*/
if ( ! function_exists( ‘_wp_render_title_tag’ ) )
{
function av_theme_slug_render_title()
{
echo “<title>” . avia_set_title_tag() .”</title>”;
}
add_action( ‘wp_head’, ‘av_theme_slug_render_title’ );
}add_action(‘wp_footer’, ‘ava_new_custom_script’);
function ava_new_custom_script(){
?>
<script type=”text/javascript”>
(function($) {
function a() {
$(‘.pagination-wrap.pagination-portfolio a’).each(function() {
var link = $(this);
link.attr(“href”, link.attr(“href”) + “#completed_projects”);});
}$(window).load(function() {
a();
});
})(jQuery);
</script>
<?php
}/*
* register custom functions that are not related to the framework but necessary for the theme to run
*/require_once( ‘functions-enfold.php’);
/*
* add option to edit elements via css class
*/
// add_theme_support(‘avia_template_builder_custom_css’);March 28, 2018 at 2:07 pm #934295Hi,
We can’t find the script anywhere in the page. We would like to test it but the FTP details above are not working. Please provide a valid WP and FTP details.
Best regards,
IsmaelMarch 28, 2018 at 2:29 pm #934315Ismael/Victoria,
Thanks for all the help. I thought I did what Victoria wanted me to do, but I must not have done it correctly.
FYI: The things I did:
– Put Victoria’s code in the “functions.php” file at the end
– Put “completed_projects” ID to another portfolio item (“Ambrose Ridge”). [ It doesn’t have the “post slider” like the “Adams Senior Apartments” does—which was Victoria’s suggestion, but we really don’t want. We like the “Portfolio Grid”, we just want it to stay ‘stationary’ when the page buttons are clicked ].Thanks for your time and effort!
Mark
March 28, 2018 at 3:04 pm #934338Ismael/Victoria,
Oops!!! I put Victoria’s code in the functions.php of the “production” site which we are not developing right now) and not the “staging site”, which we ARE USING right now.
So now, with Victoria’s code working, it seems that the page ‘jumps to the top and then ‘jumps’ back down to the Portfolio Grid with the “Other Completed Projects” in it.
Does it have to ‘refresh’ the page like that? It might ‘concern’ the user that something is wrong. (This does not happen on our website using Angular: https://visualimpactsystems.com/example/print-flyers/ )
Correct SFTP info for the “Staging” site FTP is in the private area.
Thank you,
Mark- This reply was modified 6 years, 7 months ago by mbesh. Reason: Add link to our Angular page that works like we would like it to
March 30, 2018 at 6:20 am #935115Hi mbesh,
The page always loads at the top, you have the page reload on staging, which you don’t have with angular, I explained that a few times. With Angular you have a slider and it just slides to the next page, I offered you a solution for Enfold.
With Enfold the page reloads and once it reloads, it starts at the top and then jumps to the section you need.
You’re not supposed to give to portfolio item the id completed_projects but to the section where these projects display.
If neither of these solutions work for you, you might want to hire a freelancer to do it for you.
If you need further assistance please let us know.
Best regards,
VictoriaMarch 30, 2018 at 1:28 pm #935302Victoria,
Again, thank you for all your effort! We’re just a bunch of ‘designers’ and don’t have a lot of ‘programming’ expertise. So, I guess we’ll go with your “Posts Slider” suggestion.
Question: Is it possible to make the projects show starting with “A” and be presented alphabetically ascending? (instead of how it starts with “V” or the latest portfolio item). I don’t see an option in the Post Slider setup for this.
Thanks,
Mark
Visual Impact SystemsApril 1, 2018 at 3:41 pm #935777Hi,
Please use the following filters to alter the query.
// portfolio query add_filter( 'avia_post_grid_query', 'avia_post_grid_query_mod', 10, 2); function avia_post_grid_query_mod( $query, $params ) { $query['orderby'] = 'title'; $query['order'] = 'DESC'; return $query; } // post slider query add_filter('avia_post_slide_query', 'avia_post_slide_query_mod', 10, 2); function avia_post_slide_query_mod( $query, $params ) { $query['orderby'] = 'title'; $query['order'] = 'DESC'; return $query; }
Best regards,
IsmaelApril 2, 2018 at 3:38 pm #936103Ismael,
In what file do I put the “// post slider query” code? (Put it at the bottom of the “functions.php” and it ‘broke’ the site)
Thanks,
Mark
April 3, 2018 at 8:46 am #936361Hi Mark,
Yes, it should be inserted in functions.php.
You just need to use the code for the slider. Is it breaking your website?
Try putting right after this code:if(isset($avia_config['use_child_theme_functions_only'])) return;
If you need further assistance please let us know.
Best regards,
VictoriaApril 3, 2018 at 7:02 pm #936721Victoria,
I placed just the slider code just after the line you suggested, and it ‘broke’ the website. Here’s the error:
This page isn’t working
0e5.ad2.myftpupload.com is currently unable to handle this request.
HTTP ERROR 500FYI: I still have “completed_projects” in the Color Section that has the post slider in it.
Below is the top portion of the function.php, to show you where I put the code (that broke it).
Also, just to be sure, we just want the title of the project to be shown below the pic—just want to have the order of the project show from “A” to “Z”.
In addition, on an iPhone, there are no “arrows” to indicate to the viewer that they have to swipe to see more projects (like the desktop does). Is it possible to have something like the desktop does?
Also, is it possible to change the color of the “square” behind the arrows to #8fb25f green?
Thanks for your help!
Mark
=============
<?php
if ( !defined(‘ABSPATH’) ){ die(); }global $avia_config;
/*
* if you run a child theme and dont want to load the default functions.php file
* set the global var below in you childthemes function.php to true:
*
* example: global $avia_config; $avia_config[‘use_child_theme_functions_only’] = true;
* The default functions.php file will then no longer be loaded. You need to make sure then
* to include framework and functions that you want to use by yourself.
*
* This is only recommended for advanced users
*/if(isset($avia_config[‘use_child_theme_functions_only’])) return;
// post slider query
add_filter('avia_post_slide_query', 'avia_post_slide_query_mod', 10, 2);
function avia_post_slide_query_mod( $query, $params ) {
$query['orderby'] = 'title';
$query['order'] = 'DESC';
return $query;
}/*
* create a global var which stores the ids of all posts which are displayed on the current page. It will help us to filter duplicate posts
*/
$avia_config[‘posts_on_current_page’] = array();. . . . .
==========
April 4, 2018 at 7:26 am #936981Hi mbesh,
The completed project id is not causing any issues, you can remove it anyway.
Can you please check server log for error?
There is nothing in the code to be causing the 500 error, but would be nice if you could check what the error is in the server log.Best regards,
VictoriaApril 6, 2018 at 2:56 pm #938274Victoria,
I found this post in the documentation, and it does just want we need…WOO-HOO!:
NOTE: For others reading this later:
We put the code almost at the bottom of the functions.php file:====================
if(!function_exists(‘avia_custom_query_extension’))
{
function avia_custom_query_extension($query, $params)
{
global $avia_config;
if(!empty($avia_config[‘avia_custom_query_options’][‘order’]))
{
$query[‘order’] = $avia_config[‘avia_custom_query_options’][‘order’];
}if(!empty($avia_config[‘avia_custom_query_options’][‘orderby’]))
{
$query[‘orderby’] = $avia_config[‘avia_custom_query_options’][‘orderby’];
}unset($avia_config[‘avia_custom_query_options’]);
return $query;
}add_filter(‘avia_masonry_entries_query’, ‘avia_custom_query_extension’, 10, 2);
add_filter(‘avia_post_grid_query’, ‘avia_custom_query_extension’, 10, 2);
add_filter(‘avia_post_slide_query’, ‘avia_custom_query_extension’, 10, 2);
add_filter(‘avia_blog_post_query’, ‘avia_custom_query_extension’, 10, 2);
add_filter(‘avf_magazine_entries_query’, ‘avia_custom_query_extension’, 10, 2);add_filter(‘avf_template_builder_shortcode_elements’,’avia_custom_query_options’, 10, 1);
function avia_custom_query_options($elements)
{
$allowed_elements = array(‘av_blog’,’av_masonry_entries’,’av_postslider’,’av_portfolio’,’av_magazine’);if(isset($_POST[‘params’][‘allowed’]) && in_array($_POST[‘params’][‘allowed’], $allowed_elements))
{
$elements[] = array(
“name” => __(“Custom Query Orderby”,’avia_framework’ ),
“desc” => __(“Set a custom query orderby value”,’avia_framework’ ),
“id” => “orderby”,
“type” => “select”,
“std” => “”,
“subtype” => array(
__(‘Default Order’, ‘avia_framework’ ) =>”,
__(‘Title’, ‘avia_framework’ ) =>’title’,
__(‘Random’, ‘avia_framework’ ) =>’rand’,
__(‘Date’, ‘avia_framework’ ) =>’date’,
__(‘Author’, ‘avia_framework’ ) =>’author’,
__(‘Name (Post Slug)’, ‘avia_framework’ ) =>’name’,
__(‘Modified’, ‘avia_framework’ ) =>’modified’,
__(‘Comment Count’, ‘avia_framework’ ) =>’comment_count’,
__(‘Page Order’, ‘avia_framework’ ) =>’menu_order’)
);$elements[] = array(
“name” => __(“Custom Query Order”,’avia_framework’ ),
“desc” => __(“Set a custom query order”,’avia_framework’ ),
“id” => “order”,
“type” => “select”,
“std” => “”,
“subtype” => array(
__(‘Default Order’, ‘avia_framework’ ) =>”,
__(‘Ascending Order’, ‘avia_framework’ ) =>’ASC’,
__(‘Descending Order’, ‘avia_framework’ ) =>’DESC’));
}return $elements;
}add_filter(‘avf_template_builder_shortcode_meta’, ‘avia_custom_query_add_query_params_to_config’, 10, 4);
function avia_custom_query_add_query_params_to_config($meta, $atts, $content, $shortcodename)
{
global $avia_config;
if(empty($avia_config[‘avia_custom_query_options’])) $avia_config[‘avia_custom_query_options’] = array();if(!empty($atts[‘order’]))
{
$avia_config[‘avia_custom_query_options’][‘order’] = $atts[‘order’];
}if(!empty($atts[‘orderby’]))
{
$avia_config[‘avia_custom_query_options’][‘orderby’] = $atts[‘orderby’];
}return $meta;
}
}/*
* register custom functions that are not related to the framework but necessary for the theme to run
*/require_once( ‘functions-enfold.php’);
/*
* add option to edit elements via css class
*/
// add_theme_support(‘avia_template_builder_custom_css’);=====================
Victoria/Ismael: We would strongly suggest y’all add this code to the next update.
Now, just to finish up, could you help us with these last things:
On an iPhone, there are no “arrows” to indicate to the viewer that they have to swipe to see more projects (like the desktop does). Is it possible to have something like the desktop does?
Also, is it possible to change the color of the “square” behind the arrows to #8fb25f green?
I REALLY APPRECIATE all the effort you and Ismael have put into this!!!
Mark Besh
Visual Impact SystemsApril 9, 2018 at 1:09 pm #939151Hi,
Thank you for the update. We’ve added the filters in the functions.php file. Please let us know if it helps.
Best regards,
IsmaelApril 9, 2018 at 2:58 pm #939247Ismael,
No, your additions changed all the ordering of all portfolios, and post sliders. We were happy with what we did when we added the “filter solution” in the Enfold documentation ( https://kriesi.at/documentation/enfold/change-the-sort-order-of-portfolio-elements/ ).
Now, just to finish up, could you help us with these last things:
On an iPhone, there are no “arrows” to indicate to the viewer that they have to swipe to see more projects (like the desktop does). Is it possible to have something like the desktop does? (left and right arrows).
Also, is it possible to change the color of the “square” behind the arrows in the Post Slider to #8fb25f green?
Thanks MUCH!
MarkApril 10, 2018 at 8:42 am #939707Hi,
If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Thanks!
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.