CouchCMS • View topic - Repeated Div with background image

Forum for discussing general topics related to Couch.

7 posts Page 1 of 1

Repeated Div with background image

: skud; Registered User

: Posts: 8; Joined: Mon Apr 25, 2016 7:20 pm

by skud » Mon Apr 25, 2016 7:29 pm

Hi all,

I am new to CouchCMS and already stuck on my first bit of code. I'm trying to create a basic slideshow that cycles through DIV's with background images. I want to be able to upload multiple images, thus creating repeated DIV's with each one having a different background image.

Code: Select all

<div style="background-image:url(<cms:editable name='bg_picture' type='image' />);"></div>

E.g. This is how it should look in the HTML after upload:

Code: Select all

<div id="slideshow">
<div style="background-image:url(images/image-1.jpg);"></div>
<div style="background-image:url(images/image-2.jpg);"></div>
<div style="background-image:url(images/image-3.jpg);"></div>
</div>

Can anyone help?

Re: Repeated Div with background image

: trendoman; Registered User

: Posts: 2900; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Mon Apr 25, 2016 7:46 pm

Here is what you have to tell us - how many images are going to be there?
If it's only 3 images, then go with this:

Code: Select all

<div style="background-image:url(<cms:editable name='bg_picture1' type='image' />);"></div>
<div style="background-image:url(<cms:editable name='bg_picture2' type='image' />);"></div>
<div style="background-image:url(<cms:editable name='bg_picture3' type='image' />);"></div>

In backend you'll see three inputs to upload your three images. If you need more, then make sure names of editables are different.

Join COUCH:TALK channel here https://t.me/couchcms_chat
Ryazania — a framework to boost productivity with Add-ons viewtopic.php?f=2&t=13475
Support my efforts to help the community https://boosty.to/trendo/donate

Re: Repeated Div with background image

: skud; Registered User

: Posts: 8; Joined: Mon Apr 25, 2016 7:20 pm

by skud » Mon Apr 25, 2016 11:30 pm

Thank you for your help. I thought there might have been a different way to do it, but what you have suggested will work great.

Re: Repeated Div with background image

: trendoman; Registered User

: Posts: 2900; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Tue Apr 26, 2016 12:48 am

You are welcome!

Code: Select all

<cms:repeat count='10' >
<div style="background-image:url(<cms:editable name="bg_picture<cms:show k_count />" type='image' />);"></div>
</cms:repeat >

Code above will save you some copy-paste for 10 images.

Code: Select all

<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Backgrounds Gallery' order='80' hidden='0' clonable='1' gallery='1' dynamic_folders='0' >
<cms:editable                                                               name='gg_image'
              label="Foto"
              desc=""
              type="image"
              show_preview='0'
              preview_height='200'
   />
<cms:editable                                                               name='gg_thumb'
              label="Thumb"
              assoc_field="gg_image"
              type="thumbnail"
              width='200'
              show_preview='1'
   />

</cms:template>
<!DOCTYPE html>
<html>
<body>
  
  <cms:pages>
      <div style="background-image:url(<cms:show gg_image />);"></div>
     
  </cms:pages>

</body>
</html>
<?php COUCH::invoke(); ?>

Full gallery template is above. It will allow you to upload as many images as you like and have them all

There is always more than one way..

Re: Repeated Div with background image

: KK; Moderator

: Posts: 8729; Joined: Wed Dec 01, 2010 5:35 pm

by KK » Tue Apr 26, 2016 1:15 am

@trendoman, IMHO using repeatable-regions is usually the best way of creating slideshows.

Re: Repeated Div with background image

: trendoman; Registered User

: Posts: 2900; Joined: Thu May 22, 2014 3:57 pm

by trendoman » Tue Apr 26, 2016 1:29 am

KK wrote: @trendoman, IMHO using repeatable-regions is usually the best way of creating slideshows.

Indeed! Here is the working code then

Code: Select all

<cms:repeatable name='bg' label='Slideshow'>
   <cms:editable name='bg_picture' type='image' input_width='400' />
</cms:repeatable>
  
<cms:show_repeatable 'bg' >
   <div style="background-image:url(<cms:show bg_picture />);"></div>
</cms:show_repeatable>

Re: Repeated Div with background image

: skud; Registered User

: Posts: 8; Joined: Mon Apr 25, 2016 7:20 pm

by skud » Tue Apr 26, 2016 12:29 pm

Magic! Exactly what I needed! Thank you guys

Post a reply

Previous Next

7 posts Page 1 of 1

Return to General Discussion