0

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>
Ryan Perez
  • 139
  • 7
  • You want a jquery function to change before to after? – Kevin F May 26 '15 at 22:38
  • yes but it must be before the post renders other wise the text will show up – Ryan Perez May 26 '15 at 22:42
  • Hey Kevin, by any chance will you be able to assist me in updating the code to find images that are burried is a ol li. For some reason the :first selection can't find the img, Is there are code that will find any image any where? – Ryan Perez May 27 '15 at 02:48
  • Is there only ever one img as a child? $this.find('img') should find any image that is a child of the blog1 div. You can also do $this.find('img').eq(0) to get the first img found (in case multiple are). There is also $this.first('img'), but I don't know if that deals with nesting. Let me know if any of those work – Kevin F May 27 '15 at 02:52
  • http://oneloveallequal.businesscatalyst.com/ Doesn't seem to work :( – Ryan Perez May 27 '15 at 03:05
  • What is wrong with it? Should it have more blogs underneath the 4 in the bottom right? – Kevin F May 27 '15 at 03:08
  • Notice how it says 15books by... there should be an image there. – Ryan Perez May 27 '15 at 03:11
  • If I put a breakpoint in the function, on page load there isn't an image as a child of that particular div – Kevin F May 27 '15 at 03:15

1 Answers1

1

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);
Ryan Perez
  • 139
  • 7
Kevin F
  • 2,836
  • 2
  • 16
  • 21
  • I updated it to use jQuery .each function. It is more browser friendly. I don't think IE8 supports .forEach – Kevin F May 26 '15 at 22:53
  • Also noticed I forgot to wrap window in $()! Added that, window.on will throw an error, it should be $(window).on – Kevin F May 26 '15 at 23:00
  • $(function($, window){ function moveImages(){ var $blogs = $('.blog1'); $blogs.each(function(){ var $this = $(this); var $img = $this.find('img'); $this.empty() .append($img) .css('display', 'block'); }); } $(window).on('load', moveImages); })(jQuery, window); <-- like this? – Ryan Perez May 26 '15 at 23:06
  • I updated the code in my answer to reflect the currently correct code, but yes that looks to be the same! – Kevin F May 26 '15 at 23:07
  • Hey I made some changes that seem to work but now the only problem is that it takes forever to load. Any fix for that? – Ryan Perez May 26 '15 at 23:46
  • You can try to listen for $(window).on('DOMContentLoaded') instead of $(window).on('load'). Load waits for all scripts/styles to be parsed and images to be loaded. DOMContentLoaded will fire sooner (as soon as the dom hierarchy is built) – Kevin F May 27 '15 at 00:07