How to add image or slide show to home page?

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

OK, now it seems to be working. Does not appear on either the gallery page or pull down menu, which is what I want. I am not sure what I did to fix it. I was changing the template settings for another reason.

Ken · 2016-07-20 12:11:54

thanks, the mystery is solved. I logged out of Backlight Admin, and the slideshow (hidden gallery with a slashed-eye) disappeared.

Ken · 2016-07-20 12:16:11

One thing I do notice is that the home page text, which is located in the Tray 01 Copy, and appears in a column on the right side of the page, this text disappears when I resize the browser window to a smaller size. I was hoping it might automatically adjust so that it appears below the slide show.

Ken · 2016-07-20 12:27:15

I notice that the tray copy appears in the condensed menu when it is selected

Daniel Leu · 2016-07-21 00:54:38

Ken wrote:

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.

Looks great, Ken! And the gallery doesn't show for me as a regular visitor.

Daniel Leu · 2016-07-21 00:58:32

Ken wrote:

I notice that the tray copy appears in the condensed menu when it is selected

Yes, that's how Tray 1 works. Use Tray 2 for your text instead. Or you can have your text as part of the main tray below the slideshow code.

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

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.

Daniel thank you,

It works superbly well, but do you know how I can center the slideshow, and remove the huge margin that there below?

http://test.vuedailleurs.com

Thank you.

Philippe

rod barbee · 2016-07-21 07:28:14

Ken wrote:

I notice that the tray copy appears in the condensed menu when it is selected

This is as intended. If you have any copy that you always want seen in desktop and mobile, then place that copy in the main text block.

Daniel Leu · 2016-07-21 07:52:04

PhilippeH wrote:

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.
Daniel thank you,
It works superbly well, but do you know how I can center the slideshow, and remove the huge margin that there below?
http://test.vuedailleurs.com
Thank you.
Philippe

Hi Philippe,

Since your images have all the same size, following few lines of CSS will do the job:

div#slideshow {
    max-width: 640px;
    margin-right: auto;
    margin-left: auto;
}

Just add them to the <style> section of the slideshow code that you have in the Main Copy area.

Re margin: you mean the big white space between the slideshow and the footer? This is the same on your other pages (e.g., contact). I don't remember if this is something that can be changed in the Backlight admin panels.

rod barbee · 2016-07-21 08:13:08

I see it in the inspector as a style being added inline to the slideshow div:

<div id="slideshow" class="fadein clearfix" style="height: 1020px;">

Would adding style="height: 700px !important;" to the "slideshow" div take care of this height that seems to be automatically added?

Daniel Leu · 2016-07-21 08:20:49

rod barbee wrote:

I see it in the inspector as a style being added inline to the slideshow div:
<div id="slideshow" class="fadein clearfix" style="height: 1020px;">
Would adding style="height: 700px !important;" to the "slideshow" div take care of this height that seems to be automatically added?

The slideshow code calculates the height based on the width of '#slideshow'. With the max-width setting, this value is set accordingly. So there is no need for this additional CSS.

It works on my test site, let's see if it works for Philippe as well.

Ken · 2016-07-21 12:53:49

For some people the sidebar text is an important part of the page layout and should be easily viewed by viewers with small screens. The CE4 website that I created has sidebar text which simply shifts below the main text block when viewed on a small screen. It looses it's connection to the page visual organization by having it incorporated in the menu. This reduces the layout options and usefulness of sidebar text in a layout. Perhaps there could be a way in future releases of Backlight to provide the option to place sidebar text below the main text when viewed on a small screen.

rod barbee wrote:

Ken wrote:
I notice that the tray copy appears in the condensed menu when it is selected
This is as intended. If you have any copy that you always want seen in desktop and mobile, then place that copy in the main text block.

Last edited by Ken (2016-07-21 12:55:02)

Ken · 2016-07-21 13:33:11

Perhaps Rod's tips and tricks, Responsive grid framework in Backlight, might help me to understand how to get around this in Backlight.

rod barbee · 2016-07-21 14:03:38

Ken wrote:

Perhaps Rod's tips and tricks, Responsive grid framework in Backlight, might help me to understand how to get around this in Backlight.

That's what I would use.

PhilippeH · 2016-07-21 16:53:24

Daniel Leu wrote:

rod barbee wrote:
I see it in the inspector as a style being added inline to the slideshow div:
<div id="slideshow" class="fadein clearfix" style="height: 1020px;">
Would adding style="height: 700px !important;" to the "slideshow" div take care of this height that seems to be automatically added?
The slideshow code calculates the height based on the width of '#slideshow'. With the max-width setting, this value is set accordingly. So there is no need for this additional CSS.
It works on my test site, let's see if it works for Philippe as well.

Hello,

This works great!
The image is centered properly and margin below is calculated automatically, impeccable!

By cons I find it unfortunate that the minimum size of images in Backlight is 640 px, 570 px I think my pictures would have been okay.

Thanks again.

Philippe

alfred · 2016-07-21 18:33:17

This works great for me as well.

Thanks Daniel.

Alfred

Daniel Leu · 2016-07-21 23:32:40

PhilippeH wrote:

By cons I find it unfortunate that the minimum size of images in Backlight is 640 px, 570 px I think my pictures would have been okay.

Looks good! If you prefer 570px for your look, you can set this as max-width. The web browser will scale the image accordingly.

Daniel Leu · 2016-07-21 23:33:05

alfred wrote:

This works great for me as well.

Perfect! Thank you for letting me know!

rod barbee · 2016-07-22 04:07:59

Hey guys,
If you want to add a little bit of "pop" to slideshows (using Daniel's code), try adding a border and box-shadow. This is subtle, and looks nice. Just add it to your custom css:

/*Slideshow styling
======================*/
#slideshow img {
	border: 1px solid black;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
	
}

If you want to modify, here's the info on box-shadows: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

PhilippeH · 2016-07-22 06:23:07

I just change the size of the slide show, and it works very well also with 570 px

I also tested with box-shadow, it works just fine, but I do not like the shadows in the pictures.

Do you think that there is the ability to add text for images in the slideshow?

Thank you.

Philippe

Ken · 2016-07-22 06:34:59

you took the words thoughts right out of my mind. This was my next question. Works nicely, I used a white border.

rod barbee · 2016-07-22 06:35:38

adding text would mean more javascript, more html and possibly calls to the database (and more work for Daniel ).
Whenever Stage gets released I imagine it will include the Galleria slide-show, which supports metadata.

PhilippeH · 2016-07-22 06:39:53

Okay, as I said in another topic I am patient

Last edited by PhilippeH (2016-07-22 06:41:15)

jherman · 2016-07-23 21:07:54

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

Just added a WOW Slider slide show to my home page at http://jamesherman.net, This is a live site.

I used a simplified approach, brute force.

I pasted the contents of the xxx-iframe.html file genertated by WOW into the top of my home page copy area and copied the data1 and engine1 directories and the xxx.html file to my root directory.

This approach worked well with 2 small issues I haven't quite sorted out:
1. Runs well on Chrome, IE and Firefox on Windows and in landscape mode on Android devices. In the narrower portrait view, I see a blank space below the image.

2. When I try to add something like class="alignleft" to let the text wrap, I loose my left margin and the text is crammed up against the slideshow.

Thoughts?

Jim.

Last edited by jherman (2016-07-23 21:09:42)

rod barbee · 2016-07-24 00:04:31

Looks like the iframe has a height of 427px dialed in. I didn't use the iframe for my test so I don't see this problem.

Community @ The Turning Gate

#26 2016-07-20 12:05:11

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

#27 2016-07-20 12:11:54

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

#28 2016-07-20 12:16:11

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

#29 2016-07-20 12:27:15

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

#30 2016-07-21 00:54:38

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

#31 2016-07-21 00:58:32

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

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

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

#33 2016-07-21 07:28:14

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

#34 2016-07-21 07:52:04

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

#35 2016-07-21 08:13:08

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

#36 2016-07-21 08:20:49

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

#37 2016-07-21 12:53:49

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

#38 2016-07-21 13:33:11

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

#39 2016-07-21 14:03:38

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

#40 2016-07-21 16:53:24

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

#41 2016-07-21 18:33:17

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

#42 2016-07-21 23:32:40

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

#43 2016-07-21 23:33:05

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

#44 2016-07-22 04:07:59

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

#45 2016-07-22 06:23:07

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

#46 2016-07-22 06:34:59

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

#47 2016-07-22 06:35:38

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

#48 2016-07-22 06:39:53

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

#49 2016-07-23 21:07:54

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

#50 2016-07-24 00:04:31

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

Board footer