Tip:
Highlight text to annotate it
X
Okay, so now let's say that you don’t have access to photo shop but you've been able
to get the images sized correctly, maybe from a photographer or whoever you're dealing with
but you want to put some type of headline or display type. You know, certainly you can
do that through photo shop and you can just upload it. The caveat there would be if there's
important type that's on an image that's going to be an accessibility issue so that's where
in that descriptive alt text field I would be more concerned about make sure that type
is in there and it's readable for screen readers as opposed to describing what's going on in
the image. Ideally, if you can fit both in there and the character count available that'd
be great. The alternate option though to outputting or putting type on an image through a photo
shop is to output that through a field in the content type that Drupal allows and that's
actually going to be text that can be interpreted through a screen reader so from an accessibility
standpoint you don't have an issue. Alright, so if we scroll down here, that's basically
what this display text field is. Now you want to be real careful with the send text. There's
actually some text here that you can copy and paste and drop in and you've got two fields
but I really wouldn't recommend putting two sets of headlines on an image. I think that's
going to be confusing. I think you want to keep this pretty simple but the id here is
that we've got a y-coordinate and an x-coordinate and the y is, you know, how far down from
the top left and left or the x-coordinate is how far over from top left horizontally.
So, the idea is that we can position this text wherever we want on the image relative
to how the image is composed, where the sort of quote-unquote negative space is that, you
know, would be more ideal to put that image so it doesn't really disrupt the focus or
the main composition of that image. Your text here can be anything that you want to put.
You know, we have cool walking trails if this is somehow related to fitness, okay. So basically
with that position and this text, Drupal's going to output that and drop it in based
on those x-y-coordinates. Now, it may not be perfect and the idea is you know you want
to play around with this until you get it just exactly so. Once your site is live, this
is a perfect example of where you want to go over to the development server and actually
do some testing and get the positioning right and then drop that in on the appropriate spot
on the live server. So, as you can see, we're kind of cutting off her face a little bit
so maybe we would need to move this up a little bit higher, a little bit lower, you know,
one or the other or both. So if we go back in and edit that, let's just drop it down
maybe 30 pixels vertically. So if I scroll down here and make that 80 and save it and
jump back and refresh this and then I need to click over to my second image, okay now
you can see we moved it down a little bit. Still may not be ideal but hopefully you get
the point of how that works in terms of positioning it. Now, it's set up in such a way that no
matter whether we put that in all caps or lowercase, Drupal is outputting it as an all
cap just to be consistent with what we're doing on other pages and other sites that
we've already created so that's a style that you can't control. It does give you a little
background layer so that that type will always display properly no matter what the background
of the image is. That white on black will make that type legible.