Hi CaroSV,

"We use an Image slider on various parts of the website.
Issue 1) On different screens it shows up full width or tiled. Would love for it to be full width on every screen size but obviously the height needs to be cropped to size."

Can you list the pages where this image slider is used and where. Is this the default Image Slider block that comes with concrete5?

"Issue 2) On our juice bar page the simple slider with various images is not sliding. Weirdly it does in edit mode when I save or make a change. But from the user end it's stuck on one image."

It appears that you are using three Simple Slider blocks on the juice bar page. If you make a copy of the page and remove two of the Simple Slider blocks, does the remaining Simple Slider block work?

A side note, your site is not optimized. Because of this, the site will load slowly on broadband and prohibitively slow on standard mobile connections (and rapidly consume data).

Ways to increase site speed and performance:
- enable GZIP
- use browser caching/expire headers
- use smaller images with higher levels of compression
- consider making a performance budget (a per page size limit)
http://www.webpagetest.org/result/151024_BZ_6RZ/...

Example: tests on a fast broadband connection
- home page
108 requests ❘ 21.5 MB transferred ❘ 37.40 seconds to load
- big_and_juicy
42 requests ❘ 12.9 MB transferred ❘ 11.99 seconds to load

Hi MrKDilkington,

Sorry for the delayed response, I only work here once a week at the moment.

"Can you list the pages where this image slider is used and where. Is this the default Image Slider block that comes with concrete5?"

The slider is used on every page except blog/video posts, but on the majority of instances it only holds one image. And it is not the default image slider block that comes with concrete5. It's the Simple Slider we added on.


"It appears that you are using three Simple Slider blocks on the juice bar page. If you make a copy of the page and remove two of the Simple Slider blocks, does the remaining Simple Slider block work?"

We are using three SImple Slider blocks on this page. And yes, when I removed two, the remaining Simple Slider block worked! What does that mean? Can't have 3?


"A side note, your site is not optimized. Because of this, the site will load slowly on broadband and prohibitively slow on standard mobile connections (and rapidly consume data).

Ways to increase site speed and performance:
- enable GZIP
- use browser caching/expire headers
- use smaller images with higher levels of compression
- consider making a performance budget (a per page size limit)"

I don't know many of the things you mentioned in your side note. I'll look into the designer compressing images. I turn off caching when I'm editing/building. But then turn it back on. Not sure what expiring headers means. GZIP? How do I create a performance budget?

Man, thanks for all these pointers! Honestly really appreciate all of it!

@CaroSV

Here are a few links covering these topics.

Enable GZIP
https://help.asmallorange.com/index.php?/Knowledgebase/Article/View/...

Expires Headers
https://gtmetrix.com/add-expires-headers.html...

Setting a Performance Budget
http://timkadlec.com/2013/01/setting-a-performance-budget/...

Off the top of my head, I am not sure why multiple sliders do not work and a single slider does.

Is there a reason for using the image slider for one image?

"We use an Image slider on various parts of the website.
Issue 1) On different screens it shows up full width or tiled. Would love for it to be full width on every screen size but obviously the height needs to be cropped to size."

To have the images full width, without tiling you could try this:
- open packages\vivid_simple_slider\blocks\vivid_simple_slider\view.php
- go to line 60
- change this

- to this

This sets the image position to keep the center of the image visible and to enlarge/shrink the image so it always covers the available space.

Because these slider images have text and content, this doesn't address how they are handled on smaller screens and the visibility of the image text.

One approach would be to use media queries to swap out the background image at different screen sizes. Adding or removing an image that fits the screen size.