Перемещение элемента img вверх по домену для нескольких сообщений в блоге

Question

Привет, я хотел бы сделать следующее:

В настоящее время я использую бизнес-катализатор в качестве основы. У них есть модуль блога, который практически ничего не настраивает с точки зрения списков блогов. У них есть тег предварительного просмотра, который просматривает сообщения в блоге, и я только сделал так, чтобы он отображал первое изображение, которое появляется в сообщении, и ничего больше.

По умолчанию, если я помещу изображение вверху поста в блоге, BC будет отображать только фотографию. Если я не выложу фото, BC отчитает половину поста в блоге - что глупо. Неважно, при каких обстоятельствах я просто хочу сделать первое фото.

Это должно произойти до того, как BC предоставит пост.

Как мне этого добиться?

Это раньше:

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

Это после:

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

Answer 1

Единственный способ сделать это по-настоящему перед рендерингом - обработать его на стороне сервера. Если у вас нет доступа к этому, вы можете поместить правило стиля в свой заголовок:

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

а затем создайте функцию js, чтобы отобразить ее так, как вы хотите, и затем отобразите ее:

(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);