Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
I was trying to style the preview page to look more like the final rendering of our styles and noted that there's no easy way to differentiate when a specific preview thumbnail is being looked at.
Proposed resolution
Add the image style name in a data attribute on each thumbnail, then transfer this as a class to the larger preview image when replacing it. Also transfer the data attribute to keep track of which class to remove when previewing something else.
Remaining tasks
Review/suggestions.
User interface changes
None with the original UI.
API changes
Not sure if the template is considered part of the API, but this patch only adds a data attribute to the thumbnails.
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | interdiff_2844560_1-3.txt | 786 bytes | TwoD |
| #3 | 2844560-3.patch | 2.71 KB | TwoD |
| |||
Comments
Comment #2
bleen CreditAttribution: bleen at NBCUniversal commentedGenerally I think this is a good enhancement, but I've found an issue:
If I have three image styles defined - "square", "tall", and "wide" - and I click on the square thumbnail then the main preview images is assigned the class "square". If I then click on the "tall" thumbnail, without first clicking somewhere on the background to reset the main preview to the original image then the "square" class is not properly removed. I end up with multiple classes on that main preview image (e.g. class="square tall").
Comment #3
TwoDHeh, forgot about this. We only used CSS overrides for one of the styles so didn't notice it.
Comment #5
bleen CreditAttribution: bleen at NBCUniversal commentedlooks great!