Solved

Bootstrap  - multiple images file name problem

Posted on 2014-02-21
18
361 Views
Last Modified: 2014-02-25
I was advised to create multiple image size of same image so that bootstrap can call the correct image that "fits" the proper screen size.  

For example, p_1.png is  sized to 752x283.  I was told that I need to create two different sizes of this exact same image.  

I am confused as to how to tell bootstrap which file image to use when the screen is at a certain size.  I cannot save the image (with 3 different sizes) as the same file name.  

http://nsitedesigns.com/nsitedesigns/wiplastic_scott/index.html
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/wiplastic2.css
0
Comment
Question by:nsitedesigns
  • 10
  • 7
18 Comments
 
LVL 29

Expert Comment

by:Randy Downs
ID: 39877478
Maybe this tutorial will help.

view port meta tag, as it is commonly called as, overrides the default viewport and helps to load the style related to the specific viewport

The first of this sections starts with '@media (max-width: 480px)', which sets styles for devices whose maximum width is 480 pixels.

The second section starts with '@media (max-width: 767px)', which sets styles for devices whose maximum width is 767 pixels.

The third section starts with '@media (min-width: 768px) and (max-width: 979px)', which sets styles for devices whose minimum width is 768 pixels and maximum width is 979 pixels.

The next section is for devices with maximum width of 979 pixels. So, it starts with '@media (max-width: 979px)'.

Last two sections starts with '@media (min-width: 980px)' and '@media (min-width: 1200px)'; so the first one is for devices with minimum width 980 pixels and 1200 pixels.

0
 
LVL 58

Expert Comment

by:Gary
ID: 39877484
I wouldn't bother for the few kb you might save in that image.
Otherwise one way is to forget the image tag and use media queries to set the background of the container element according to the screen size.
0
 

Author Comment

by:nsitedesigns
ID: 39877514
Randy, your suggestion didn't really answer my question.  

Cathal, are you suggesting that I just create one very large image and then have the system resize it? Below is link to live site that I am redoing so it is responsive.  Each button has a unqiue hero image plus on the home page, there is animation.  Are you suggesting I create a div in the position of where the image now resides and simply put the image as a background?

Live Site
http://www.wiplastic.com/capabilities.html
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 58

Expert Comment

by:Gary
ID: 39877553
Actually I thought you meant the '3' images.

That page is 800kb in size, cropping a few kb off the images (which you could do just by optimizing them for the web) is not going to make much difference in the larger scale.
If you had images that were running into the 100's of kb then yes it would make sense to have smaller versions but only because you would be saving 100's of kb's.
Best thing you could do is remove the flash, won't even show on iphones etc

As I said earlier the easy way to do this is use a background image that you can set with your media queries depending the screen size
0
 

Author Comment

by:nsitedesigns
ID: 39877794
Actually, the animation is not flash.  It does work on my android phone.  But perhaps, it will not work on iphone.  Not sure.

Right now, i am not so much worried about the animation as  I am worried about getting the hero image (big honking pic to right of navigation) on each page to fit into the opening nicely.  Currently, there is a big gap on the right side that would like to get rid of.  Would making the pic that much wider and put it as a background work?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39877872
Ignore the flash bit - that's the youtube player.

What you could do is add

.carousel-inner .item {
    height: 280px;
    overflow: hidden
}


and
.carousel-inner .item img {
    width: 100%;
}


You'll lose a bit of the image on larger screens.
0
 

Author Comment

by:nsitedesigns
ID: 39878030
That does help ALOT on the bigger screens.  On the smaller screens I have a black background that now extends below the images.  Where is that coming from?  I thought maybe the #animation_container but that doesn't have any background color.
0
 

Author Comment

by:nsitedesigns
ID: 39878038
I think I found it!
0
 

Author Comment

by:nsitedesigns
ID: 39878052
Hmmm, now there is a huge gap below the animation on mobile device.   Is that from modfiying the carousel?  Is the height messing things up for smaller devices?

.carousel-inner .item {
    height: 280px;
    overflow: hidden
}
0
 
LVL 58

Expert Comment

by:Gary
ID: 39878156
I think I would be inclined to go with a background image on the div and remove the image and use cover, problem with this is it will not work on IE8 or lower.  But you could add some css to counter for it.
Else you are going to be constantly fighting against yourself to get it to look right at any size.
0
 

Author Comment

by:nsitedesigns
ID: 39878187
So, maybe the original suggestion to create 3 separate images for the 3 different sizes would be the best option?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39878194
We are talking about the slider...???
0
 

Author Comment

by:nsitedesigns
ID: 39878229
well, yes and no.  the slider will only appear on the home page.  on other interior pages, there will be a hero image.  

Check out live site to see what we are trying to reproduce.
http://www.wiplastic.com/
0
 
LVL 58

Expert Comment

by:Gary
ID: 39878290
I would go with the background image using background-size cover, add an IE shim to your site and that is IE8 and lower covered (so to speak)
0
 

Author Comment

by:nsitedesigns
ID: 39878303
Thanks for the link.  I searched for ie shim and got this page.
https://github.com/Modernizr/Modernizr/search?q=ie+shim&ref=cmdform

This looks a bit beyond what I am familiar with.  YIKES!

Maybe you can help me again?

p.s.  I see you are from the Emerald Isle.  Too bad, if you lived in the states,  I would buy you a beer for all the help you gave me today.  

p.s.s.  Shouldn't you be out having fun on a friday night nearly 11 pm?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39878322
You don't need to do anything with it but include it in your page like any other javascript

<!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Open in new window


And you are done.

p.s.
Very soon! My mouth is already salivating.
0
 

Author Comment

by:nsitedesigns
ID: 39878346
have fun - i am calling it a day.

thanks again!
0
 

Author Comment

by:nsitedesigns
ID: 39885864
Still not "getting this" but I will give you points for your effort and repost question.  Maybe someone else has an idea.
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question