Uploading an image to a CSS stylesheet

3 posts by 2 authors in: Forums > CMS Builder
Last Post: March 16, 2022   (RSS)

By CommonSenseDesign - March 14, 2022

Hi, All.

I'm working on a site template that has a slideshow on the homepage: https://www.showaterloo.org/home.php.

This is the CMSB code:

<?php foreach ($homepageRecord['main_slides'] as $index => $upload): ?>
<img src="<?php echo htmlencode($upload['urlPath']) ?>" width="100%">

          info1 (Slide Text) : <?php echo htmlencode($upload['info1']) ?>
          info2 (Slide Link) : <?php echo htmlencode($upload['info2']) ?>

<?php endforeach ?>

Here's the page code that refers to the slide image:

<div class="single-slide-item slide-bg1">
      <div class="slide-item-table">
                <div class="slide-item-tablecell">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="slider-heading">
                                    <h2 class="slider__title"><?php echo htmlencode($upload['info1']) ?></h2>
                                    <a href="<?php echo htmlencode($upload['info2']) ?>" class="theme-btn">Learn more</a></div>
                            </div><!-- col-md-7 -->
                        </div><!-- row -->
                    </div><!-- container -->
                </div><!-- slide-item-tablecell -->
            </div><!-- slide-item-table -->
        </div>

And this is in the stylesheet:

.slider-area .slide-bg1 {
	background-image: url(../images/slider1.jpg);
}
.slider-area .slide-bg2 {
    background-image: url("../images/slider2.jpg");
}
.slider-area .slide-bg3 {
    background-image: url("../images/slider3.jpg");
}

Can someone explain how I can adapt this code so that the image gets pulled from the stylesheet, please?

By Toledoh - March 14, 2022

Just add the image as an inline style to the slide itself, and remember to add a counter to change the slide number.

<?php $count=1 ?>
<?php foreach ($homepageRecord['main_slides'] as $index => $upload): ?>
<div class="single-slide-item slide-bg<?php echo($count) ?>" style="background-image: url('<?php echo htmlencode($upload['urlPath']) ?>') ;">
<div class="slide-item-table">
    <div class="slide-item-tablecell">
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div class="slider-heading">
                        <h2 class="slider__title"><?php echo htmlencode($upload['info1']) ?></h2>
                        <a href="<?php echo htmlencode($upload['info2']) ?>" class="theme-btn">Learn more</a></div>
                </div><!-- col-md-7 -->
            </div><!-- row -->
        </div><!-- container -->
    </div><!-- slide-item-tablecell -->
</div><!-- slide-item-table -->
</div>
<?php $count ++ ?>
<?php endforeach ?>
Cheers,

Tim (toledoh.com.au)