Image aspect ratio, slider height, image starting position
Hi,
I apologise in advance for what will probably be just the start of my newbie questions. Site is personal and hobby site so my skills are a bit low. I understand you can't help with thing not related to slider, so please just let me know if I stray into that territory.
My source is images
My questions
- Is it possible to keep images at their aspect ratio, say 16x9, based on the size of the viewport. IOW, if a user reduces the width of their browser window I would like the image to still be 16x9. Or is the best approach to make sure all images are square?
- Currently the first image loads in the center of the slider, with subsequent images loading to the right.[image link] Ideally I would like all my sliders to be fully loaded, from left to right, when the page is first displayed (See ink) https://drive.google.com/file/d/1bjJ-xbFs_9ZSgYWe55DEXTuPEsqwt9HL/view?usp=sharing
- I would like to control the size of the control and the images, specifically the height. I want the slider to have a small footprint so I am making images with height of 100px (also smaller size images have better loading time).
I used a class suffix and adding various options in my template custom.css and using:
height: 100px;
max-height: 100px;
The slider height was reduced nicely, however the images displayed larger than the slider, even though the image height was only 444x100 (See ink)
https://drive.google.com/file/d/1nJL5CSK0JEpz9m2brighPT0UtbY01UFz/view?usp=sharing
Edit: I just had a thought about images, I had cropping turned off as I didn't want anything cropped but if I turn on cropping guess I can set the image sizes and maybe that is the solution.
Quick note regarding JS errors, a novice here, but using Firefox console I do see some errors but they dont seem to be page related, more security and other settings. (See image) https://drive.google.com/file/d/1ldg9PdCamlHOdC6A9DFnDQ7H3b2gUdqE/view?usp=sharing
Thanks, fwiw, I do like what I have worked out so far. Seems to be just what I am looking for if I can tweak these visuals
Cheers
8 answers
Thank you :)
Just to let you know I posted a review, I hope what I said works for you :-) Needs to be confirmed, not sure how long that takes. Seemed I used Bob as my login name, lol
Thank you, that would be great. Minitek Slider currently has only 1 review and it's really hard for me to keep supporting it if there are no reviews.
So sorry, don't know how I missed that in the docs! Appreciate the help, will definitely leave rating once I use it for a little bit longer.
Cheers
If you have 5 minutes, please consider rating the extension at https://extensions.joomla.org/extension/photos-a-images/slideshow/minitek-slider-pro/. It would be really helpful to me.
The number of total items in the Slider is set with the parameter Navigation > Start limit. I changed it to 50 and it should be ok now.
The parameters Responsive > Items Per Page control how many items are shown at the same time in the Slider for each screen size.
Thanks for the quick response, looking good except for one thing.
I can only load 4 items. I have set Responsive > Items Per Page = 6 for all and there are currently 8 images in the data source directory. Also using the pagination bullets or nav arrows doesn’t do anything. Link to test site where you can see the slider https://rctest.piningforthefjords.co.uk/catalogue/search-fallout-4?f=4
I figure it is a setting I am missing. I should add I am using Joomshaper's SP Page Builder and Helix framework but I am pretty sure I have seen people who have used your stuff with it with success.
Also thanks for info about errors, I had no idea even looking for those, guess I have my work ahead of me tracking down what those mean, lol
Cheers!
Steve
Hi there,
Feel free to ask any questions you have, as there are no questions that are considered too basic or inexperienced in my view.
1. Yes, it is possible. You must first disable image cropping at Images & Videos > Crop images. Then go to Responsive and for all the Min height fields (there are 5 of them), enter a smaller value (for example 100 or 150).
2. You can achieve that with the parameter Effects > Contain.
3. As mentioned above, you can fix the height with the parameters Responsive > Min height. Note that there is a separate Min height parameter for each screen size.
About the console errors, indeed these are not related to Minitek Slider and should not create any issues.
Let me know if you need more help.