In #2387445: Add styling options in the configuration we introduced extra styling options. An encountered problem there is the positioning of the CC icons if we have a caption with a border. That brought us the idea to remove the icons from the caption where they are currently positioned and move them onto the image itself. It would save screen space, is perceived as more elegant (a personal opinion) and solves the problem above.

CommentFileSizeAuthor
#6 overlay_license_icon_on_image-2401215-6.patch11.5 KBlolandese
#5 overlay_license_icon_on_image-2401215-5.patch11.85 KBlolandese
#4 overlay_license_icon_on_image-2401215-4.patch4.33 KBlolandese
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

lolandese’s picture

lolandese CreditAttribution: lolandese commented

Some considerations.

Make sure the icon has a text shadow, so it displays well on all backgrounds:

span.flickr-cc,
span.flickr-copyright  {
  color: white;
  text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
     -1px 1px 0 #000,
      1px 1px 0 #000;
}

Taken from http://css-tricks.com/adding-stroke-to-web-text/.

Optionally make the icons only appear on hover to make them even less intrusive.

lolandese’s picture

lolandese CreditAttribution: lolandese commented
Issue tags: +CSS novice, +Novice
lolandese’s picture

lolandese CreditAttribution: lolandese commented
Parent issue: » #2421343: What 'active' issues go in the next stable release?
lolandese’s picture

lolandese CreditAttribution: lolandese commented
Status: Active » Needs work
FileSize
overlay_license_icon_on_image-2401215-4.patch4.33 KB

Patch to save some initial work.

TODO:

  • Config settings. Radio button to choose:
    • No license info.
    • License info in caption.
    • License info overlayed on the image.
    • License info overlayed on the image, only on hover. (useless on 'enlarge' or 'zoom' effects)
  • Correct icon in boxed caption.
lolandese’s picture

lolandese CreditAttribution: lolandese commented
Status: Needs work » Needs review
FileSize
overlay_license_icon_on_image-2401215-5.patch11.85 KB

Separated setting for caption and image.

Suggestions:

  • Combine the settings. It is possible to display them both, but unlikely someone would want that.
  • Display the icons on hover for the 'zoom' and 'enlarge' styles.
lolandese’s picture

lolandese CreditAttribution: lolandese commented
Status: Needs review » Fixed
FileSize
overlay_license_icon_on_image-2401215-6.patch11.5 KB

Implemented the #5 suggestions except icons on hover for the 'Enlarge' style (disabled, see #2424119: Position child elements relative to its scaled parent (CSS)).

  • lolandese committed df095b7 on 7.x-1.x 
    Issue #2401215 by lolandese: Overlay the license icon on the image...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.