Stacks blockquote with citation (EDITED - tl;dr)

Here’s the tl;dr version (I think):

Does the Stacks edit control support blockquotes with citations? Linking in @isaiah, even though I know he’s incredibly busy (sorry) because he might be able to answer yes or no.

Also, I might ask @Lucas - the edit control in the text area of the ulkit Align stack is a standard Stacks edit control, correct?

Thanks. If you want to read about the problem I’m trying to solve, read on.

I’m not quite sure where this belongs, so I’m putting it in the general area.

Everything I’m describing below happens in Rapidweaver 8.2 with Stacks 4.

I have a small project I’m doing in ulkit (mostly to learn ulkit), and one of the parts of this project requires a right-floating image with blockquotes on the left of this object. It seems the easiest way to do this in ulkit is to use the Align stack. So far, so good.

The Align stack doesn’t have a drop zone associated with it, though – just a text area. So if I want a plain blockquote, I can just highlight the text and apply the edit controls’ blockquote formatting. Works well.

But…if I want a citation in the blockquote, I have to do this:

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.<footer>Ham N' Eggs</footer>

That (mostly) works well also.

But it does turn out weird html:

<blockquote>
    <p>Has content</p>
    <footer>citation</footer>
   <p></p>
</blockquote>

I wouldn’t care about that, except that the empty paragraph tag has a margin-top of 20px. That makes the layout look kind of odd to me.

So – if you’ve read this far, thanks. The question I’ve been leading up to is: should I be doing this another way? I could use something like the @marathia SmartFloat and then just use the ulkit blockquote stack, but…I’d like to get this done using just ulkit stacks.

Can anyone point at something I’m doing wrong or not doing?

Thanks all,

Doug

Hi Doug, I would use a Grid for this one. Use the Image on one Width and the Blockquote on the other Width. if you want both to be aligned to the middle add this to the Grid custom css field: uk-flex uk-flex-middle

Also in case you wish to invert the alignment you may use this class in the second Width so it will display first: uk-flex-first

Edit: I’m also adding color, size and advanced options in Blockquote for the upcoming revision.

Cheers,
Lucas

Thanks, @Lucas. I’ll look into this.

Looking forward to the next revision as well.