Solved

Bootstrap  - multiple images file name problem

Posted on 2014-02-21
18
356 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I think I found it!
0
 

Author Comment

by:nsitedesigns
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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
Comment Utility
We are talking about the slider...???
0
 

Author Comment

by:nsitedesigns
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
have fun - i am calling it a day.

thanks again!
0
 

Author Comment

by:nsitedesigns
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Read about why website design really matters in today's demanding market.
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 …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now