Support » Plugin: Display Featured Image for Genesis » Question about title posistion

  • Mark

    (@markdeafmcguire)


    Robin,

    Great plugin. I am using it successfully on my Genesis Framework child theme. I noticed you have included the option to use the Display Term Featured Image widget in the Widget section. While it works perfectly as advertised, I was wondering if there was a way to overlay the Term Title and/or Term Description over the image itself?

    Does my question make sense?

    In other words, without using the widget title and keep the featured image, term title and/or description as an all in one button of sorts that’s still accessible to screen readers?

    Thanks,

    Mark

Viewing 1 replies (of 1 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    Hey Mark! Yes, that should be totally doable with some CSS finagling. I did it on this site, in the footer widgets (first and second) with the post type widget. The term widget should behave very similarly.

    Here’s the relevant CSS:

    
    .footer-widgets .widget-wrap {
      position: relative;
    }
    
    .footer-widgets .widget-wrap .widget-title {
      top: 93px;
      right: 0;
      left: 0;
      position: absolute;
      text-align: center;
      z-index: 100;
    }
    

    Note that my title positioning could have been done better to give a true vertical centering–I don’t remember why I did it the way I did, but I’ve used something like this in the past:

    
    .footer-widgets .widget-wrap .widget-title {
        right: 0;
        left: 0;
        position: absolute;
        text-align: center;
        z-index: 100;
        top: 0;
        bottom: 0;
        transform: translate(0,50%);
    }
    

    (You would need the vendor prefixes for the transform property.) … It looks like I maybe need to add an aria-hidden attribute to the image if the title is displayed, but otherwise, just CSS. The images here are a custom image size.

    Just a note, if you do this kind of effect: if there is a lot of text due to a long title or description, that can do really wonky things with the visual layout. I would make sure that anything displayed here is always over a large image, or relatively short in terms of the text.

    Hope that helps get you started!

Viewing 1 replies (of 1 total)
  • The topic ‘Question about title posistion’ is closed to new replies.