Results 1 to 6 of 6

Thread: Setting Image Dims for SEO

  1. #1
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Setting Image Dims for SEO

    1) Script Title:
    SEO and Ultimate Slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem:
    I am doing a page speed test on my page at http://www.primair-inflatables.com and it is telling me that I do not have dimensions set for the images I am running in my slide, which is causing me to get grade F as I have not specifed image dimensions.

    This is the div I have setup as a placeholder:
    <div class="slide" id="fadeshow2"></div>.
    with this css:
    .slide {
    -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.5); /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
    -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.5); /* Safari */
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    height: 263px;
    width: 350px;
    }

    I have added all the images into this div but that did not work, so I am assuming that it is seeing the images in the javascript on my page

    My question is how can I setup dims for each image runng in the slideshow?
    I hope this makes sense, as I am just learning as I go along.

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    So what?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Here's a discussion about getting the values using Javascript (ignore the jQuery-specific responses, or use jQuery if you'd like):
    http://stackoverflow.com/questions/6...ing-javascript
    But the point is that this is only a patch and won't actually change your source code because JS operates after the page loads.

    A simpler answer is to specify a height and width (or at least one of them?) then change the images' sizes to fit based on that, such as all of them being 300px wide. Your choice.
    Or you could just crop all of the images to the right size. If this is for a class, just do whatever your teacher says then keep the original design if you like it better-- then you have two options.


    There IS a way to do this properly, but it's probably significantly beyond what you will do for this class (and possibly beyond your level of web design experience, although you can always learn it-- it's not particularly difficult). That is using a server-side language such as PHP to check the actual files on your server then generate the appropriate source code for the images based on their heights/widths.
    The easiest way to do this is the following:
    http://php.net/manual/en/function.getimagesize.php
    But using PHP requires a few things, such as having a server with PHP installed/enabled, changing the extension of your pages to .php, and configuring everything to be generated through PHP.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Whoa - this is for school? Well in that case, we don't do homework. Using PHP to write out your image's dimensions will only slow the page down though. I thought this grade F was for the speed test, not for school. If it's just for the speed test, then it's nothing to worry about. The page is fast, layout space is allocated by the css on the .slide class so the browser doesn't have to spend any appreciable time wondering about the image size. You could speed that up a little. Since all of the images are 350x263, you could specify that in the css:

    Code:
    #fadeshow2 .gallerylayer img {
    	width: 350px;
    	height: 263px;
    }
    You may still fail the speed test, but the images now have dimensions and the browser will be spending 0 time wondering about them.

    But you would save way more time by optimizing those images.

    In an unrelated matter, this:

    Code:
    <script type="text/javascript">
    
     // Add a script element as a child of the body
     function downloadJSAtOnload() {
     var element = document.createElement("images/nav/cbjscbinsmenu.js");
     element.src = "images/nav/cbjscbinsmenu.js";
     document.body.appendChild(element);
     }
    
     // Check for browser support of event handling capability
     if (window.addEventListener)
     window.addEventListener("load", downloadJSAtOnload, false);
     else if (window.attachEvent)
     window.attachEvent("onload", downloadJSAtOnload);
     else window.onload = downloadJSAtOnload;
    
    </script>
    isn't doing anything other than throwing an error. That highlighted line should be:

    Code:
    var element = document.createElement("script");
    But even then, the menu probably won't work. You would be better off just using an ordinary external script tag and then running the InitEasyMenu function onload or better yet as the last thing before the </body> tag.

    Like replacing the entire code block with:

    Code:
    <script type="text/javascript" src="images/nav/cbjscbinsmenu.js"></script>
    <script type="text/javascript">
     if (window.addEventListener)
     window.addEventListener("load", InitEasyMenu, false);
     else if (window.attachEvent)
     window.attachEvent("onload", InitEasyMenu);
     else window.onload = InitEasyMenu;
    </script>
    or skip that second script and add just before </body>:

    Code:
    <script type="text/javascript">
    InitEasyMenu();
    </script>
    Last edited by jscheuer1; 11-27-2011 at 09:20 PM. Reason: add - In an unrelated matter . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Oh, maybe I read that wrong. I don't know. I thought the F was for school. If it's not, I agree and I wouldn't worry about it. If it is for school, I'd just modify the page enough to get a good grade and move on, keeping the original code for later.
    If it is for school, I don't have a problem helping because it sounds like you've already done the work and gotten a grade and you're just asking for extra help-- I'd still hesitate to do anything for this, but just giving some advice should be fine.

    John's advice is probably most helpful though.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  6. #6
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks guys for your help The image size in css worked, but you knew it would anyway. As for deferring JS I could never get it to work without causing my screen to go blank so I gave up on it, figured it probably was not a big deal anyway.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •