Rotate a Snippet?

OL Connect Professional Designer
1

I know that you can rotate an element or a background image, but can you rotate an entire snippet?

The snippet are being loaded dynamically and even though the snippets were designed in portrait there are times when the media would be landscape and need to be rotated for printing. The snippet is only a portion of what is on the page, so we would need to actually rotate the snippet instead of the entire page.

2

Yep. Insert your snippet into the form. This creates an Article object. Select that Article and go to Insert > Wrap in Box.

This puts a Div around that Article.

Now select the Div, right click and go to Box in the context menu. You’ll be able to set an angle here that rotates the div and all of it’s contents.

If you then look at the source, you’ll see this has just applied a CSS transform to the Div:

 <div "="" anchor="page_media_0" style="transform: rotate(90deg); width: 3in; height: 3in;">
     <article source="snippets/test.html"></article>
</div>
3

Assuming that we need to do this with a script.

ExampleRotate
ExampleRotate756×230 26.8 KB

Is there a better method than this?

ExampleRotate2
ExampleRotate2805×235 26.3 KB

4

If that is targetting a DIV, then the method you’ve shown is pretty much the best way to do it via script, yes.

Alternatively, you could have a predefined stylesheet that targets elements by Class, but you’d still be inserting that class dynamically most likely. So it comes out the same.

5

Currently it’s a paragraph, but could be a div.

<p id=“idname”>
{snippet_result_from_script}<br>
</p>

If I preview in a browser targeting the div rotates, but the paragraph does not.
However in the Designer preview tab both rotate.

The goal is to determine when it need to be landscape vs portrait and apply the rotation CSS programmatically.

6

You could just do this:

<p id=“idname”>
    <div style="{insertTransformHereConditionally}">
        {snippet_result_from_script}<br>
   </div>
</p>