all portfolio’s on one page

Hey Woutski,
Thank you for the link to your example site, when I look at it, it looks like the grid of icons at the top, linking to a sections lower on the page, in each section is a content slider showing one item with pagination to see more from this group. To create this I would use the Gallery element at the top of a page with a custom link added to each image as a anchor link to lower sections:

and then in the advanced tab set the link settings to Use custom link so the anchor links will be used.

Then using columns for the lower sections add a custom ID for the anchor links to point to:

Then in the columns use a Post Slider elements, each one with a different taxonomy, or category, for this example I used Portfolio Entries

and set it to show only one column with navigation arrows always showing.
This is how the backend looks:

and the frontend:

Now when a icon is clicked at the top of the page, you will scroll down to that section and then can use the navigation arrows to see more items from that group. When more items are added to that taxonomy then will automatically show in the correct group.

Best regards,
Mike

Hi,

Mouse over on the images, Title and introduction text. Can this be done within Enfold??

This is possible but it will require a bit of modifications such as assigning custom fields to the portfolio items. If you want to continue, please follow these steps:

1.) Add this code in the functions.php file to register a new attribute the portfolio image which uses the value of the av_portfolio_hover_image custom field.

function avf_add_custom_field_as_hover_image($attrs, $entry) {
    $hover_image_url = get_post_meta($entry->ID, 'av_portfolio_hover_image', true);

    if (!empty($hover_image_url)) {
        $attrs['data-hover-image'] = esc_url($hover_image_url);
    }

    return $attrs;
}
add_filter('avf_portfolio_image_attrs', 'avf_add_custom_field_as_hover_image', 10, 2);

2.) Then add this script to create the hover effect:

function ava_custom_script_hover_image() {
    ?>
    <script>
        (function ($) {
            function hoverImageChange() {
                $('.grid-sort-container .grid-entry img').each(function () {
                    var $img = $(this);
                    var originalSrc = $img.attr('src');
                    var hoverImage = $img.data('hover-image');

                    if (hoverImage) {
                        $img.hover(
                            function () {
                                $img.stop().fadeOut(200, function () {
                                    $img.attr('src', hoverImage).fadeIn(200);
                                });
                            },
                            function () {
                                $img.stop().fadeOut(200, function () {
                                    $img.attr('src', originalSrc).fadeIn(200);
                                });
                            }
                        );
                    }
                });
            }

            $(document).ready(function () {
                hoverImageChange();
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_hover_image');

3.) Edit any portfolio items, apply the av_portfolio_hover_image custom field and place the URL of the hover image.

4.) Add this css code to disable the default image overlay

.grid-entry a .image-overlay {
  display: none !important;
}

Best regards,
Ismael

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike