displaying attachment custom fields

  • rosyb

    (@rosyb)


    8 years, 7 months ago

    We have added custom fields to the media library, and this is working well, but the issue is getting the data back out in a form that suits us.

    By altering the template for the attachment page we can display the fields along with the image. See here: example when clicking on the image of the rose at the bottom.

    However, what I am really wanting is something more like this example where when you mouseover an image you get the data shown.

    I don’t mind if it is a popup box, or a drop-down caption box below the image, but I just want to find a way to display this data when needed without it always being there or needing to open a separate window/tab!!

    Many thanks in advance for any help received, as i am sure there is a logical solution but I just can’t see it!

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    8 years, 6 months ago

    You need a bit of javascript to do the follow-the-cursor bit, but you should be able to achieve a static data box with just CSS by using the :hover pseudo property. Output the data in a div and style as though it will display all the time as a static or absolute positioned object. When you like the look, add display: none; to the CSS properties and it’ll disappear.

    Make a :hover selector rule for the anchor link of the image where display: block; is one of the properties targeting the data div. Like this:
    a#imageID:hover + div#dataID {display: block;}
    That should do it! Warning, I’m lousy at CSS, so that example may not be quite right, but it hopefully illustrates the concept of hovering over one thing affecting the display of another.

    The same effect can be done with javascript using the onmouseover and onmouseout events to toggle the display: property off and on. If you need more to go on, the same techniques are used all the time for drop down menus. Searching for menu examples will help you, you’re just displaying image data instead of menu terms.

    BTW, I know the rose is just a test image, but just a reminder, please don’t serve people a 12Mpx image when 0.5 would do!

Viewing 1 replies (of 1 total)
  • The topic ‘displaying attachment custom fields’ is closed to new replies.