Blog Layout

Hi,

@northorie: Would you mind providing a screenshot of the changes that you’d like to make? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

Best regards,
Ismael

Hi,
Thanks for the screenshot I believe that you want to embed one page into another and have the links open in the same embed section.
Such as embed the blog in one side of a grid row and then open the clicked posts in the same section, this is quite tricky but I believe that I have achieved it on this test page.

in the backend I have a grid row element and one side has a background image and the other side has a code block element:

the code block element has this code:

<div id="embedded-section"></div>

<script>
window.addEventListener('DOMContentLoaded', function() {
    (function($) {
        var initialContent = null; // Variable to store the initial content

        // Function to load content via AJAX
        function loadContent(url, initialLoad = false) {
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'html', // Explicitly expect HTML
                success: function(data) {
                    var content;
                    // Determine the selector based on whether it's the initial load
                    if (initialLoad) {
                        content = $(data).find('#av_section_1').html();
                    } else {
                        // Try the first selector
                        content = $(data).find('.av-main-single').html();
                        // If not found, try the second selector
                        if (!content) {
                            content = $(data).find('.post-entry').html();
                        }
                    }

                    // Check if content was found
                    if (content) {
                        if (!initialLoad) {
                            content = '<a href="#" class="back-link">Back</a>' + content; // Prepend back link to content
                        } else {
                            initialContent = content; // Save initial content if it's the initial load
                        }
                        $('#embedded-section').html(content);
                        bindLinkClicks(); // Re-bind click events to new links within the content
                    } else {
                        console.error('Requested content not found using the provided selectors.');
                        $('#embedded-section').html('Requested content not found.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading content:', error);
                    $('#embedded-section').html('Error loading content.');
                }
            });
        }

        // Bind click events to links within the embedded section
        function bindLinkClicks() {
            $('#embedded-section a').off('click').on('click', function(event) {
                event.preventDefault(); // Prevent default link behavior
                var linkUrl = $(this).attr('href'); // Get the URL of the clicked link
                
                if ($(this).hasClass('back-link')) {
                    // If the back link is clicked, load the initial content
                    $('#embedded-section').html(initialContent);
                    bindLinkClicks(); // Re-bind click events
                } else {
                    console.log('Attempting to load:', linkUrl);
                    loadContent(linkUrl); // Load content via AJAX, not initial load
                }
            });
        }

        // Initial loading of content with specific section
        loadContent('https://enfold.savvyify.com/embed-2', true);

        // Initial binding of click events on page load
        bindLinkClicks();
    })(jQuery);
});

</script>

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Please change the url in the code to your page with the blog element, look for this part of the code:

// Initial loading of content with specific section
        loadContent('https://enfold.savvyify.com/embed-2', true);

Now the page that is embeded is a ALB page with a color section set to 100% height and a blog element inside:

by default the first color section of a ALB page has the ID av_section_1, this is important because it is what the script calls and will only show this section, not the header, footer, or sidebar, but set this page to no sidebar as the content width is affected.
Now to show the posts with no header, footer or sidebar we will use the class av-main-single for Classic Editor pages and if that is not found because it is a ALB post we will try post-entry, so when a post link is clicked the post will load in the same section:

Now since the back button on the browser won’t work we added a small “back” link at the top of the embed section:

Please give this a try.
Please note that this will only work for pages and links on your site.
Please note Page Preloading will interfere, so please disable.

Best regards,
Mike

Hi,
Thank you for the link to your site, you are getting the error because the code above is pointing to my test site.
Please change the url in the code to your page with the blog element, here:

// Initial loading of content with specific section
        loadContent('https://enfold.savvyify.com/embed-2', true);

I also had set my grid row height to 100% of the page, you may want to try this.

Best regards,
Mike

Hi,
It looks like it works and then the new url reloads the page, because if you use the browser back button you will the first page with the article loaded in the grid row correctly like in my demo.
I’m not sure why you are experiencing this I’m not seeing any error messages, try disabling all of your plugins and see if that helps, if not please include an admin login in the Private Content area so we can check.

Best regards,
Mike

Hi,
Thank you for the login to your site, it looks like the Page Preloading interferes with the script, I disabled it and now the page works correctly, please check.

Best regards,
Mike

Hi,
Glad that this helps, I’m not sure what you mean by fixing the right cell width, you are using a grid row with two cells at 50%, if you want a different cell size try the grid row Set Cell Size button below the element:

Perhaps you mean that you only have two items showing but the items are each set to 1/3 of the space, to make them each 1/2 try changing the number of columns the blog element:

If this doesn’t help try explaining further.
As for using the built-in blog post navigation, you will not see these prev/next elements in the embed area because we are not embeding the whole page, only the inner “content” area,
but you could add this solution to add new blog post navigation buttons to the content area of your posts, and in my test on my demo page clicking them changes the embed post successfully:

Best regards,
Mike

Hi,
I don’t see a change in the cell width, here is the starting blog page:

and one of the post pages:

I also don’t see a “jump” while the embed page is loading, however on the page load I see that your grid row height changes a lot, I recommend setting the height of the grid row to 100% of the page instead of the content height that you have it set to now.

Best regards,
Mike

Hi,
Glad we were able to help, 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