Essential theme : img vs background

Essential theme : img vs background

by Jérôme DEMIAUX -
Number of replies: 6

Hi all,

For those who like me who are not very at ease with the img tag or prefer to play with the CSS properties of the background (size, position, repeat ...) for full responsive slideshows, you can change this line in layout/includes/slideshow.php line (about 73): 

<img src="<?php echo $image; ?>" alt="<?php echo $imgalt; ?>" class="carousel-image" />

by this one

<div class="carousel-image" style="background-image:url(http:<?php echo $image; ?>)"></div>

For example:
#essentialCarousel.carousel .carousel-inner>.item>.carousel-image {
height:300px;  /*height could be changed too!*/
background-position: center center;
background-size: cover;
}

example

This could perhaps be an option in a future release. wink

Jérôme.

Average of ratings: -
In reply to Jérôme DEMIAUX

Re: Essential theme : img vs background

by Jérôme DEMIAUX -

Huum, this trick was for 2.7.6 version.

Now, in 2.7.7, the making of slideshow is performed by  function 'theme_essential_render_slide' in lib.php,  nearby line 774.

If you replace line below (proximate 796)

$slide .= '<img src="'.$slideimage.'" alt="'.$slideimagealt.'" class="carousel-image"/>';

by

 $slide .= '<div class="carousel-image" style="background-image:url('.$slideimage.')"></div>';

You can play again with the CSS properties of background (size, position, repeat ...)

Average of ratings: -
In reply to Jérôme DEMIAUX

Re: Essential theme : img vs background

by Just H -

Hi Jérôme

Any idea how to get this to work with the latest version of Essential?

I've installed Essential 2014103100 on Moodle 2.7.2+ (Build: 20141002) and found what looks like the relevant line (line 962) and commented that line out and added your line as per below:

        // $slide .= '<img src="' . $slideimage . '" alt="' . $slideimagealt . '" class="carousel-image"/>';
        $slide .= '<div class="carousel-image" style="background-image:url('.$slideimage.')"></div>';

I then added the following to custom css but it doesn't appear to work:

        #essentialCarousel.carousel .carousel-inner>.item>.carousel-image {
        height:300px;
        background-position: center center;
        background-size: cover;
        }

Any pointers would be much appreciated.

Regards

H

Average of ratings: -
In reply to Just H

Re: Essential theme : img vs background

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

2.7.9 will change as regards the slider as I've been working to improve it.

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential theme : img vs background

by Just H -

Thanks Gareth

Since I started looking at Essential in the past week or two I've noticed you've been very busy fixing things up (along with the rest of the contributions you make). I for one am extremely grateful for people like yourself smile

Average of ratings: -
In reply to Just H

Re: Essential theme : img vs background

by Jérôme DEMIAUX -

Huum, it works for me ...

Have you purged caches ? and / or enabled "theme designer mode" before testing ?

Average of ratings: -