![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
May 31, 2024 at 9:31 am #1447165
Hi,
Is it possible to create one portfoliopage in where I see at the top the portfoliogrid with logo’s. and lower in that same page the portfolio items
By clicking a logo in the portfoliogrid it would scroll to the right portfolio item. Of cours every new portfolio item is automatically placed in the grid and in the pageThanks in advance
Woutski
June 1, 2024 at 6:59 pm #1447353Hey 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,
MikeSeptember 3, 2024 at 9:27 pm #1466164Hey Mike, Thank you so much for all the effort you put into my question. I indeed bought an enfold template again. But there are some changes how I want to display the portfolio items in the portfolio grid I do not really see how to adapt the styling of the grid. See link to how I would like to make it work.
Mouse over on the images, Title and introduction text. Can this be done within Enfold??
September 4, 2024 at 4:24 am #1466171Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.