Style question?

[pixelmonsters]

How can I display a large background image or rotating background image like you have here? https://chevereto.com/

 

[Rodolfo]

<?php
    $backgrounds = [
        /*1 => [
            'author' => 'Brian Ralphs',
            'link' => 'http://www.flickr.com/photos/birdbrian/3226013858/',

        ],*/
        2 => [
            'author' => 'João Pacheco (MOVEAST)',
            'link' => 'http://picjumbo.com/sunset-snorkeling-in-dubai/'
        ],
        3 => [
            'author' => 'Viktor Hanacek',
            'link' => 'http://picjumbo.com/taste-that-strawberry/'
        ],
        4 => [
            'author' => 'Viktor Hanacek',
            'link' => 'http://picjumbo.com/style-sunglasses-with-macbook/'
        ],
        5 => [
            'author' => 'Viktor Hanacek',
            'link' => 'http://picjumbo.com/austria-windmill-in-retro-colors/'
        ],
        6 => [
            'author' => 'Dannie',
            'link' => 'http://picjumbo.com/girl-with-heart/'
        ]
    ];
  
    if(!$_SESSION['covers']) {
        $_SESSION['covers'] = $backgrounds;
        $fresh = true;
    } else {
        unset($_SESSION['covers'][$_SESSION['cover_used']]);
    }
  
    $cover = key($_SESSION['covers']);
  
    $_SESSION['cover_used'] = $cover;
?>

$cover will be the key of each array so if you name your backgrounds like bkg1.jpg, bkg2.jpg you only need to do something like:

<?php echo $yoururlpath . '/bkg' . $cover . '.jpg'; ?>

You can also populate the image name in the array like this:

        6 => [
            'author'    => 'Dannie',
            'link'        => 'http://picjumbo.com/girl-with-heart/',
            'file'        => 'bkg65asdasd.jpg'
        ]

Then to access to the array you can do $_SESSION['covers'][$cover] and doing $_SESSION['covers'][$cover]['file']; will have the file name. You can do a lot of things from there, base is that with that rotator the image will be always different.

 

[knova15]

Hi

Can you pls give us a little bit more in details tutorial...what files do we need to edit etc. so a non programmer can do it too 🙂

 

[Rodolfo]

Hi

Can you pls give us a little bit more in details tutorial...what files do we need to edit etc. so a non programmer can do it too 🙂

It depends where you want to put it. If you want the homepage then you must edit app/themes/Peafowl/index.php. Basically you simply set the background using inline CSS styles in the target element (like style="background...") and the url of the background is the one that you get from the $cover variable. Is simply a dynamic way to get the background.

 

[Maxim]

Can you write an example code that you can write to these areas in the admin panel

 

[knova15]

with the new version coming out it wont be really needed but here is my custom css if that helps :

.tone-dark #home-cover {
background-image: url(/app/themes/frontpagecover.JPG);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#home-cover-content {
text-align: center;
}
#home-cover-content a {
color: #FFF;
}
#home-cover-content h1 {
font-size: 2.2em;
line-height: 120%;
font-weight: 100;
}
@media (min-width: 768px) {
#home-cover-content h1 {
font-size: 3.2em;
}
}
@media (min-width: 992px) {
#home-cover-content h1 {
font-size: 3.6em;
}
}

#home-cover-content p {
font-size: 20px;
margin: 20px 0;
font-weight: 100;
}
#home-cover-content .home-buttons {
margin: 40px 0 0 0;
}