Switching image sizes in a responsive image_slider block?
Permalink
Hello there,
How do I switch out images shown in an image slider block? I am using the slider "supermint_simple" from the marketplace supermint3 theme. The block is nicely responsive and works great. So, on a large screen my image @ 16:9 aspect ratio is 1920x800 works out great but when I go to mobile sizes, this size for me is too squished. I realize that this is the nature of the width 100% and auto scale but I'd like to modify this.
Ideally, I'd like to make 2 or 3 versions of this same image. One with a height of 800px, one at maybe 1080 and another for mobile almost square. At each defined breakpoint, the specified image would load. Ideally I could tag all images on my site like "lg", "md" and "sm" and in a media query call the specific one. So, each time I design an image for image slider, basic image, logo or whatever, I can assign a class, id or attribute to pick the file I'd like for that screen resolution.
Please, I'm sure you guru's know exactly how to do this so help a brother out.
Cheers,
Bjorn
How do I switch out images shown in an image slider block? I am using the slider "supermint_simple" from the marketplace supermint3 theme. The block is nicely responsive and works great. So, on a large screen my image @ 16:9 aspect ratio is 1920x800 works out great but when I go to mobile sizes, this size for me is too squished. I realize that this is the nature of the width 100% and auto scale but I'd like to modify this.
Ideally, I'd like to make 2 or 3 versions of this same image. One with a height of 800px, one at maybe 1080 and another for mobile almost square. At each defined breakpoint, the specified image would load. Ideally I could tag all images on my site like "lg", "md" and "sm" and in a media query call the specific one. So, each time I design an image for image slider, basic image, logo or whatever, I can assign a class, id or attribute to pick the file I'd like for that screen resolution.
Please, I'm sure you guru's know exactly how to do this so help a brother out.
Cheers,
Bjorn
Hi, sorry I can't help out but for sure the developer of the theme / slider is the person to go to?
Hi
After re-reading your post, I agree with rritz
I'm new to C5 and I'm using the Elemental theme which already does what you describe so not 100% sure, but this may be worth a look.
http://documentation.concrete5.org/developers/designing-for-concret...
LT
After re-reading your post, I agree with rritz
I'm new to C5 and I'm using the Elemental theme which already does what you describe so not 100% sure, but this may be worth a look.
http://documentation.concrete5.org/developers/designing-for-concret...
LT
Howzit!,
Thanks for the response. Totally understand that the default image-slider does a pretty good job at being responsive. However the built in responsiveness does not show well aesthetically on mobile devices. For instance, the slider image will look great on larger devices and the usual implementation is somewhat like the 16:9 or 21:9 aspect ratio (like cinema picture). So, yes looks awesome even on a tablet maybe. But the problem of this built in responsiveness is it scales the image and retains the aspect ratio... So, if you look at your image slider on an iPhone or other similar phones of size (especially in portrait of course), you will have this little image that looks really terrible. I would like to sub in a new image when viewed on mobile that has a completely different aspect ratio for the sake of design.
Hard to explain but it comes down to having control of how your images appear on all devices. It's possible but only for the coding gurus for sure.
Thanks for the response. Totally understand that the default image-slider does a pretty good job at being responsive. However the built in responsiveness does not show well aesthetically on mobile devices. For instance, the slider image will look great on larger devices and the usual implementation is somewhat like the 16:9 or 21:9 aspect ratio (like cinema picture). So, yes looks awesome even on a tablet maybe. But the problem of this built in responsiveness is it scales the image and retains the aspect ratio... So, if you look at your image slider on an iPhone or other similar phones of size (especially in portrait of course), you will have this little image that looks really terrible. I would like to sub in a new image when viewed on mobile that has a completely different aspect ratio for the sake of design.
Hard to explain but it comes down to having control of how your images appear on all devices. It's possible but only for the coding gurus for sure.
@Bjorn
The Supermint 3 theme appears to use the default Image Slider block that comes with concrete5.
I believe I understand what you are looking to do. To do it, you would need a custom block or a modified default Image Slider block.
I think this could be done with the concrete5 image helper to crop the images. The problem with showing or hiding them based on media query is all versions would load. To prevent unnecessary downloads, perhaps data attributes could be used so JavaScript could control what is displayed instead.
- In view.php, you would use the image helper "Core::make('helper/image')" to make the versions of the image instead of Core::make('html/image', array($f, false))->getTag().
https://github.com/concrete5/concrete5/blob/develop/web/concrete/blo...
- Each version would have an empty src attribute. The image path would be in a data attribute "data-lg, data-md, data-sm" etc.
- You would then use JavaScript to check the width of the page. Based on the width of the page, the value of the data attribute would be used as the src value.
The Supermint 3 theme appears to use the default Image Slider block that comes with concrete5.
I believe I understand what you are looking to do. To do it, you would need a custom block or a modified default Image Slider block.
I think this could be done with the concrete5 image helper to crop the images. The problem with showing or hiding them based on media query is all versions would load. To prevent unnecessary downloads, perhaps data attributes could be used so JavaScript could control what is displayed instead.
- In view.php, you would use the image helper "Core::make('helper/image')" to make the versions of the image instead of Core::make('html/image', array($f, false))->getTag().
https://github.com/concrete5/concrete5/blob/develop/web/concrete/blo...
- Each version would have an empty src attribute. The image path would be in a data attribute "data-lg, data-md, data-sm" etc.
- You would then use JavaScript to check the width of the page. Based on the width of the page, the value of the data attribute would be used as the src value.
<div class="ccm-image-slider-container ccm-block-image-slider-pages"> <div class="ccm-image-slider"> <div class="ccm-image-slider-inner"> <ul class="rslides rslides1" id="ccm-image-slider-714"> <li id="rslides1_s0" class="" style="display: block; float: none; position: absolute; opacity: 0; z-index: 1; transition: opacity 500ms ease-in-out;"> <!-- large image --> <img data-lg="/concrete5/application/files/7114/3371/9002/slider1.png" src="" alt="Stand Out on the Web"> <!-- medium image --> <img data-md="/concrete5/application/files/7114/3371/9002/slider1.png" src="" alt="Stand Out on the Web"> <!-- small image --> <img data-sm="/concrete5/application/files/7114/3371/9002/slider1.png" src="" alt="Stand Out on the Web"> <div class="ccm-image-slider-text"> <h2 class="ccm-image-slider-title">Stand Out on the Web</h2> <p>Share your business with an impressive, yet minimal presentation. Let your customers understand your web presence through elegance and clarity.</p> </div>
Viewing 15 lines of 36 lines. View entire code block.
MrKDilkington,
Just saw your reply regarding this and it looks like you supplied some good info. I'm going to look at your code and see what can be done. I really appreciate the reply unfortunately I'm not seeing it until now :). I was actually searching the forums once again as I'm back at it and trying to get my site up and running. Will let you know how it goes.
I can't speak Zulu but if I had to try and learn it right now, it would be as unfamiliar as all this php and github code stuff. I'd love to get this working but man! ...I don't think I could ever understand this level of php and javascript. I'm trying but I just wish this sort of functionality would be available to me through the C5 Gui... I mean, not all of us have the time to delve this deep into code to get an image working for mobile. Why is it that this is not available to us through the gui? There is basically no chance in getting a responsive site up if you are not a certified php and coding guru. All respect to you guys though for knowing this stuff and for trying to be of assistance. Just wish I had the bucks to pay a guru create my vision. Unfortunately I don't :(.
Just saw your reply regarding this and it looks like you supplied some good info. I'm going to look at your code and see what can be done. I really appreciate the reply unfortunately I'm not seeing it until now :). I was actually searching the forums once again as I'm back at it and trying to get my site up and running. Will let you know how it goes.
I can't speak Zulu but if I had to try and learn it right now, it would be as unfamiliar as all this php and github code stuff. I'd love to get this working but man! ...I don't think I could ever understand this level of php and javascript. I'm trying but I just wish this sort of functionality would be available to me through the C5 Gui... I mean, not all of us have the time to delve this deep into code to get an image working for mobile. Why is it that this is not available to us through the gui? There is basically no chance in getting a responsive site up if you are not a certified php and coding guru. All respect to you guys though for knowing this stuff and for trying to be of assistance. Just wish I had the bucks to pay a guru create my vision. Unfortunately I don't :(.
@binomonkey
How often would the images in your slider change?
The feature you want isn't available in the interface because of demand and or no one has asked for it. Generally, if enough people ask for a feature, then it is added to concrete5 (by the core team or community contributor) or someone makes an add-on to add the feature.
One of the top features of concrete5 is that nearly everything can be customized. If you want something special, it generally can be done, but it does require some coding.
How often would the images in your slider change?
The feature you want isn't available in the interface because of demand and or no one has asked for it. Generally, if enough people ask for a feature, then it is added to concrete5 (by the core team or community contributor) or someone makes an add-on to add the feature.
One of the top features of concrete5 is that nearly everything can be customized. If you want something special, it generally can be done, but it does require some coding.
To help with ‘squishing’ you could use media queries and min-height.
In the main.css/less file add:
In the main.css/less file add:
@media screen and (max-width : 768px){ .slider{min-height: 500px} }
