Block Requests

Image as background tag in Image Slider

Permalink March 03, 2019 at 5:01 AM

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.

 <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");
                    }
                    echo $tag; ?>
                <?php
                } ?>
                <div class="ccm-image-slider-text">
                    <?php if ($row['title']) {
                    ?>
                       <h2 class="ccm-image-slider-title"><?php echo $row['title']; ?></h2>
                    <?php
                } ?>
                    <?php echo $row['description']; ?>
                </div>
                </li>

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 Mar 3, 2019 at 9:27 am Permalink Best Answer Reply

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.

 
 
<?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']) {
    ?>
        <h2 class="ccm-image-slider-title"><?php echo $row['title']; ?></h2>
    <?php
} ?>
    <?php echo $row['description']; ?>
</div>
</li>

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 Mar 3, 2019 at 2:15 pm 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 Mar 3, 2019 at 7:13 pm Permalink Reply

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

Forums

Block Requests

Image as background tag in Image Slider

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?