How to add image or slide show to home page?

Ken · 2016-07-19 06:00:57

in my CE4 website, I have a slideshow on the home page that automatically shows a selection of my photos. Also on my about page, I have a single jpeg file displayed. This was fairly straight forward to set up, but I can not figure out how to accomplish the same thing in my Backlight test website.

Any help is greatly appreciated.

rod barbee · 2016-07-19 06:05:33

To add images to pages, use html: http://ttg-tips-and-tricks.barbeephoto. … lock-text/
Slide shows are not yet supported (fingers crossed for Backlight Stage), but if you generate your own shows you may be able to insert them via phplugins.

Ken · 2016-07-19 07:10:23

Thanks for the suggestion, unfortunately it is not working for me. I included the following in the main Page Copy:

I created the folder, photos, and uploaded the named jpeg file into the folder. I saved the page with the html code, cleared my browser cache and then accessed this page in the website. There appears a long rectangular box at the start of the text, which is where I placed the html code, but no photo.

Any thoughts?

Ken · 2016-07-19 07:16:47

I also tried:

Still no image, just a rectangular box with some descriptive text

Ken · 2016-07-19 07:21:06

its now working, I had to add the root folder for the test site, /test/photos/generations.jpg

I can create my own slide shows. Where are there instructions for including a slide show file?

Thanks for your help

rod barbee · 2016-07-19 07:43:34

If your slideshow can be turned into something that can go on the web, then you can insert the code into the copy area.
For example, Youtube video embeds or html5 video.

(there are no hooks for the content area so I probably shouldn't have recommended phplugins for inserting content of this type)

Daniel Leu · 2016-07-19 08:29:34

Hi Ken,

I was able to create a slideshow with Backlight by putting a view lines of html code into the page copy area. But it is a very limited slideshow. I am certain that the successor to CE4 Stage will provide many more features and will be easier to setup and use.

Please give me a few days to document it and set up an example site.

rod barbee · 2016-07-19 08:43:32

I also just created a slide show page using the free Wow slider as an example. Not too hard to do. I included the basic outline of what I did but can expand on it with a full blog post if needed:
http://backlight-rb-test.barbeephoto.com/wow-slider.php

Daniel Leu · 2016-07-19 15:42:37

Got my slideshow implementation documented. The example is over on my site at http://stage.danielleu.com/slideshow.php and the setup instructions are over on my blog.

It is easy to do and I am happy with the result.

rod barbee · 2016-07-19 22:28:47

That's very cool Daniel.

Daniel Leu · 2016-07-19 23:41:07

rod barbee wrote:

That's very cool Daniel.

Thanks, Rod. And once phplugins supports the Album Copy area, the slideshow can be simply updated from Lightroom. Well, at that point, we might have native slideshow support anyway...

rod barbee · 2016-07-20 00:22:45

Daniel Leu wrote:

Well, at that point, we might have native slideshow support anyway...

That's what I'm guessing too

gwlco · 2016-07-20 03:04:31

rod barbee wrote:

I also just created a slide show page using the free Wow slider as an example. Not too hard to do. I included the basic outline of what I did but can expand on it with a full blog post if needed:
http://backlight-rb-test.barbeephoto.com/wow-slider.php

Rod I tried to do exactly what you outlined. I created a WOW folder in root directory and loaded all the wowslider stuff into it.
I created a wow.php file in the /public_html/backlight/custom/phplugins folder. Here is what put into the wow.php.

<<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
	<link rel="stylesheet" type="text/css" href="wow/engine1/style.css" />
	<script type="text/javascript" src="wow/engine1/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->

Now, here is the code in the page copy:
search page

I've added the very text you're now reading and the code to insert the slider below.

I also added a menu item to call the 'page' called WOW

and and this is what i get when I press the WOW menu. search page

This is very lone, I understand, but I wanted to give the most information.

http://garylittle.com/galleries/wowslider/

rod barbee · 2016-07-20 03:20:53

the path to your wow files is wrong. You have:

<<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
	<link rel="stylesheet" type="text/css" href="wow/engine1/style.css" />
	<script type="text/javascript" src="wow/engine1/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->

Since you're placing those files in the wow/ folder in the root of your site, the path should start with either a slash (/) or the site url:

<<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
	<link rel="stylesheet" type="text/css" href="/wow/engine1/style.css" />
	<script type="text/javascript" src="/wow/engine1/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->

but that's not the main problem. The page you linked to isn't getting fed the code.

did you first create a page template and enable phplugins and choose the appropriated file?
Then create the page and assign it to the template you just created?

Can you access the slide show page from the Page's View Page screen? (Designer > Pages > Click on name of page, choose View Page in browser)

rod barbee · 2016-07-20 03:24:31

This might be a clue. I tried going directly to the slide show page at: http://garylittle.com/wowslider
There's an error message noting something wrong with your wow.php phplugins file.

Can you post the code you used?

gwlco · 2016-07-20 04:04:03

Here is the wow.php in the /public_html/backlight/custom/phplugins folder:

<?php
/*
 *	TTG Core Elements "PHPlugins" User Hooks v1.2 - initialization mainline
 *
 *	developed by john bishop images (http://johnbishopimages.com)
 *	for Matthew Campagna of The Turning Gate (http://theturninggate.net)
 *
 */
		
	<<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
	<link rel="stylesheet" type="text/css" href="wow/engine1/style.css" />
	<script type="text/javascript" src="wow/engine1/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->


/*
 *	
 *	*************************************************************************************
 *	*                                                                                   *
 *	* Warning! When using echo or print special care must be qiven to using quotes.     *
 *	*                                                                                   *
 *	* Strings inside single quotes must contain only double quotes                      *
 *	* or all single quotes must be escaped (ie \') or vice-versa                        *
 *	*                                                                                   *
 *	*************************************************************************************
 *	
 *	Fourteen user exits are defined in all web engines - all are optional 
 *		(i.e. ttg_user_load.php may be the only processing)
 *		
 *	Some web engines will have additional exits defined, specific to that gallery type
 *		
 *	Each is called with the same parameters:
 *		%1	-	TTG gallery-style gallery-release
 *				3 blank delimited values
 *				- %1.1	-	'TTG'
 *				- %1.2	-	string describing gallery type; no embedded blanks
 *				- %1.3	-	a series of two to three period delimited integers
 *							describing gallery release level; x.y or x.y.z
 *		%2	-	server filesystem file name and path of calling file
 *		
 *
 *	Defined exits:
 *
 *		ttg_user_load			
 *      - return value ignored
 *      - called immediately after this file returns
 *      - called before any output is produced
 *      - all header and response variables are accessible
 *      - cookie and session processing can be initialized
 *      - globals to be used by later hook calls can be defined 
 *
 *    ttg_head
 *      - return value ignored
 *      - called immediately before </head>
 *      - encompasses nothing; use to insert content into the <head>
 *
 *    ttg_header_top
 *      - if return=false, the contents of the normal Backlight header are skipped
 *      - called immediately within the header section
 *      - encompasses the full contents of the header section; can be used to replace those contents
 *
 *    ttg_header_bottom
 *      - return value ignored
 *      - called last in the header section
 *      - encompasses nothing; use to insert content at the end of the header section
 *
 *    ttg_masthead_top
 *      - if return=false, normal Backlight masthead is skipped
 *      - called immediately before the masthead element
 *      - fully encompasses the masthead; can be used to replace it
 *
 *    ttg_masthead_bottom
 *      - return value ignored
 *      - called immediately after the masthead
 *      - encompasses nothing; use to insert content after the masthead
 *
 *    ttg_navigation
 *      - if return=false, normal Backlight navigation is skipped
 *      - navigation is separate from the header section, so not affected by the above ttg_header... hooks.
 *      - encompasses the navigation <ul> element; can be used to replace it
 *
 *    ttg_footer_top
 *      - if return=false, the contents of the normal Backlight footer are skipped
 *      - called immediately within the footer section
 *      - encompasses the full contents of the footer section; can be used to replace those contents
 *
 *    ttg_footer_bottom
 *      - return value ignored
 *      - called last in the footer section
 *      - encompasses nothing; use to insert content at the end of the footer section
 *
 *    ttg_scripts
 *      - return value ignored
 *      - called immediately before </body>
 *      - encompasses nothing; use to insert content at the very bottom of the page
 *
 */


// SET USER FUNCTIONS BELOW
// Some example functions are included below. Feel free to delete or modify unwanted functions.
// ****************************************************************************************************






?>

Ken · 2016-07-20 05:11:58

Hi Daniel,

This is great. I created a 3 image slide show on my test website home page. It seems to work as illustrated on your site. However the slideshow album shows up on my gallery page. I set the album up the way you showed, except for Template I left it at Standard Album Template, my only option. I made sure to check "Hide from Album Set". Any thoughts as to why this would be happening?

A couple of other questions:
Any way to control the transition time between slides?
Will the slideshow only function if java is turned on in the browser? Is it possible to disable java in browsers? I am wondering how many people typically have browsers set so that they can run the slideshow?

Thanks for taking the time to create your tutorial.

Daniel Leu wrote:

Got my slideshow implementation documented. The example is over on my site at http://stage.danielleu.com/slideshow.php and the setup instructions are over on my blog.
It is easy to do and I am happy with the result.

rod barbee · 2016-07-20 05:59:47

gwlco wrote:

Here is the wow.php in the /public_html/backlight/custom/phplugins folder:

<?php
/*
 *	TTG Core Elements "PHPlugins" User Hooks v1.2 - initialization mainline
 *
 *	developed by john bishop images (http://johnbishopimages.com)
 *	for Matthew Campagna of The Turning Gate (http://theturninggate.net)
 *
 */
		
	<<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
	<link rel="stylesheet" type="text/css" href="wow/engine1/style.css" />
	<script type="text/javascript" src="wow/engine1/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->


/*
 *	
 *	*************************************************************************************
 *	*                                                                                   *
 *	* Warning! When using echo or print special care must be qiven to using quotes.     *
 *	*                                                                                   *
 *	* Strings inside single quotes must contain only double quotes                      *
 *	* or all single quotes must be escaped (ie \') or vice-versa                        *
 *	*                                                                                   *
 *	*************************************************************************************
 *	
 *	Fourteen user exits are defined in all web engines - all are optional 
 *		(i.e. ttg_user_load.php may be the only processing)
 *		
 *	Some web engines will have additional exits defined, specific to that gallery type
 *		
 *	Each is called with the same parameters:
 *		%1	-	TTG gallery-style gallery-release
 *				3 blank delimited values
 *				- %1.1	-	'TTG'
 *				- %1.2	-	string describing gallery type; no embedded blanks
 *				- %1.3	-	a series of two to three period delimited integers
 *							describing gallery release level; x.y or x.y.z
 *		%2	-	server filesystem file name and path of calling file
 *		
 *
 *	Defined exits:
 *
 *		ttg_user_load			
 *      - return value ignored
 *      - called immediately after this file returns
 *      - called before any output is produced
 *      - all header and response variables are accessible
 *      - cookie and session processing can be initialized
 *      - globals to be used by later hook calls can be defined 
 *
 *    ttg_head
 *      - return value ignored
 *      - called immediately before </head>
 *      - encompasses nothing; use to insert content into the <head>
 *
 *    ttg_header_top
 *      - if return=false, the contents of the normal Backlight header are skipped
 *      - called immediately within the header section
 *      - encompasses the full contents of the header section; can be used to replace those contents
 *
 *    ttg_header_bottom
 *      - return value ignored
 *      - called last in the header section
 *      - encompasses nothing; use to insert content at the end of the header section
 *
 *    ttg_masthead_top
 *      - if return=false, normal Backlight masthead is skipped
 *      - called immediately before the masthead element
 *      - fully encompasses the masthead; can be used to replace it
 *
 *    ttg_masthead_bottom
 *      - return value ignored
 *      - called immediately after the masthead
 *      - encompasses nothing; use to insert content after the masthead
 *
 *    ttg_navigation
 *      - if return=false, normal Backlight navigation is skipped
 *      - navigation is separate from the header section, so not affected by the above ttg_header... hooks.
 *      - encompasses the navigation <ul> element; can be used to replace it
 *
 *    ttg_footer_top
 *      - if return=false, the contents of the normal Backlight footer are skipped
 *      - called immediately within the footer section
 *      - encompasses the full contents of the footer section; can be used to replace those contents
 *
 *    ttg_footer_bottom
 *      - return value ignored
 *      - called last in the footer section
 *      - encompasses nothing; use to insert content at the end of the footer section
 *
 *    ttg_scripts
 *      - return value ignored
 *      - called immediately before </body>
 *      - encompasses nothing; use to insert content at the very bottom of the page
 *
 */


// SET USER FUNCTIONS BELOW
// Some example functions are included below. Feel free to delete or modify unwanted functions.
// ****************************************************************************************************






?>

Hi Gary,

that's now how it's done. All user functions need to go below the line that states SET USER FUNCTIONS BELOW and you don't want to delete the code near the top of the page.

See the phplugins documentation here: http://backlight.theturninggate.net/doc … _phplugins
and even more extensively (from CE4) here: http://ce4.theturninggate.net/docs/doku … bility_api

Here's what I'm using in my file:

// SET USER FUNCTIONS BELOW
// Some example functions are included below. Feel free to delete or modify unwanted functions.
// ****************************************************************************************************





function ttg_head( $style, $path ) {
      echo '
    <!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="/wow/engine1/style.css" />
<script type="text/javascript" src="/wow/engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->


'; return true;
} // END

Daniel Leu · 2016-07-20 06:44:05

Ken wrote:

This is great. I created a 3 image slide show on my test website home page. It seems to work as illustrated on your site. However the slideshow album shows up on my gallery page. I set the album up the way you showed, except for Template I left it at Standard Album Template, my only option. I made sure to check "Hide from Album Set". Any thoughts as to why this would be happening?

Did you create a new Gallery Album and not an Gallery Album set using Backlight? Do you have a link?

Ken wrote:

A couple of other questions:
Any way to control the transition time between slides?

You mean having something else than fading?

Ken wrote:

Will the slideshow only function if java is turned on in the browser? Is it possible to disable java in browsers? I am wondering how many people typically have browsers set so that they can run the slideshow?

Java is something different that javascript. Javascript is an integral part of all browsers and can't be disabled. So no worries! Otherwise CE4 and Backlight based websites wouldn't work either since they use javascript as well.

rod barbee · 2016-07-20 07:26:09

Gary,

you'll also need to change the paths to the images, just like you did for the paths in the phplugins file. Add a slash before each url:

<img src="/wow/data1/images/your-image.jpg"..........

Ken · 2016-07-20 11:15:24

Did you create a new Gallery Album and not an Gallery Album set using Backlight? Do you have a link?

I created a new Gallery Album
here is a link: http://www.sweetlightgallery.com/test/
Note the site is very rough, I just installed backlight yesterday and still am learning how the templates and pages work together.

You mean having something else than fading?

No, I like the fading, just how long the fade takes.

Java is something different that javascript. Javascript is an integral part of all browsers and can't be disabled. So no worries! Otherwise CE4 and Backlight based websites wouldn't work either since they use javascript as well.

Thanks for explaining

Ken · 2016-07-20 11:40:09

Daniel, I need to clarify, the slideshow gallery doesn't appear on the pull down menu, but it does appear on the gallery page.

rod barbee · 2016-07-20 11:54:43

If you followed Daniel's instructions, then you've hidden the album used to create the slide show. this is why it doesn't appear under the Galleries drop-down.
You can just add it to your menu set if you'd like easier access to it while testing.

If you want to increase the duration of each slide, change the "delay" variable (Daniel mentions this near the end of his post)

this is what it's initially set to:

var delay = 3000; // image delay

That sets the time at 3 seconds. Just change 3000 to whatever you need.

Ken · 2016-07-20 12:03:17

I do not want it to appear in the pull down menu. I also do not want it to appear on the gallery page, which it does in Chrome. Interestingly, it does not appear on the gallery page in Edge.

Matthew · 2016-07-20 12:04:17

Hidden galleries will display with a slashed-eye icon when you are logged into Backlight's admin.

Community @ The Turning Gate

#1 2016-07-19 06:00:57

How to add image or slide show to home page?

#2 2016-07-19 06:05:33

Re: How to add image or slide show to home page?

#3 2016-07-19 07:10:23

Re: How to add image or slide show to home page?

#4 2016-07-19 07:16:47

Re: How to add image or slide show to home page?

#5 2016-07-19 07:21:06

Re: How to add image or slide show to home page?

#6 2016-07-19 07:43:34

Re: How to add image or slide show to home page?

#7 2016-07-19 08:29:34

Re: How to add image or slide show to home page?

#8 2016-07-19 08:43:32

Re: How to add image or slide show to home page?

#9 2016-07-19 15:42:37

Re: How to add image or slide show to home page?

#10 2016-07-19 22:28:47

Re: How to add image or slide show to home page?

#11 2016-07-19 23:41:07

Re: How to add image or slide show to home page?

#12 2016-07-20 00:22:45

Re: How to add image or slide show to home page?

#13 2016-07-20 03:04:31

Re: How to add image or slide show to home page?

#14 2016-07-20 03:20:53

Re: How to add image or slide show to home page?

#15 2016-07-20 03:24:31

Re: How to add image or slide show to home page?

#16 2016-07-20 04:04:03

Re: How to add image or slide show to home page?

#17 2016-07-20 05:11:58

Re: How to add image or slide show to home page?

#18 2016-07-20 05:59:47

Re: How to add image or slide show to home page?

#19 2016-07-20 06:44:05

Re: How to add image or slide show to home page?

#20 2016-07-20 07:26:09

Re: How to add image or slide show to home page?

#21 2016-07-20 11:15:24

Re: How to add image or slide show to home page?

#22 2016-07-20 11:40:09

Re: How to add image or slide show to home page?

#23 2016-07-20 11:54:43

Re: How to add image or slide show to home page?

#24 2016-07-20 12:03:17

Re: How to add image or slide show to home page?

#25 2016-07-20 12:04:17

Re: How to add image or slide show to home page?

Board footer