Post by Winteroak » Fri Oct 19, 2018 10:24 am

The images that I have loaded into the carousel set in the center with a big white field to each side of them. The images I have loaded into the slider at the bottom of the home page also has a large field of white. I need to either make the images fill in the glowing white fields (carousel & slider), or a way to make both of those white fields grey or black. It would be best to be able to enlarge the images and darken the white fields as well so that absolutely no white will show. The template that I am using for my site is dark (greys and black), and I really do not want any glowing white showing anywhere. Is it possible to do this, and where do I make the changes? If the white backgrounds can not be changed, can they at least be made transparent? The version of opencart that I am using is 3.0.2.0. and the carousel images I am using are 1200 x 800. Thank you for your time and consideration in this matter.

Newbie

Posts

Joined
Mon Oct 08, 2018 11:54 am

Post by opencart.my » Sat Oct 20, 2018 9:39 pm

OpenCart will automatically scale & resize the images you uploaded based on the Width & Height dimension specified in the Slideshow extension in Admin > Extensions > Extensions > Modules > Slideshow. It will not distort the ratio of the image, therefore, the only way is to fill up the empty space with white colour.

The colour white is hard-coded in the OpenCart core file in /system/library/image.php, so it is best not to modify it.

You can modify the width & height values in the Slideshow extension to match with your image size, which is 1200 x 800, and make sure all other images you plan to use for the slideshow has the same dimension.

Developing Quality OpenCart Extensions since 2011. View my Extensions.


User avatar
New member

Posts

Joined
Mon Jan 22, 2018 6:03 pm


Post by cfardon » Wed Nov 14, 2018 7:27 pm

Hi,
If you use .png pictures for your slideshow and then add the following to your stylesheet you can make the white bits to be the same colour as your background. just change the background colours to the colour of your choice.

Slideshows:
#slideshow0 {
background-color: #353E47;
}

Carousels:
#carousel0 {
background-color: #353E47;
}

Regards
Chris Fardon
Fardon Webhosting & Design
https://www.stoneconceptsoz.com/ocart


New member

Posts

Joined
Sun Jun 28, 2009 4:07 pm

Post by VeeSwan » Mon Jun 22, 2020 3:10 am

opencart.my wrote:
Sat Oct 20, 2018 9:39 pm
You can modify the width & height values in the Slideshow extension to match with your image size, which is 1200 x 800, and make sure all other images you plan to use for the slideshow has the same dimension.
I have the same issue, the slider and carousel boxes are larger than the images I want to use, 850 x 500 in my case, and both modules I made to suit the size, but it did nothing in the way of actually changing. https://guardianmask.com/OCCart/

I am also using the 3+ version of Open Cart

Newbie

Posts

Joined
Thu Jun 18, 2020 1:10 am

Post by by mona » Mon Jun 22, 2020 4:14 am

You can make the slideshow size 850 x 500 within the module itself.
opencart.my wrote: ↑
Sat Oct 20, 2018 2:39 pm
You can modify the width & height values in the Slideshow extension to match with your image size, which is 1200 x 800, and make sure all other images you plan to use for the slideshow has the same dimension.
Check you have refreshed cache and in dashboard (top right cog)?

I have a module that will fit the best size to screen .. which is what I suspect is the issue you are having but not realising.
https://www.opencart.com/index.php?rout ... load_id=49

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by letxobnav » Mon Jun 22, 2020 8:28 am

As long as you aspect ratio and orientation of the images in your slider module are the same as the aspect ratio and orientation of your originals there will be no white bars.
OC first creates a white image of the dimensions set in admin and then best fits the original onto that image, resizing while keeping the originals aspect ratio.
Images are browser cached, not server cached (they are put in the so-called cache directory but that is just where all resized images go) so you need to clear the browser cache when changing images (unless the generated filename is new), no need to clear any of the server caches.

Crystal Light Centrum Taiwan
Extensions: MailQueue | SUKHR | VBoces

“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


User avatar
Expert Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by VeeSwan » Tue Jun 23, 2020 2:16 am

by mona wrote:
Mon Jun 22, 2020 4:14 am
You can make the slideshow size 850 x 500 within the module itself.
opencart.my wrote: ↑
Sat Oct 20, 2018 2:39 pm
You can modify the width & height values in the Slideshow extension to match with your image size, which is 1200 x 800, and make sure all other images you plan to use for the slideshow has the same dimension.
Check you have refreshed cache and in dashboard (top right cog)?

I have a module that will fit the best size to screen .. which is what I suspect is the issue you are having but not realising.
https://www.opencart.com/index.php?rout ... load_id=49

I have modified both the carousel and slide show modules to reflect my image size of 800 x 500 and also refreshed the cache with no change. I've made very few changes to the installed cart, this was the first I started to try to change but it is not changing. The photos that are on there now, are the photos on our main website that we want to use as none of the others feature the main product as well as these three images which we cannot modify to fit the current width of 1200. https://guardianmask.com/OCCart/

Newbie

Posts

Joined
Thu Jun 18, 2020 1:10 am

Post by by mona » Tue Jun 23, 2020 3:10 am

Thank you for the link .. ok so you just want to centre the image inside the main slideshow?

Add this to your stylesheet and that should work.

Code: Select all

#slideshow0 .img-responsive {
margin: auto;
}
If you are trying to get a 1200px image and can not save the image as 1200px, you can try

Code: Select all

#slideshow0 .img-responsive {
margin: auto;
width: 1200px;
}
You will need to check the above works across browsers, it is not really a very good solution, changing the image size is the way to go and there is nothing wrong with the quality of the image to stop you doing that.

If you are trying to best fit the screen (it can also adjust it to focus the actual eye mask) and fill the whole space adapting the image to fit the space (as opposed to the white space(solution1)) and not take up all the page (solution2). My module will do that. It will also allow you to add some text and links to promote the product / show benefits it bullet point etc.

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by VeeSwan » Tue Jun 23, 2020 5:17 am

Thank you for the tips and help, but none of it worked. I also noticed the phone number at the top, it isn't changing either, you can click on the phone icon and it shows the correct information but the phone number is not correct on the right side and I have refreshed the cache. Only a few of my updates are working and I can see this taking me weeks if not longer to get through.

I'm finding the cart to be a bit more confusing than Zen Cart which was pretty awful to learn.

Does anyone know of a service for setting up these carts? I honestly don't know if I can do this.

Newbie

Posts

Joined
Thu Jun 18, 2020 1:10 am

Post by by mona » Tue Jun 23, 2020 6:35 pm

Hi VeeSwan,

If changes you are making are not taking effect then this is caching (or the edits you are making are not to the correct files).
If you have made the changes above to the correct css file, it should work, as in I know it works so the problem is not the code itself.

There are a number of places caching takes place ..
Admin = > Modifications = > top right refresh (you can clear also and then refresh)
Admin => dashboard => top right cog (you can turn off caching for development mode here also)
Browser => depending on your browser this also caches files
Server => some servers automatically cache files

Yes, you can post viewforum.php?f=88 which is the commercial forum and I am sure lots of people will contact you with quotes.

DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.


https://www.youtube.com/watch?v=zXIxDoCRc84


User avatar
Expert Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by VeeSwan » Wed Jun 24, 2020 12:43 am

Thank you so much for the help, I truly appreciate it. I'm going to try the suggestions again, and I am using two browsers to check it by the way, the new microsoft Edge and Chrome. I'll give those a try and see if I have any progress, if not, I don't have a lot of time to burn and I'll try the suggested forum. Thank you again for your help, I'm sure I'll be back!

Newbie

Posts

Joined
Thu Jun 18, 2020 1:10 am
Who is online

Users browsing this forum: JNeuhoff and 146 guests