Adding Moving Images

  • metropolisrob

    (@metropolisrob)


    6 years, 6 months ago

    Hi, All.

    So I’m trying to add a moving plane with a banner (Same as the websites front page; except I have added different text to the banner)

    I’ve recreated the gif file with new text – uploaded it via FTP Client – Created a new template for that particular page (The name of the gif file is Plane-Banner-Recruit)

    This is the below code of my front page.

    <?php
get_header();
$backgroundimg = retina_image(get_field('header_image'), 'full', '', TRUE);
?>

    <section id="main-banner" style="background-image:url('<?php echo $backgroundimg; ?>');">
        <div id="animate-clouds">
            <div id="cloud-1" class="cloud">

            </div>
            <div id="cloud-2" class="cloud">

            </div>
            <div id="cloud-3" class="cloud">

            </div>
            <div id="cloud-4" class="cloud">

            </div>
            <div id="plane">

            </div>
        </div>

    I’ve simply changed the plane section on the new template to the below

    </div>
            <div id="plane-banner-recruit">

            </div>

    Yet the plane is not appearing .. Any idea what text I’d have to use to display the new gif?

    If you have any questions I’ll be happy to answer them 🙂

    Cheers

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter metropolisrob

    (@metropolisrob)

    6 years, 6 months ago

    After looking a little further, I believe there maybe a lot more to this than I thought!..

    • This reply was modified 6 years, 6 months ago by metropolisrob.
    ThemesGrove

    (@themesgrove)

    6 years, 6 months ago

    Hello,
    Its may be positioning issue. I appreciate if you please tell me the in which page you are facing this problem. The page link you provide that works fine. Don’t know actually in which page this problem is happening.
    thanks.

    Thread Starter metropolisrob

    (@metropolisrob)

    6 years, 6 months ago

    Thanks for the response.

    Apologies the plane you see on the “Work With Us” Page, was the same plane as the front page (I was just testing it)

    When I try add my edited plane, it doesn’t show. (Its meant to read “We’re Recruiting”

    Just to confirm the page I need help on is http://www.metropolis-surveyors.com/surveying-jobs/

    ThemesGrove

    (@themesgrove)

    6 years, 6 months ago

    Hello,
    I just inspect your work with us page.
    You have no background attachment in that div for that page. While there is a background attachment in the front page, thats why its shows up.
    Please attach you give in that div, if it doesn’t work then let me know.

    Thanks.

    Thread Starter metropolisrob

    (@metropolisrob)

    6 years, 6 months ago

    Hi,

    I’ve copied the code exactly for the front page (The top part has now enlarged/created a flying path)

    What’d do you mean by background attachment? I’m a little confused 🙂

    Sorry & thanks for the help so far!

    ThemesGrove

    (@themesgrove)

    6 years, 6 months ago

    I mean below type of code doesn’t exist in the mentioned page.
    Look here you attach a background image but in that page you don’t attach any image.

    
#animate-clouds #plane {
    width: 418px;
    height: 50px;
    position: absolute;
    top: 50px;
    background-image: url(../img/animate/Plane-Banner.gif);
}

    Thanks.

    Thread Starter metropolisrob

    (@metropolisrob)

    6 years, 6 months ago

    Right I see what you mean 🙂 Sorry for the confusion! And thank you for the help so far.

    Only trouble I’m having now is, where would I add that on my template? Below is my code;

    <?php
/*
  Template Name: Recruiting Plane
 */
get_header();
$backgroundimg = retina_image(get_field('header_image'), 'full', '', TRUE);
?>

    <section id="main-banner" style="background-image:url('<?php echo $backgroundimg; ?>');">
        <div id="animate-clouds">
            <div id="cloud-1" class="cloud">

            </div>
            <div id="cloud-2" class="cloud">

            </div>
            <div id="cloud-3" class="cloud">

            </div>
            <div id="cloud-4" class="cloud">

            </div>
            <div id="plane-banner-recruit">

            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div id="header-title" style="text-align:center;">
                        Work With Us
                    </div>
                </div>
            </div>
        </div>
        <div id="animate-ground">
            <div>
                <div id="animate-ground-paper-boy">
                    <div id="paper-boy"></div>
    </section>
<?php get_template_part('content', 'flex'); ?>

    <section class="clearfix"></section>
<?php get_footer(); ?>
    • This reply was modified 6 years, 6 months ago by metropolisrob.
    Thread Starter metropolisrob

    (@metropolisrob)

    6 years, 6 months ago

    Keeping mind if I simply change the plane section on my template from;

    </div>
            <div id="plane-banner-recruit">

    to

    </div>
            <div id="plane">

    Then the original plane appears on my template – could the gif that I created be missing something?

    ThemesGrove

    (@themesgrove)

    6 years, 5 months ago

    You have to write css in you site.
    Go to your dashboard > appearance > customizer > choose additional css tab > there you will write you css code.

    You markup or code, its ok. NO problem with this. But you have to write css for where you want to place this.

    ThemesGrove

    (@themesgrove)

    6 years, 5 months ago

    Place below code where I mention in the above comment.
    Dashboard > appearance > customize > additional css > place below code in the css box. 

    
div#animate-clouds div#plane-banner-recruit
{
background-image: url(http://www.metropolis-surveyors.com/wp-content/themes/metropolis/img/animate/Plane-Banner.gif);
    width: 418px;
    height: 50px;
    position: absolute;
    top: 50px;
    background-size: 418px 50px;
    -webkit-animation-name: plane-fly;
    -moz-animation-name: plane-fly;
    -o-animation-name: plane-fly;
    animation-name: plane-fly;
    -webkit-animation-duration: 25s;
    -moz-animation-duration: 25s;
    -o-animation-duration: 25s;
    animation-duration: 25s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

    Hope it will solve you issue.
    thanks.

    Thread Starter metropolisrob

    (@metropolisrob)

    6 years, 5 months ago

    Hi,

    That worked perfectly – as soon as I added the CSS and linked the correct picture it popped up!

    Thank you very much for your help! You’ve really helped me out 🙂

    Thanks again,

    Rob.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Adding Moving Images’ is closed to new replies.