inserting photos into responsive...

Dec 12th, 2012 at 10:13 PM
User 138688 Photo

tom
Registered User
242 posts

I am working up a new website to replace one that is a mixture of PHP, html and joomla.
The problem I have is I don't know what to do. I did my usual tables thing and it did not work at all. I tried to just replace the existing photos resized by way of a test and that did not work well either. I don't want mess up the way the page works. I like how the page adjusts according the viewing size. How do setup the photos into a page like this. I do not have a lot of experience with div instructions.
I wish to put several photos into the page either vertical or horizontal layout...something like this http://www.pridhamsstudio.com/?p=photographers
This the page I am trying to insert photos into.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<meta name="Description" content="Ecologic Theme">
<meta name="author" content="CoffeeCup Software, Inc.">
<meta name="Copyright" content="Copyright (c) 2011 CoffeeCup, all rights reserved.">
<title>Ecologic Theme - Contact</title>
<link rel="stylesheet" href="stylesheets/default.css" />
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1><a href="index.html">Photographers for 50 years</a></h1>
<h2>Nova Scotia's most experienced photographers</h2>
</header>
<section id="mainContent" class="clear">
<nav>
<h3>Main Menu</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>




</ul>
</nav>
<section id="mainRight">
<div><img src="images/contact_1.jpg" width="165" height="205" alt="harry c pridham" title="" border="0" /></div>
<div><img src="images/contact_1.jpg" width="560" height="177" alt="" title="" border="0" /></div>
<br />
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exertion ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exertion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat. Ut enim ad minim veniam, quis nostrud exertion ullamco laboris nisi ut aliquip.</p>
<h2>Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exertion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat. Ut enim ad minim veniam, quis nostrud exertion ullamco laboris nisi ut aliquip.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exertion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat. Ut enim ad minim veniam, quis nostrud exertion ullamco laboris nisi ut aliquip.</p>
<h3>Fancy Numbered List</h3>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing</li>
<li>Nostrud exertion ullamco laboris nisi ut aliquip</li>
<li>Duis aute irure dolor in reprehenderit in voltate velit</li>
<li>Nostrud exertion ullamco laboris nisi ut aliquip</li>
<li>Duis aute irure dolor in reprehenderit in voltate velit</li>
</ol>
<h3>Fancy Bulleted List</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing</li>
<li>Nostrud exertion ullamco laboris nisi ut aliquip</li>
<li>Duis aute irure dolor in reprehenderit in voltate velit</li>
<li>Nostrud exertion ullamco laboris nisi ut aliquip</li>
<li>Duis aute irure dolor in reprehenderit in voltate velit</li>
</ul>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exertion ullamco laboris nisi ut aliquip ex ea commodo consequat.</blockquote>
</section>
<!-- end mainRight -->
</section>
<!-- end mainContent -->
<footer>
<p>&copy; 2011 Ecologic, Inc. All rights reserved. &nbsp;&nbsp; <a href="http://coffeecup.com">HTML Editor Theme</a> by CoffeeCup Software.</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</footer>
</body>
</html>
Tom Mooney
Dec 13th, 2012 at 08:35 AM
User 38401 Photo

Jo Rice
Senior Advisor
10,951 posts

If you are working with Joomla you should probably look for an addon/extension that will do what you need instead of using external scripts if you can. The reason for that is that it's not always easy to find out where to put things when using a Joomla site as you will need specific files uploaded to specific places, scripts will have to go into specific pages in specific spots and Joomla isn't exactly the most user friendly when it comes to finding the locations to put scripts (or it didn't used to be).

Either way though, there is probably a really good extension created specifically for Joomla to do most anything you would need.
Jo

http://elementsinwebdesign.com
Dec 13th, 2012 at 09:40 AM
User 2147626 Photo

SadDuck
Ambassador
2,958 posts

Tom, have a look here... http://adaptive-images.com/

Adaptive Images is free to use if you put a small credit link for the author on the site. Scroll to the bottom of the page for full license info and the download page. With very little code to add you can have your images adapt to screen size in a matter of minutes.

Hope this helps.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
Dec 13th, 2012 at 02:46 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

Tom, it looks like you're going to give the Ecologic theme a try?

For the main image on the home page (leaf with water drops), just take the height/width out.
<section id="mainRight"><div><img src="images/home_img.png" alt="" title="" /></div>


The CSS style sheet has this for the images:
img {
width: 100%;
}
...So the images will fill 100% of the space they're in. You can get more control in the CSS if you need it. For instance, you might want an image at 80% of the <div>'s space, and then want to specify a minimum width (something like this: min-width: 180px;) to keep it from getting too small.
Also, if you have some images that are small to begin with (small enough to fit on a phone screen at their original size), you don't need to do anything to them. Leave their width/height in place so they won't get stretched out of proportion by any CSS rules for the larger images.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.