CODEWITHSUNDEEP
htmlcssimage
Genadinik
Genadinik

Reputation: 18649

Displaying some images seems to break styling on Google

I am trying to display some photos on a page, and it is breaking the styling of the page. Here is an example. See on the right side of the page, the images are broken, and they actually get displayed over other HTML elements like an H2 tag which says "coming soon"

Example here:

http://www.comehike.com/outdoors/parks/park.php?park_id=15

Any idea how to fix this? The problem is worse on Google Chrome

Upvotes: 0

Views: 70

Answers (1)

Stephane Gosselin
Stephane Gosselin

Reputation: 9148

The html markup is a bit confusing, for one they all use http://wwww reference but they are hosted on the same server. Maybe I missed something but you can probably use a local site path relative to the web page, something that would be simplified sort of like the following non working code example:

<span style="margin: 3px;">
<a href="hikes/hike_image.php hike_photo_id=&amp;photo_path=img/hiking_photos/108_2/full_cannon2.jpg">
<img src="img/hiking_photos/108_2/small_cannon2.jpg" 
style="border: none;"></a>
</span>

This would make for a faster load time, save bandwith, and just be plain more efficient in my very humble opinion. Usually one uses http:// in image links when they are on a remote site.

There are multiple broken images when I load the page, it seems maybe it is the script that generates the markup that is breaking the layout.

To fix this, I would rip out the whole image-generation thing and simplify the mark-up just to have it work 'statically', ie without scripts to output images and/or markup.

Then, once it works in a static manner I would attack dynamic output, though I rarely use such techniques because I feel most of the time they are overkill for the small projects I maintain.

Happy coding & good day friend.

Update:

Storing the image path in a variable for easy site-wide changes:

One (simple) option is to use good old php for your image paths. IE, in main script:

 define('BASE_PATH',realpath('.'));
 define('IMG_PATH', BASE_PATH . "/img/);
// to inlude an image::
 <img src="<php echo IMG_PATH; ?> pic.jpg" />

This way, changing IMG_PATH would change all the img tags that use the variable, and by using BASE_PATH this would work even if you move or copy the site on a different host.

Look up basename() function the man and related functions for more tips and examples like this.

Upvotes: 2

Related Questions