Full viewport height slider with following content
Permalink
Good day! A client has requested a viewport-filling slider as he has seen on yakone.de (WordPress / Hero Slider plugin). It has the following features.
- slider fills full viewport width and height
- text is scentered vertically and horizontally in viewport
- images adjust accordingly
- <header> and navigation are overlaid at the top
- the slider is followed by content further down the page
I am now struggling to build this in concrete5 and am looking for some pointers. I managed to get the Image Slider block to fill the full width of the viewport, using a custom template and some CSS. I've come across the Bootstrap Full Slider template (https://startbootstrap.com/template-overviews/full-slider/) looks like it might work, but I'm not sure how to best approach this in concrete5.
Has anyone done something similar? Are there plugins that can do this?
- slider fills full viewport width and height
- text is scentered vertically and horizontally in viewport
- images adjust accordingly
- <header> and navigation are overlaid at the top
- the slider is followed by content further down the page
I am now struggling to build this in concrete5 and am looking for some pointers. I managed to get the Image Slider block to fill the full width of the viewport, using a custom template and some CSS. I've come across the Bootstrap Full Slider template (https://startbootstrap.com/template-overviews/full-slider/) looks like it might work, but I'm not sure how to best approach this in concrete5.
Has anyone done something similar? Are there plugins that can do this?
thanks for answering!
(that's what I thought. I see that in the view.php for the image slider this is done via:
Now if there was a way to get the URL of the image, I could rebuild view.php to include a div with a "style: background..." on it and load the image in there, instead of using the img tag. )
anyway, I will try out your suggestion and post back here again! thanks a lot.
(that's what I thought. I see that in the view.php for the image slider this is done via:
$tag = Core::make('html/image', array($f, false))->getTag();
Now if there was a way to get the URL of the image, I could rebuild view.php to include a div with a "style: background..." on it and load the image in there, instead of using the img tag. )
anyway, I will try out your suggestion and post back here again! thanks a lot.
Certainly, you do it like this:
The 2400 is the width I'm cropping to, the 9999 simply crops the image at its aspect ratio. False follows suit in keeping the image aspect ratio.
Then on the slide div something like this:
My info_box_grid package works this way, but its not a slideshow, and it doesn't apply the image inline css but builds a single stylesheet.
As for the built in image-slider, basically turn this (view.php):
Into this:
But note I removed the part where it checks for an image first.
I'll post a video in a sec of me setting up the CSS you'll need using dev tools so you know what styles to override.
$ih = Core::make('helper/image'); $thumb = $ih->getThumbnail($file, 2400, 9999, false); // crop image
The 2400 is the width I'm cropping to, the 9999 simply crops the image at its aspect ratio. False follows suit in keeping the image aspect ratio.
Then on the slide div something like this:
<div class="slide" style="background-image: url(<?php echo $thumb->src?>)">
My info_box_grid package works this way, but its not a slideshow, and it doesn't apply the image inline css but builds a single stylesheet.
As for the built in image-slider, basically turn this (view.php):
<li>
<?php if($row['linkURL']) { ?>
<a href="<?php echo $row['linkURL'] ?>" class="mega-link-overlay"></a>
<?php } ?>
<?php
$f = File::getByID($row['fID'])
?>
<?php if(is_object($f)) {
$tag = Core::make('html/image', array($f, false))->getTag();
if($row['title']) {
$tag->alt($row['title']);
}else{
$tag->alt("");
}
print $tag; ?>Viewing 15 lines of 23 lines. View entire code block.
Into this:
<?php foreach($rows as $row) { ?> <?php $f = File::getByID($row['fID']); $ih = Core::make('helper/image'); $thumb = $ih->getThumbnail($f, 2400, 9999, false); ?> <li style="background-image: url(<?php echo $thumb->src?>)"> <?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'] ?>
Viewing 15 lines of 18 lines. View entire code block.
But note I removed the part where it checks for an image first.
I'll post a video in a sec of me setting up the CSS you'll need using dev tools so you know what styles to override.
Here's the video: http://archebian.org/videos/image-slider.mp4...
In my example, all I did was add one image to the slider. Therefore the slide has no height since the image isn't inline giving the slide any height (if you add text content, that will add some height, but you still need to apply the CSS to get the slider the correct height).
I didn't add any styles for centering the content inside the slide since I didn't add any. But basically what you'll want to do is have the <li> only have one child, that being a container holding all the content. Then set the li to display: flex, align-content: center, justify-content: center.
Note that flex needs browser prefixes to work correctly in all browsers. But writing the prefixes manually is a pain. I've been using grunt with postcss & autoprefixer which automatically prefixes your css whenever it gets saved. It's worth learning how to set up if you do web development full time.
I'll get around to building a package that works out the box for what you're needing, it's already been on my to-do list for some time, just haven't gotten to it yet. It's how I've always gone about building slideshows considering it's the only way to pull off most the stuff graphic designers are designing for the web.
Note you'll need to set the styles for the media-breakpoints as well, something I didn't do in the video.
Also you may want to set the slide background-position: center center; if you want the image to always focus on the center of the image.
In my example, all I did was add one image to the slider. Therefore the slide has no height since the image isn't inline giving the slide any height (if you add text content, that will add some height, but you still need to apply the CSS to get the slider the correct height).
I didn't add any styles for centering the content inside the slide since I didn't add any. But basically what you'll want to do is have the <li> only have one child, that being a container holding all the content. Then set the li to display: flex, align-content: center, justify-content: center.
Note that flex needs browser prefixes to work correctly in all browsers. But writing the prefixes manually is a pain. I've been using grunt with postcss & autoprefixer which automatically prefixes your css whenever it gets saved. It's worth learning how to set up if you do web development full time.
I'll get around to building a package that works out the box for what you're needing, it's already been on my to-do list for some time, just haven't gotten to it yet. It's how I've always gone about building slideshows considering it's the only way to pull off most the stuff graphic designers are designing for the web.
Note you'll need to set the styles for the media-breakpoints as well, something I didn't do in the video.
Also you may want to set the slide background-position: center center; if you want the image to always focus on the center of the image.
you are legend! thank you for taking the time to explain all this.
will look into it and update with my findings later.
will look into it and update with my findings later.
Did everything as you showed in your video and it produced just the effect I wanted to achieve.
I did the vertical centering of the textbox using the translateY(-50%) method (still puzzled why this should be so damn hard).
I also came across a problem with calc() in LESS, which I've solved with the below notation.
Thanks for the hint re. Grunt - I've never used it but everything that helps in becoming more efficient is very welcome. How this works together with c5 is probably stuff for another topic/thread.
Thanks for taking the time and help me out!
I did the vertical centering of the textbox using the translateY(-50%) method (still puzzled why this should be so damn hard).
I also came across a problem with calc() in LESS, which I've solved with the below notation.
height: ~"calc(100vh - (@{header-masthead-height-full} + @{header-nav-height}))";
Thanks for the hint re. Grunt - I've never used it but everything that helps in becoming more efficient is very welcome. How this works together with c5 is probably stuff for another topic/thread.
Thanks for taking the time and help me out!
I use grunt because it's what I know, but if picking it up new check out Gulp as well as its supposedly better.
Doing translate works as long as the content in the slideshow is not higher than the height of the slide. If you make the window super short you'll see what I mean, the content has the potential of getting clipped.
Doing translate works as long as the content in the slideshow is not higher than the height of the slide. If you make the window super short you'll see what I mean, the content has the potential of getting clipped.
I would like to load images with a smaller file size on mobile devices. Can I use the getThumbnail() functionality to automatically load a smaller thumbnail from file Manager, depending on device type or viewport-width?
I honestly don't know, but lets not assume so. I know concrete5 supports responsive images though. Your best chance is finding it in the API's.
Here's another post on the matter:
https://www.concrete5.org/community/forums/chat/must-have-features-i...
Here's another post on the matter:
https://www.concrete5.org/community/forums/chat/must-have-features-i...
I think I've found an answer here. Awesome.
http://documentation.concrete5.org/developers/designing-for-concret...
http://documentation.concrete5.org/developers/designing-for-concret...
Awesome find! I need to learn this stuff too!
... and make sure – if developing an 5.8.0 theme – to adjust the settings described in andrews How-To at:
http://documentation.concrete5.org/tutorials/package-developers-upg...
> Creating thumbnails types programmatically
cheers
blink
http://documentation.concrete5.org/tutorials/package-developers-upg...
> Creating thumbnails types programmatically
cheers
blink
Then it's pretty simple, set the slider height to 100vh minus whatever height the header is. This can be done in pure CSS by using calc:
To get everything centered inside the slideshow set the slide to display flex and align / justify contents center. The slide's background-size property will need to be set to 'cover' as well.
Sorry I don't have any packages to give you already done like this. I had dozens of them but had to scrap everything I had when I quit my job for the employer I coded them for. By the time I've got another package like this you'll probably already have it figured out.