By JordanBeckett on

Hey everyone!

I have a feeling this is going to be an easy one for you experience Drupal developers -- but here I am, pretty new to PHP and extremely new to preprocess functions. I'm here to learn -- so go easy on me. :) I've tried searching for several hours, tried functions others have written, but don't know enough about the hooks to go out on my own yet.

I have an image field (machine name "field_variant_image") which is part of a content type I'm displaying teasers for (just the title, and the image which is linked to the content.) I would like to be able to click on the teaser image and bring up the default (full content) display in a ColorBox Node display (iFrame.) For this, I have to add class="colorbox-node" and "data-inner-height="460px" data-inner-width"800px" to the link.

I've tried a few options, but can only add these attributes to the <img> tag. What I need is to modify the <a> tag. I'm assuming I would do this in template.php? Can anyone steer me in the right direction? Or better yet, show me code and briefly walk me through how it works?

Thanks so much!!
Jordan

⋅ Categories: Drupal 7.x

Comments

couturier’s picture

couturier commented

I have lots of clickable images on my site, and what I do is fix my content type so that I can easily upload the photo first, then display the picture using a link like this:

<a href="/my-content/title-of-node"><img src="/sites/default/files/my-custom-folder/my-photo.jpg" alt="Photo of my content" /></a>

I'm not sure how it would work to pull up this same link in a teaser format. I use this link to pull up full-size images in Views.

If you want to make the content pop up, I would highly recommend using CTools modal options. If you install CTools and activate modal examples, you can see how this works. It can be problematic to try to pull up linked content into a modal. You really need to have quite a lot of Ajax and php knowledge to be comfortable working with this option, but it can be done.

Alternately, you might re-think your design and figure out a more direct way to do this, that is, without the iFrame. Be aware that iFrames and other overlay options are very difficult for visually impaired users to navigate with screen readers.

JordanBeckett’s picture

JordanBeckett commented

Thanks for the suggestions couturier!

That's a good thought about accessibility with screen readers. To that end, I wonder if I can set a condition to check for screen readers? Though, I'm not sure it's really necessary. The site I'm building has very few words and 800+ watches. I'm a certainly a little ignorant, but I'm not sure the visually impaired are going to be interested in browsing a pictures-only gallery of fine wrist watches... so it may not even be worth the trouble here -- though TOTALLY something I will keep in mind on 99% of my other sites! Thanks for that!

As far as actually building the link goes, I don't follow your first paragraph -- in the anchor I need to have class, data-inner-height, and data-inner-width attributes, so I need Drupal to interject these for me automatically somehow.

I think what I need is an IF statement that pulls the off of the image when $content is rendered? But I don't know where this link gets built, so I'm not sure what to modify or where to start.

Thanks again for the input! I'll take a look at CTools. It's on the site for other modules, but I haven't really taken the dive into it personally yet... now's a good time to try!

Cheers!
Jordan

couturier’s picture

couturier commented

Yes, it is specifically the "modal" features that you will be wanting in CTools. This is a newer approach to what you are doing than the older iframes.

Also, to hard code those size attributes could be limiting if you want to change your display later. You might think of a higher-level way to do that to auto size the images. Not sure how to help on the coding, sorry.

That's always a great thing to be more aware of screen reader limitations. Drupal 8 has done a lot toward that end, including eliminating the administrative overlay. Screen readers just do not do well with pop-up boxes and overlays. It can be very frustrating for people trying to figure out what is going on when the screen reader returns no data for a site with overlays. I would imagine there are a few people out there who would like to be able to hear a screen reader state a description of the watch even if the image was blurry for them due to some degree of visual impairment. However, yes, I can understand your not doing as much with a highly visual site. Drupal is intrinsically screen-reader friendly, so starting with that base already has put you ahead of many other sites.

JordanBeckett’s picture

JordanBeckett commented

I think it's time I start diving into Drupal 8 to get accustomed!

If I can't find a way to add attributes to the link before it gets rendered with a teaser image, I'll definitely dive into modal display -- I would really like to get away from iFrame, it was just the first (and most easily understood) option I came across.

Thanks so much for all of your help!! It's always encouraging at how generous and supportive the Drupal community is. I feel like a perpetual newbie, as there is always more to learn!

couturier’s picture

couturier commented

You're welcome. Never underestimate yourself. If you help answer support requests you might be surprised how much you know to help others, too. I'm not a programmer but just jumped in and have learned a lot. Hopefully you will do better with modals than I did when I tried them. You really need a working knowledge of Ajax to do well with them, but I think you'll enjoy their flexibility.

JordanBeckett’s picture

JordanBeckett commented

Though there have been suggestions that will work for my next project, for this current project I'm looking to simply evoke a theme function hook... does anyone out there know how I can intercept the link that gets wrapped around a content teaser image, add attributes to it (style, data-inner-width, data-inner-height)?

I know it's not uncommon, as I have seen D6 code which does it... but I don't know how to accomplish this in D7. Any help would be GREATLY appreciated!

fejn’s picture

fejn commented

More a suggestion on another place to look than a direct solution to your problem:

Have you considered building your display up as a view? Views allows you to provide custom styling to almost any field that you have in a view, so you could apply an image style to your images to make sure you would get the proper sized 'teaser' images. If necessary you could apply the (data-inner-width, data-inner-height) attributes to a class you apply to these images. That custom styling could be done as part of your stylesheet for the site, rather than using a theme preprocess function.

Using Panels/Mini-panels/Display Suite will also give you some control over the formatting in D7 (I don't know much about D6) -- if you are familiar with them at all.

HTH, Jeff