If the length of the legend of the atom exceeds the width of the image, the atom-wrapper div is expanded to keep the legend on a single line, thus breaking atom's “alignment” setting.

Legend should better be wrapped on multiple lines, to keep aligned, as in attached screen shot (compared to the same on scald demo site);

BTW, the atom alignment on the demo site is already broken, probably due to agressive Filtered HTML (or CKEditor ACF) : try “Edit” on page above...

CommentFileSizeAuthor
#6 scald-long-text-legend-2060409-6.patch2.43 KBgifad
#5 scald-long-text-legend-2060409-5.patch453 bytesgifad
#1 scald-long-text-legend-2060409-1.patch1.45 KBgifad
scald-ImageLegend.jpg23.71 KBgifad

Comments

gifad’s picture

gifad commented
Status: Active » Needs review
StatusFileSize
new scald-long-text-legend-2060409-1.patch1.45 KB

Attached patch introduces atom_wrapper.css("width", atom_wrapper.find("img").css("width")); in dnd-library.js (could be elsewhere), and another in ckeditor/plugin.js, to be active in wysiwyg.

jcisio’s picture

jcisio commented
Status: Needs review » Needs work

I think CSS is better. The wrapper DIV with "display:table" should work in every major browser.

jcisio’s picture

jcisio commented

I've just tested. The following CSS works:

.dnd-atom-wrapper {
  display: table;
  width: 1px;
}
gifad’s picture

gifad commented

which wrapper do you assign “display: table;” ?
I tried all combinations on the 3 wrappers, and no one works...

I suppose you have permissions to hack the source html of the home page at http://scald-d7.ows.fr/ (to wrap “#0 - Scald Module (Media Management Suite on drupal) : Introduction, by Sylvain Moreau”)

gifad’s picture

gifad commented
Status: Needs work » Needs review
StatusFileSize
new scald-long-text-legend-2060409-5.patch453 bytes

Found a CSS only solution (thanks Alsacréations)...

gifad’s picture

gifad commented
Priority: Normal » Major
StatusFileSize
new scald-long-text-legend-2060409-6.patch2.43 KB

Found a far better solution (thanks spark-8.x-1.0-alpha10/core/modules/filter/css/filter.caption.css)

It works both for the figcaption with scald_image html5 player, and for the legend with default player...

Bumped to major, as it pushes scald ahead of any D7 project ...

gifad’s picture

gifad commented
Category: feature » support
Priority: Major » Normal
Status: Needs review » Fixed

jcisio suggestion doesn't work, at least with safari, if the theme css includes the now usual rule :
img { max-width: 100%; }

this can be fixed by
.dnd-atom-wrapper img { max-width: none; }

Well, now, I realize that all of this is css stuff, that need not to be integrated in scald core;

scald is media management made easy, presentation is another story ;)

jcisio’s picture

jcisio commented
Category: support » bug
Status: Fixed » Active

I tested in Chrome and it worked. It's weird that it does not work it Safari.

Those tons of CSS in Spark is not necessary, 95% of them are resetting or customisation which is not something that everyone needs. We need only a minimum working CSS rules.

jcisio’s picture

jcisio commented

Try around then commit 9391e72, which basically is a light version of #6. Thanks!

jcisio’s picture

jcisio commented
Issue summary: View changes
Status: Active » Fixed

Status: Fixed » Closed (fixed)

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