1

Below is part of the code I use to display multiple rows of products with tiny thumbnails (35x35 pixels) next to each product. It is an admin page that I created, much like a spreadsheet for managing products, so the less space they take up the better.

Everything works great, but I would like to have the client "mouseover" to view a larger image. I understand how to do "onmouseover" and/or work with CSS to achieve enlargement of the image, but usually that's with a traditional <img src... > element.

Is it even possible to alter or tap into wp_get_attachment_image to do the same effect? I can't simply paste code into the <img> element because its "not there", so to speak, to type into (sorry for my lack of terminology, but I assume this is a function rather than static code I can work with).

Or, is there a way to NOT set the array(35,35) and just make the <li> a certain size container, make the image fill that container, and work with that element to do the image alteration?

if ( $attachments ) {
    foreach ( $attachments as $attachment ) {
       $thumbimg = wp_get_attachment_image( $attachment->ID, array(35,35) );
       $productlist .= '<li style="display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px;">' . $thumbimg . '</li>';
    }
}
4

1 回答 1

1

I've done this before in 2 different ways:

1. Display the image as a background image

PHP: (Note I've moved your inline css to make it easier to see the code changes)

if ( $attachments ) {
    foreach ( $attachments as $attachment ) {
        $thumbimg = wp_get_attachment_image_src( $attachment->ID, array(35,35) );
        $productlist .= '<li class="prodimgcontainer" style="background-image:url('.$thumbimg[0] .')"></li>';
    }
}

CSS:

.prodimgcontainer{
    width: 35px; 
    height: 35px; 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px;
}
.prodimgcontainer:hover{
    background-size: 105%;
}

2. Use overflow:hidden on the container element to "crop" the visible portion of the image

PHP:

if ( $attachments ) {
    foreach ( $attachments as $attachment ) {
        $thumbimg = wp_get_attachment_image( $attachment->ID, array(35,35) );
        $productlist .= '<li class="prodimgcontainer">' . $thumbimg . '</li>';
    }
}

CSS:

.prodimgcontainer{
    width: 35px; 
    height: 35px; 
    overflow: hidden;

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px;
}
.prodimgcontainer img{
    width: 35px;
}
.prodimgcontainer img:hover{
    width: 39px;
    height: 39px;
    /* move the position of the image slightly so it remains centered */
    margin-top: -2px;
    margin-left: -2px;
}

This will also work with percentages, but as your images as fixed width, I used those dimensions so it's clearer what's happening.

Note:

These examples are based on work I have done, so the concept is valid in both cases and should work, however, I've made he code changes above off the top of my head so it hasn't been tested.

I found option 1 makes it easier to work with the image, especially if the images are different sizes or they need to be responsive.

于 2017-08-18T04:38:43.483 回答