search

sixteenbit / device-mockups

No longer mirroring this repo with .org
http://wordpress.org/plugins/device-mockups/
28 stars 8 forks source link

Support css float of device mockups #17

Open jphorn opened 9 years ago

jphorn commented 9 years ago

Would it be possible to support WordPress' standard css classes alignleft and alignright (and aligncenter and alignnone) for device mockups? I'm having a real hard time getting this to work correctly with your shortcode. I tried wrapping div's, spans etc, but to no avail. I also initially thought the parameter position was meant for wrapping around images, but I get now this is for stacking.

justin-peacock commented 9 years ago

Hey @jphorn,

Can you give me an example? I just tried it out and it's working ok for me.

http://www.dm.byjust.in/alignments/

justin-peacock commented 9 years ago

If you're meaning applying the classes to the overall device, it's possible to center or align right but floating can get tricky because of the way the device styles are built. You can see an example of centering here.

http://www.dm.byjust.in/iphone-6/

jphorn commented 9 years ago

I want to wrap text left or right along the mockup. In the image below this doesn't work.

Example where this doesn't work as expected

[device link="" type="iphone6-plus" color="black" orientation="portrait" hide="" width="33%"]<img class="alignleft" src="http://iculture.textopus.nl/wp-content/uploads/2015/10/lookmark-pushbericht-309x550.png" alt="" width="309" height="550" />[/device]Een andere nieuwe Google-dienst maakt het binnenkort mogelijk om tekst in de echte wereld te vertalen via je smartphone-camera, aldus The New York Times. Deze functionaliteit doe denken aan de <a title="Word Lens vertaalt realtime tekst in afbeeldingen via iPhone-camera" href="http://www.iculture.nl/apps/world-lens-vertaalt-realtime-tekst-in-afbeeldingen-via-iphone-camera/">iOS-app Word Lens</a>, die afgelopen jaar <a title="Google neemt populaire Word Lens-app over" href="http://www.iculture.nl/google-neemt-populaire-word-lens-app-over/">door Google werd overgenomen</a>.

justin-peacock commented 9 years ago

Ok gotcha. Let me see if I can come up with a solution for you. It's possible but I might need to add a new attribute to target the .dm-width class with the float.