The addition of the Media Library changed a lot of features and functions in SiteFarm. While no longer intuitive, adding a link around an image is still possible with a few extra steps. Our instructions are followed by an explanation of what happened in the background of our recent rollout that changed this process.

Use already available features that include linked images

Don't forget, we have a lot of options that already let you incorporate an image surrounded by a link:

• Teaser link box
• Hero banner
• Image banner
• Marketing highlight
• Marketing highlight - horizontal

Insert a link in a Media Library image's caption field

Using the new media library system to incorporate your link will keep your work in line with the supported features and ensure it meets best practices for usability, accessibility, and responsive design. Plus, it's easy to do.

1. In the WYSIWYG body of your page or block, use the Insert from Media Library icon to upload and insert your image.

2. When you see the Edit media dialogue box, be sure to check the Caption box.

3. When your image is placed on the page, the Caption field will be visible beneath the image. Type in your caption information in a way that indicates the nature of what the link will be. Example: "Sign up for the Biological Sciences monthly newsletter".

4. Highlight the caption text and then click the Link icon (chain link icon in the first row of your WYSIWYG) and create the URL for your link. Save your page to finish.

Insert a link around an image using HTML

We would suggest not to using this approach. First, it's not recommended for content editors (Contributors and Editors) who aren't familiar with writing HTML or using the WYSIWYG's Source display to work in this medium. Second, not knowing that a link has been applied may result in a well-meaning content editor unintentionally breaking or deleting the HTML written in the background code. If you still wish to proceed, the instructions follow.

1. Navigate to your Media Library and make sure your gallery view is set to Table and not Grid.

2. Upload your image if new or locate the image if it's already in your library. 

3. When you locate your image, use your mouse or the touchpad's right-click button and copy the image's address, which will represent the image's full file pathway.

 

4. Return to your page or block and click the Source icon located in the first icon row of your WYSIWYG, second from the right. Again, knowledge of HTML is required to complete this step and the SiteFarm team does not provide training or support for taking this custom approach. You can use the code shown below as a starting point to create your wrapped image link:

<p><a href="{insert target link}"><img alt="{description of image content}" src="/sites/g/files/dgvnskxxxx/files/images/.../dna-helix.jpg" /></a></p>

• a href=
  • the link to your target destination
  • external link example: http(s)://somesite.ucdavis.edu
  • internal link example: /blog/jan-2021-policy-changes
• alt=
  • alt tag, also known as alternative text tag
  • required to meet the legally required accessibility standards
  • should describe the content of the image in a way that would let someone whose sight is poor or impaired can gain the same understanding that someone sighted would get from viewing the picture
  • note: images should not contain more than a few words of embedded text. Alt tags are not intended to contain more than a sentence or two at most.
• src=
  • the URL source for the image's file pathway
  • paste in the image's address information copied in step 3.
  • remove any domain information include before /sites/g/files/...etc. 
    https://sitefarm.ucdavis.edu/sites/g/files/dgvnskxxxx/files/images/.../dna-helix.jpg
    becomes
    /sites/g/files/dgvnskxxxx/files/images/.../dna-helix.jpg

Any additional parameters, such as height, width, alignment, or styling can be added as needed.

5. When you've completed your work, click the Source icon again to review to your regular view. Save your page or block to finish.

 

Why did this process change?

There's a couple of issues at play in answering this question. Nearly every major component that makes up a Drupal SiteFarm site is an entity of one type or another, e.g. users, pages, and blocks are all types of entities, and media is our newest. The new media library doesn't know anything about any system outside of itself specifically with reference to your page and blocks' WYSIWYG areas. The fact that CKeditor (the WYSIWYG editor system) and the media library don't entirely play nice together makes for a jarring adjustment in learning to use the new media system.

The other issue harkens back to when our user community asked for a robust anchor link system for their pages a few years ago. Since Drupal Core's option didn't meet our users' expressed needs, we included a module to accommodate this request not knowing how this seemingly innocuous addition would prevent users from wrapping an image in a link today. The module responsible is not part of Drupal Core and isn't designed to integrate with media library's media entities. This is why, in the second suggested solution above, we bypass using the media library entirely except to grab the image's URL path.

If you're wondering why we don't yank out the anchor link module and resume using the built-in anchor option so you can wrap images in links again, doing so risks breaking pages at best, but actually deleting data completely at worst. You can see why this isn't an option. 

"This seems broken to me. Will you fix it in the future?"

It's too soon to say. Significant changes will be coming to SiteFarm with its theme refresh in 2021 once the UC Davis main site's theme refresh is complete, and we're focusing on that for the time being. We'll be keeping an eye on contributed modules, changes to the media library, and various patches that the Drupal community of developers may come up with to evaluate if any of those options are safe for consideration. For now, the steps outlined above are our recommended options.