Search code examples
javascriptjquerybusiness-catalyst

Moving the img element up the dom for multiple blog posts

Hi there I would like to do the following:

I am currently using business catalyst as my framework. They have a blog module that gives little no customization, in terms of blog lists. They have a preview tag that previews the the blog posts, and I only went it render the first image that shows up in the post, and nothing else.

By default if I put an image at the top of the blog post, BC will only render only the photo. If I don't put a photo, BC will render half of the blog post - which is stupid. No matter what the circumstance I just want the first photo rendered.

This needs to happen before BC renders the post.

How can I achieve this?

This is before:

<div class="blog1"><p>text</p><img src="#"></div>

This is after:

<div class="blog1"><img src="#"><p>text</p></div>
Solution

  • The only way to do it truly before it renders is handle it on server side. If you don't have access to that you can put a style rule in your header:

    <style>
    .blog1{
        display: none;
    }
</style>

    and then make a js function to render it the way you want and then display it:

    (function($, window){
    function moveImages(){
        var $blogs = $('.blog1');

        $blogs.each(function(){
            var $this = $(this);
            var $img = $this.find('img:first');

            $this.append($img);

        });
    }

    $(window).on('load', moveImages);
})(jQuery, window);