WordPress.org

Ready to get started?Download WordPress

Forums

specify images using css block elements (19 posts)

  1. charlietech
    Member
    Posted 1 year ago #

    In gtmetrix.com i have an F in specify images. I have read the notes but still dont quite understand how to incorporate it. Here are some of the link that needs to be specified.
    How would i make them a block level element? how to determine the name of the block level Example .feature img.usergroup { width: 640px; height: 250px; })????
    P.S the 640 x250 are in my feature content slider. How would i name block images in my sidebar? would i use the firebug names and block them?

    http://cdn.xertionfitness.com/wp-content/uploads/2012/07/healthy-spices.jpg (Dimensions: 640 x 250)
    http://cdn.xertionfitness.com/wp-content/uploads/2012/08/healthy-smootie.jpg (Dimensions: 640 x 254)
    http://cdn.xertionfitness.com/wp-content/uploads/2012/08/itworks-ad.jpg
    http://xf5.xertionfitness.netdna-cdn.com/wp-content/uploads/2012/07/Optimized-6402.jpg (Dimensions: 640 x 330)
    http://xf5.xertionfitness.netdna-cdn.com/wp-content/uploads/2012/07/Superfoods.jpg (Dimensions: 640 x 250)

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You would probably need to assign an id to each image and then use that id in the CSS.

    Use "display: block" to make them block.

    So the CSS would be:

    #myimage img {
    display: block;
    height: XXXpx;
    width: XXXpx;
    }

  3. charlietech
    Member
    Posted 1 year ago #

    I dont know this stuff so where would i find the ids at?
    Could i use #myimage img {
    display: block;
    height: XXXpx;
    width: XXXpx;
    }
    exactly like that in my css? if i have 5 images in the sidebar with the same width and height, how do i specify that?

    Thanks for the help!

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You'd have to assign a unique ID to each image -- that's how CSS works.

    If they are the same size, use a class and then use that class as the CSS selector.

    .myclass img {
    display: block;
    height: XXXpx;
    width: XXXpx;
    }

    Sounds like you should learn a bit more basic CSS :) -- there is LOTS of great info and tutorials out there...

  5. charlietech
    Member
    Posted 1 year ago #

    well i know i need alot of work but im just trying to get this done right now.most of the time, firebug does the css for me and i can move things up and down. when i just add
    .featurecontent img {
    display: block;
    height: 250px;
    width: 640px;
    }

    my grade didnt go up and it added more http request

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Well, gtmetrix measures and how-to is really not a WP issue ... have you used their site and recommendations for help?

  7. charlietech
    Member
    Posted 1 year ago #

    No but did i do it correctly for the post above?

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The code is okay, but whether or not it is "working" on a page -- dunno I could not find any instance of that class on the home page -- is it on another page? What images are you assigning it to?

  9. charlietech
    Member
    Posted 1 year ago #

    would you look at my site in the feature content slider and tell me how to assign them correctly?
    http://www.xertionfitness.com

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    For something like that I would use images that are all the same dimensions -- looks like they are supposed to be 640 x 250 ??
    In that case, the CSS code would be:

    img.sliderImage {
       width: 640px;
       height: 250px;
    }

    But as you probably noticed, right now many of your images are messed up -- distorted -- because they are being "scaled" (resized automatically). The way to avoid that is to resize and/or crop (meaning you have to CUT the photo to the right size) all the images to the right dimensions BEFORE you upload them. Also make sure that the size (i.e. file size -- generally meaning resolution) is not too big -- because that makes them load more slowly. You need to use a photoshop like program to do that kind of work -- there are various options, including free ones that you can use.

    BTW, be sure that you are not using copyrighted photos without permission.

  11. charlietech
    Member
    Posted 1 year ago #

    thank you so much, i really appreaciate the help , i made those images myself with my phone beside one. far as the images in the sidebar that are 173x125, would i do something like

    img. widgetImage
    width: 173px;
    height: 125px;
    }

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    There is no class called "widgetImage" -- you have to use Firebug (or some other similar tool) to look at what CSS classes are being used in the HTML code. In this case, there is no common class for those images, but there is a class for each of those widget boxes -- so you can use one of those -- likely this:

    .dbx-content img {
       styles here
    }

    In this case, the image tag goes AFTER the class because it's selecting images that are in an element with that class. Yes, I know CSS is confusing and kinda tricky... like I said, you WILL need to learn it if you plan to keep working on WP.

  13. charlietech
    Member
    Posted 1 year ago #

    Thanks so much wpyogi,
    thats all i needed to know, I will work on it figure it out. last question, if i use the dbx content for the widget area, then all the images have to be 175 x125? what about ads?

    I just want to say again thank you so much for the input that you have already given me. tremendous help.

  14. s_ha_dum
    Member
    Posted 1 year ago #

    Your slideshow images don't have heights and widths.

    <img class="featured-excerpt-bottom" alt="Superfoods that need to be your weight loss diet" src="http://xf5.xertionfitness.netdna-cdn.com/wp-content/uploads/2012/07/Superfoods.jpg">

    The <li> inclosing the images has a height, but no width.

    Try adding a height and width to .featured-excerpt-bottom

  15. charlietech
    Member
    Posted 1 year ago #

    thanks!

    I dont if it work because my specify image score didnt change but i did this

    .featured-excerpt-bottom {
    width: 640px;
    height: 250px;
    {

  16. s_ha_dum
    Member
    Posted 1 year ago #

    Yeah, that is what I had in mind, and it is applied correctly. The gtmetrix instructions implied that a CSS rule would work but maybe they require it to be a style= tag and not in a stylesheet. That may require editing the slideshow plugin source.

  17. charlietech
    Member
    Posted 1 year ago #

    Yea im doing something wrong because i got the hang of how to find them but its not working correctly. could you check the site again and see if these are correct?

    img.blogtitle left {
    width: 300px;
    height: 85px;
    }

    img.featured-excerpt-bottom {
    display: block;
    width: 640px !important;
    height: 250px !important;
    }

    img.alignleft {
    max-width: 175px;
    max-height: 125px;
    }

  18. s_ha_dum
    Member
    Posted 1 year ago #

    Those rules seem to be working. If gtmetrix still doesn't accept it, you probably need to use the style= attribute, or maybe straight HTML height and width attributes.

  19. charlietech
    Member
    Posted 1 year ago #

    Ok, how would i set up the style attributes?

    this is an example for
    img.alignleft {
    max-width: 175px;
    max-height: 125px;
    }

    <alignleft style="width:175px;height:125px;</alignleft>

    would this be right or what am i missing? would i need to add the img before the alignleft?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.