Forums

Image as background tag in Image Slider

Permalink
Can anyone show me how i can put the image in the Image Slider as a background-image tag?
<li class="centroslider" style="background: url(EACH IMAGE HERE);>
                <?php if ($row['linkURL']) {
                ?>
                    <a href="<?php echo $row['linkURL']; ?>" class="mega-link-overlay"></a>
                <?php
            } ?>
IMAGE TO BE REMOVED FROM HERE
                <?php
                $f = File::getByID($row['fID']); ?>
                <?php if (is_object($f)) {
                    $tag = Core::make('html/image', [$f, false])->getTag();
                    if ($row['title']) {
                        $tag->alt($row['title']);
                    } else {
                        $tag->alt("slide");
Viewing 15 lines of 28 lines. View entire code block.

I can then set the background-images as centred and cover in CSS and the overall height of the image slider is not dependent on height of images in responsive layouts.
An example of this:http://www.parallaxdesign.com.au...
 
mnakalay replied on at Permalink Best Answer Reply
mnakalay
this should do the trick
<?php
$url = '';
if (is_object($f)) {
    $f = File::getByID($row['fID']); 
    $url = $f->getURL();
}
?>
<li class="centroslider" style="background: url('<?php echo $url; ?>');>
<?php if ($row['linkURL']) {
?>
    <a href="<?php echo $row['linkURL']; ?>" class="mega-link-overlay"></a>
<?php
} ?>
<div class="ccm-image-slider-text">
    <?php if ($row['title']) {
Viewing 15 lines of 22 lines. View entire code block.

But in this code, the image is used as background and the original image tag is removed so most likely your slide will collide as the image tag was giving it its height. So you need to find a way to give your slide a height.
coton replied on at Permalink Reply
Perfect ... I can set heights of the image slider with responsive breakpoints in CSS. Using default image slider height was responsive based on height of images being full width.
Have already implemented on site :http://www.coton.com.au. Thanks
mnakalay replied on at Permalink Reply
mnakalay
One thing I'd suggest you do is to add title attributes to your links otherwise they are not usable by users with disabilities using screen readers. To them, those are just empty links