Jump to content

Slider image size

Lucas Kr
 Share

Recommended Posts

Lucas Kr Newbie

Lucas Kr

Posted
Posted (edited)

Hi there,

 

I would like to know if there is any possiblity to change size of the main picture, so that it will be 1170 px width and 350 px height (see attached picture).

 

In beta it was possible, but all descriptions were put under the picture. Now I can't set the full width of the picture

 

Any suggestions ?

 

Lucas

 

post-758097-0-03296500-1394183908_thumb.jpg

Edited by Lucas Kr (see edit history)
Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

Posted
Posted

I have tried changing this to 1170px in the slider module

It asks for "Slider max width" because its a fluid layout.

But the slider still shows at the same size as it is when installed :(

It seems the module is setting the width as the css is used inline and not via stylesheets.

 

This means we have to start hacking at code for the simplest modification :(

Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

Posted
Posted

Yes i have.

Cache is always off when im working on sites.

I have also turned on "Force Compile"

 

The image I have uploaded in the slider is the correct size, but its getting resized by the module.

 

post-404663-0-22652300-1394320054_thumb.jpg

 

and the module has the correct settings too.

 

post-404663-0-63230600-1394320122_thumb.jpg

 

It just seems that these are being ignored.

 

Although, when I CTRL F5, sometimes the image shows the correct size for a brief moment, then reverts back to the small original size. :/

 

Just hope its another bug thats sorted out before the release in 9 days time ?

Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

Posted
Posted (edited)

ok, so you do need to edit the css to make the css slider fill the width,

so the "Max-width" setting in the module itselfs seems pointless.

 

Edit your default-bootstrap/css/modules/homeslider/homeslider.css file.

The first few lines you can edit  these lines as I have.

/******************************************************************************
						Home Page Slider
*******************************************************************************/
#homepage-slider {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  width: 100%;               /* Change this to 100% */
  max-width: 1170px;         /* Change to 1170px (Full width) */
  max-height: 448px;        
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left; }
  @media (max-width: 767px) {

See my dev site here

http://electroniccigarettenorthwest.co.uk/ps1604/

Edited by MerseyRay (see edit history)
Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

Posted
Posted (edited)

Forget the above method...
Doing that alteration, clear cache and load the page. IT WORKS.

 

post-404663-0-82631500-1394325928_thumb.jpg

 

reload the page again, and its back to the smaller size.

 

post-404663-0-04964700-1394325948_thumb.jpg

 

messed up or what :/

 

It seems the jquery function may be adding some css rule or just resizing it ?

Edited by MerseyRay (see edit history)
Link to comment
Share on other sites
Lucas Kr Newbie

Lucas Kr

Posted
  • Author
Posted (edited)

Ok so turning off cache and turning On Force Compile works. But won't it slow down the site ? After switching cache on again the picture gets back to it's smaller size. I don't really know why it's not possible to set the width I need from the BO. Switching off module which is next to for example slider should give you a chance to set the width you need. Without this I think that Live Edit etc. has no sense.

Edited by Lucas Kr (see edit history)
Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

Posted
Posted

I "Think" I have found the culprit.

 

Even though we can set the width of the slider in the homeslider module config page, it seems this is ignored

 

in the file themes/default-bootstrap/js/modules/homeslider/homeslider.js there is some code like this

$(document).ready(function(){

	if (typeof(homeslider_speed) == 'undefined')
		homeslider_speed = 500;
	if (typeof(homeslider_pause) == 'undefined')
		homeslider_pause = 3000;
	if (typeof(homeslider_loop) == 'undefined')
		homeslider_loop = true;
    if (typeof(homeslider_width) == 'undefined')
        homeslider_width = 779;

it sets the width to 779 here, so simply change it to 1170

 

It seems to be ok on my site now :)

Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

Posted
Posted

Yes it seems solved on my site :)

Just need the O.P to test on their site and then he can mark topic as [sOLVED]

 

Warning.. do not update the "ProductComment" module on the 1.6.0.4 install...
It just killed my shop so I had to delete the module via FTP

Link to comment
Share on other sites
Lucas Kr Newbie

Lucas Kr

Posted
  • Author
Posted (edited)

Ok so that's what I've done and everything seem that works. I've changed homeslider.js file line with homeslider_width = 779;  (set the 1170). Now I changed a little bit homeslider.css.

padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  width: 66,6%;
  max-width: 1170px;
  max-

height: 448px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left; } @media (max-width:767px)  #homepage-slider {width: 100%; max-width: 100%;padding-top: 20px; }1

It worth seeing that when you put 1170px everywhere you won't be able to put another module next to slider when you decide to have smaller slider (it's a kind of permanent set), so the solution isn't perfect and still there is no full customization from BO. I think is some kind of a bug.

Edited by Lucas Kr (see edit history)
Link to comment
Share on other sites
  • 3 weeks later...
Lucas Kr Newbie

Lucas Kr

Posted
  • Author
Posted

I also has that problem and I don;t know why setting 1200 px in BO doesn't work. The solution above doesn't work on 1.6.0.5 it worked on 1.6.0.4, but not now. Any ideas ? Any knowledge about some update of the module, because I can see many people have this problem.

Link to comment
Share on other sites
webkod Newbie

webkod

Posted
Posted

I've changed .css, .js, and still not working... this is the problem:

 

<div class="bx-wrapper" style="max-width: 779px; margin: 0px auto;">

 

When I clear cache it is ok, but it come back to 779px after clickin homepage again...

 

I have no idea whats wrong   :(

Link to comment
Share on other sites
leecharles Newbie

leecharles

Posted
Posted

Do none of you that are having problems have a live dev site ?

Its much easier for us to help when we can see the problem ourselves :)

 

Its working 100% fine on 1.6.0.5 as that is what I am using for developing our theme.

 

( http://electroniccigarettenorthwest.co.uk/ps1605/ )

Hi MerseyRay,

just looked at your site and want to know how you organised your banner pictures?

When i upload mine from theme configurator they just line up above each other and not side by side.

Tried live edit to move them after but did not work.

Also trying to have slider on left with two banner pics on the right but it always works the other way round?

Any advice please?

Fellow Uk Prestashopper

Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

Posted
Posted (edited)

My is in test progress, here is the link:

 

http://webkodeks.eu/ps-themes/shop4/en/

Check post #15 on this post, you havent changed the code in the js file

 

(homeslider_width=779)

 ^ That is from your compiled js code

 

You have changed in in homeslider.css, but the js file keeps overriding it :/

Edited by MerseyRay (see edit history)
Link to comment
Share on other sites
Lucas Kr Newbie

Lucas Kr

Posted
  • Author
Posted (edited)

changed both files, switched off cache and reuploaded picture and nothing happened. I also can see that css file contains queries for different devices (@media) so changing everything isn't a good solution I think if you want to keep your responsivity work

 

UPDATE: I checked it on different deviced and it seems there is a lack of some query for devices with higher resolution that 779 and I think that should be fixed. On the rest everything seems to be fine without changing any file

Edited by Lucas Kr (see edit history)
Link to comment
Share on other sites
Ray UK Collaborator

Ray UK

Posted
Posted (edited)

changed both files, switched off cache and reuploaded picture and nothing happened. I also can see that css file contains queries for different devices (@media) so changing everything isn't a good solution I think if you want to keep your responsivity work

 

 

The first lines of you homeslider.css should look like this.

/******************************************************************************
						Home Page Slider
*******************************************************************************/
#homepage-slider {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  width: 100%;
  max-width: 1170px;
  max-height: 448px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left; }

Yours looks like this

/******************************************************************************
						Home Page Slider
*******************************************************************************/
#homepage-slider {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  width: 66.6%;
  max-width: 779px;
  max-height: 448px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left; }

This is the first style that is applied, the media queries are after this and for smaller screen sizes.

 

also, make sure you change the js file in the theme folder, and not the one in the root

 

 

UPDATE: I checked it on different deviced and it seems there is a lack of some query for devices with higher resolution that 779 and I think that should be fixed. On the rest everything seems to be fine without changing any file

 

I think the max width has been set to 779 because in the default theme there is 2 banners to the right of the slider. I didnt want these, thats why I have set it to 1170px and 100%

Edited by MerseyRay (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
WSH90 Newbie

WSH90

Posted
Posted (edited)

I follow #8 and #15 accordingly, however it doesn't work...

 

Update:

 

So total 4 thing have to do.

1.themes/default-bootstrap/css/modules/homeslider/homeslider.css

  • change the "max-width" to 1170px from 779px
  • change the "width" to 100% from 66.6%

2.themes/default-bootstrap/js/modules/homeslider/js/homeslider.js

  • Change to "homeslider_width = 1170;"

3.Go to back office > Modules > "Image slider for your homepage" module and change the "max width" to 1170px too

 

4.Clear your browser cache, and refresh!

 

Well. Not sure whether have to be done in sequence, but at least this way works on me

 

post-782827-0-28676600-1397234208_thumb.jpg Well as u can see i found the navigation for the slider, the last thing is to make the images into 1170px width =)

Edited by WSH90 (see edit history)
Link to comment
Share on other sites
kamiliok Newbie

kamiliok

Posted
Posted

I "Think" I have found the culprit.

 

Even though we can set the width of the slider in the homeslider module config page, it seems this is ignored

 

in the file themes/default-bootstrap/js/modules/homeslider/homeslider.js there is some code like this

$(document).ready(function(){

	if (typeof(homeslider_speed) == 'undefined')
		homeslider_speed = 500;
	if (typeof(homeslider_pause) == 'undefined')
		homeslider_pause = 3000;
	if (typeof(homeslider_loop) == 'undefined')
		homeslider_loop = true;
    if (typeof(homeslider_width) == 'undefined')
        homeslider_width = 779;

it sets the width to 779 here, so simply change it to 1170

 

It seems to be ok on my site now :)

 

This works, but whem I hook Theme Configurator near slider, it resizes to original size. So in homeslider.js you also need to change line 59:

 

 if ($('#htmlcontent_top').length > 0)
    $('#homepage-slider').addClass('col-xs-12');
    else
    $('#homepage-slider').addClass('col-xs-12');
 
set both to 12 (was 8).
 
Thanks! now it works like I need it to :)
Link to comment
Share on other sites
  • 7 months later...
Sarak Newbie

Sarak

Posted
Posted (edited) 
kamiliok, on 25 Apr 2014 - 3:39 PM, said:

 

This works, but whem I hook Theme Configurator near slider, it resizes to original size. So in homeslider.js you also need to change line 59:

 

 if ($('#htmlcontent_top').length > 0)
    $('#homepage-slider').addClass('col-xs-12');
    else
    $('#homepage-slider').addClass('col-xs-12');
 
set both to 12 (was 8).
 
Thanks! now it works like I need it to :)

 

 

I'm sorry to be a pain in the A, and bring this up again, but I have tried every suggestion in this thread and my slider is just not cooperating. It is currently floating to the left but the width remains the same, regardless of what changes I make.

 

As well as making the changes to the files, I have also tried to adjust the height in BO but strangely, it won't change.

I set it to 1170 from 779, I press 'Save'. The change just won't save and it automatically goes back to 779 by itself. I have attempted this several times but each time is the same.

 

Updating Cache and Force Compile make no difference either.

 

You can see here: http://www.totalfancydress.com

 

When I right-click the site and 'View Page Source', I can see this but for the life of me, can't file the file this is in:

var homeslider_loop = 1;

var homeslider_pause = 3000;

var homeslider_speed = 500;

var homeslider_width = 779;

 

Any new suggestions are very welcome as I would love this sorted!

Edited by Sarak (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
aconta Newbie

aconta

Posted
Posted (edited)

i have no ideea about the implications but this is how i solved the problem with the fk. slider :

(you will lose all pictures. if you have to move it up a little use module = positions  = Run Live Edit = and drag and drop it.)

 

1. i have deleted  all default theme, :angry:   (maybe you should delete only  ..... module ... :wacko: ) = with preferences = themes = delete

 

2.  edited homeslider.php  on cpanel this time and changed (edit) 779 to 1275 (whatever, easy and fast to find)

 

public_html/modules/homeslider/homeslider.php

 

3. hit "Reset" on the module in PrestaSHop.  after that when you enter to configure you will have 1275 (whatever) and have to reinstall all pictures.

 

 

p.s. i will never use reset again with any module. maybe you should find a solution without deleting all the default theme. i think you can delete only slider module in default theme then modify the file. i can change  everyting now  but i have no default slider module.  i need a guinea pig who will only modify the same file on default theme and in the one mentioned here  and not delete anything.  this guineapig is already dead.

Edited by aconta (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
SergeR Newbie

SergeR

Posted
Posted

I searched records in ps_configuration table which names contains 'homeslider' (name LIKE '%HOMESLIDER%') and changed all rows with HOMESLIDER_WIDTH name to the 1170.

 

When saving configuration from BO only first instance of these rows is changed. Why?

Link to comment
Share on other sites
  • 4 weeks later...
larrypham Newbie

larrypham

Posted
Posted (edited)

Hi all,

 

To solve this issue, please open themes/default-bootstrap/js/modules/homeslider/homeslider.js

then add the width for slider like this http://i.imgur.com/2kwbhtB.png

2kwbhtB.png

 

$(document).ready(function(){

 
if (typeof(homeslider_speed) == 'undefined')
homeslider_speed = 500;
if (typeof(homeslider_pause) == 'undefined')
homeslider_pause = 3000;
if (typeof(homeslider_loop) == 'undefined')
homeslider_loop = false;
if (typeof(homeslider_width) == 'undefined')
homeslider_width = 1170;
 
 
$('.homeslider-description').click(function () {
window.location.href = $(this).prev('a').prop('href');
});
 
if ($('#htmlcontent_top').length > 0)
$('#homepage-slider').addClass('col-xs-8');
else
$('#homepage-slider').addClass('col-xs-12');
 
if (!!$.prototype.bxSlider)
$('#homeslider').bxSlider({
useCSS: false,
maxSlides: 1,
// slideWidth: homeslider_width,
slideWidth: 1170,
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
autoHover: true,
auto: homeslider_loop,
speed: parseInt(homeslider_speed),
pause: homeslider_pause,
controls: true
});
});
Edited by larrypham (see edit history)
  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
  • 2 weeks later...
 Share
Go to topic listing
×
×
  • Create New...