Adjust Slideshow in the Header |
|
Shawn
|
I'm using Art 4.
I want to adjust the width of the slide show in the Header. Right now it take the full header and covers the logo.
Is there a way to do this or do I have to trick it by keeping an image of my logo constant on the slider? If so I would say that the header slide show is lacking.
|
| |
Nick
|
You add your image (logo) to a header slideshow, one image at a time. This is the correct way, so you can have different images with every slide. Only the header controls (search, slogan, headline, etc...) span throughout all slides.
So, now that you understand how this works, you have to import your logo image for each slide.
We are NOT done. If your template is responsive, then in the responsive layouts, the slideshow will not show up to save bandwidth (load faster), which makes sense. To overcome this, besides the logo, you have to use the Headline control, so at least the site title will show up in the responsive layouts. You will encounter a similar problem with a static header as well, so no matter what, if your template is responsive, you better use the Headline control from the Header menu.
A lot of people this is a bug, which is not. It is a correct calculated move by Artisteer to make the responsive layouts as small in size as possible, for the slower 3G connections. THe dev. team had to choose, being more inclusive, or faster. They chose faster, which was the correct decision. Nobody is going to enjoy your site if each page takes very long time to load.
|
| |
richard
|
Quote :A lot of people this is a bug, which is not. It is a correct calculated move by Artisteer to make the responsive layouts as small in size as possible, for the slower 3G connections. THe dev. team had to choose, being more inclusive, or faster. They chose faster, which was the correct decision. Nobody is going to enjoy your site if each page takes very long time to load.
I've never felt this is a bug, however I'm not sure it saves any bandwidth at all. The php that creates the page remains the same so all the resources and divs created are downloaded. All that happens is that at the switchover point, when the browser width crosses the limit, the logo and header divs are switched from display:block to display:none. i.e. they are hidden.
There appears to be no server side code that identifies the browser width when the page is requested so the data served up is the same regardless. Indeed. php cannot respond to browser width as it creates the page server side in ignorance of the requestor, aside from the scant information from the request header e.g. OS, browser type, device type etc. There appears to be no code in Art 4 to decode and utilise this to limit the data cargo.
Once the page is built and sent to the browser, the responsive code then decides what to show and how to show it. This means that the page footprint is the same regardless of the device asking for it. This can be demonstrated by sizing the browser below the size where it switches in the responsive css. If using Firefox use View Page Info and go to the Media tab. Note that the logo images are here client side. Resize the browser and reload with a cache refresh (CTRL-F5). Again the same resources are downloaded to the client.
Responsive themes do not know the browser client area when the request is made. All that can be known is what's in the HTML headers of the request and this is a blunt instrument as if the OS is Android it could still be a device with high resolution available etc.
So, when designing a theme to be responsive you need to carefully think about the size and number of graphic objects and heavy scripts as the smallest screened device is going to get them, albeit resized client side for display. Otherwise how could you bring the page down mobile size then upsize the browser and display t5he full res images? The only saving that can be made is if the requestor has set their mobile browser to download images at a lower res e.g. as you can with Opera mini.
If you want to show the logo or header then you can do by editing the responsive css to show them i.e change none to block... The effect on bandwidth required will be nil as the images are coming over anyway as far as I can see.
The only way to limit bandwidth would be to use a device detection script to switch to a theme that excluded the heavy graphics. Again, with this option you are at the mercy of pretty coarse info available on which to make the decision.
|
| |
PurpleEdge
|
Hard code your logo, use another slider...
http://customengineering.com.au
|
| |
richard
|
Quote PurpleEdge:
Of course you can but the whole point of the in-built slider is that it should make more of the design job available at the Artisteer visual stage. The fact that it is so limited makes it just another passenger and it should really be implemented properly to enable it to be properly useful.
|
| |
richard
|
http://customengineering.com.au
BTW, your hardcoded logo is cropped off on the right on QVGA smartphones, losing some of the text. The logo really needs to be responsive to the size available or size to fit the smallest device that will view. QVGA is widespread.
|
| |
PurpleEdge
|
Thanks Richard, I'll see if I can find the code that resizes images in the sheet and use that!
Would that work?
I've reported various issues with header inflexibility to "Support" and they have taken it on board as a feature request.
|
| |
PurpleEdge
|
Hi Richard, can you have a look now and let me know if the header logo resizes? I just added a width and height to the image and resizing seems to kick in? I don't have a phone with that resolution to test with.
http://customengineering.com.au
|
| |
richard
|
Quote PurpleEdge:
Hi Richard, can you have a look now and let me know if the header logo resizes? I just added a width and height to the image and resizing seems to kick in? I don't have a phone with that resolution to test with.
http://customengineering.com.au
It still crops but I can now scroll to see the last 10%.
|
| |
PurpleEdge
|
Thanks Richard, much appreciated!
|
| |
|
|