I currently have an tool to set up which allows the user to upload an image, and then place custom text over it which displays and is editable in the browser. My question is, using VueJS, is it possible to save the image and the text as a separate jpg/png etc, much the same way one would flatten layers in photoshop?
If it helps, here's how I'm displaying the text on the image:
<v-img ref="image" class="mb-5" max-width="700px" #load="updateImageHeight" :src="imgUrl" style="margin: 0 auto;">
<div class="row text-center">
<div class="col-12 text-center">
<div v-for="input in textInputs" :key="input.id" :style="{position: 'absolute', left:input.left+'px', top: input.top+'px'}">{{ input.text }}</div>
</div>
</div>
</v-img>
If it is possible, are there any resources out there to help me make a start on it? Or is it just not possible with Vuejs?
You could use the html2canvas to convert html to image. Also, there is already this mixin html2canvas.
So basically I am using a jquery plug-in called blueprint split layout. The code for it can be found at: http://tympanus.net/Blueprints/SplitLayout/index.html. I modified the code to fit with my website theme and it worked perfectly, that is until I put it inside a section container with a class of content. Whenever it goes into this container, it ceases to function. However, if I keep this out of the div container, it functions beautifully, but screws the rest of the site layout up. I have searched for days for a solution, and I have tweaked and rebuilt my code to no end with no success. Can anyone please tell me what is going wrong? On another note, I did notice that some of my links are not working either when in this container. I've tried tweaking it to a div container, a section container, and article container, nothing works.
Here is a link to my html: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.html
The code in question is:
<div class="splitcontainer">
<div id="splitlayout" class="splitlayout">
<div class="intro" >
<div class="side side-left">
<div class="intro-content">
<div class="profile_containerL">
<div class="profile"><img src="imgs/profile1.jpg" alt="profile1">
</div>
<div class="h1s"><span>Andrew Mac Gregor </span>Web Designer
</div>
</div>
</div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="profile_container">
<div class="profile"><img src="imgs/profile2.jpg" alt="profile2"></div>
<div class="h1s"><span>Brittney Mac Gregor </span>Web Developer</div>
</div>
</div>
</div>
<Article>
<div class="page page-right">
<div class="page-inner">
<div class="back_R">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Development</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-right -->
<div class="page page-left">
<div class="page-inner">
<div class="back_L">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Design</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-left -->
</div><!-- /intro -->
</div><!-- /container2 -->
</div><!-- /splitcontainer -->
Here is one to my css: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.css
The css code in question is:
.side-left,.side-right{color:#fff;background-image:url(../imgs/ABbg.png)}.page,.side{-webkit-backface-visibility:hidden}.splitcontainer{position:inherit;height:600px;margin-left:auto;margin-right:auto;overflow-x:hidden;z-index:2000}.side{position:absolute;top:0;z-index:100;width:50%;height:600px;text-align:center;background-color:#000}.close-left .side-left,.close-right .side-right,.open-left .side-left{z-index:200}.open-left .side,.open-right .side{cursor:default}.side-left{left:0}.side-right{right:0}.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}.profile{margin:0 auto;width:140px;height:140px;border-radius:50%}.profile img{max-width:100%;border-radius:50%}.intro-content .h1s>span{display:block;white-space:nowrap}.intro-content .h1s>span:first-child{font-weight:300;font-size:2em}.intro-content .h1s>span:nth-child(2){position:absolute;margin-top:.5em;padding:.8em;text-transform:uppercase;letter-spacing:1px;font-size:.8em}.intro-content .h1s>span:nth-child(2):before{position:absolute;top:0;left:25%;width:50%;height:2px;background:#000;content:''}.profile_container,.profile_containerL{padding-top:20px;background-color:rgba(0,0,0,.8);border-radius:20px}.profile_container{box-shadow:2px 3px 5px -1px rgba(255,255,255,.8)}.profile_containerL{box-shadow:-2px 3px 5px -1px rgba(255,255,255,.8)}.side-right .intro-content h1>span:nth-child(2):before{background:#000}.back_L{float:left}.back_R{float:right}.back_L img{float:left;width:50px;height:50px}.back_R img{float:right;width:50px;height:50px}.back_L img:hover,.back_R img:hover{opacity:.4}.mobile-layout .back{position:absolute}.back-left{left:12.5%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.back-right{right:12.5%;-webkit-transform:translateX(50%);transform:translateX(50%);color:#fff}.open-left .back-right,.open-right .back-left{visibility:visible;opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;pointer-events:auto}.back:hover{color:#ddd}.page-left,.page-right{background:#000;color:#fff}.page{position:absolute;top:0;overflow:auto;min-height:100%;width:75%;height:600px;font-size:1.4em}.page-right{left:25%;outline:#000 solid 5px;-webkit-transform:translateX(100%);transform:translateX(100%)}.splitlayout.open-right{background:#000}.page-left{left:0;outline:#fff solid 5px;text-align:right;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.splitlayout.open-left{background:#fff}.page-inner{padding:2em}.page-inner .section{padding-bottom:1em}.page-inner .h2s{margin:0 0 1em;font-weight:300;font-size:2em;font-family:audiowide}.page-inner p{font-weight:200;font-size:.8em}.page,.side{-webkit-transition:-webkit-transform .6s;transition:transform .6s}.overlay{-webkit-transition:opacity .6s,visibility .1s .6s;transition:opacity .6s,visibility .1s .6s}.intro-content{-webkit-transition:-webkit-transform .6s,top .6s;transition:transform .6s,top .6s}.intro-content h1,.reset-layout .page,.splitlayout.close-left .page-right,.splitlayout.close-right .page-left,.splitlayout.open-left .page-right,.splitlayout.open-right .page-left{position:absolute;overflow:hidden;height:600px}.splitlayout.open-left .page-left,.splitlayout.open-right .page-right{position:absolute;overflow:auto;height:600px}.open-left .side-right .overlay,.open-right .side-left .overlay{visibility:visible;opacity:1;-webkit-transition:opacity .6s;transition:opacity .6s}.open-right .side-left{-webkit-transform:translateX(-60%);transform:translateX(-60%)}.open-right .side-right{z-index:200;-webkit-transform:translateX(-150%);transform:translateX(-150%)}.open-right .side-right .intro-content{-webkit-transform:translateY(-50%) translateX(0) scale(.6);transform:translateY(-50%) translateX(0) scale(.6)}.open-right .page-right{-webkit-transform:translateX(0);transform:translateX(0)}.open-left .side-right{-webkit-transform:translateX(60%);transform:translateX(60%)}.open-left .side-left{-webkit-transform:translateX(150%);transform:translateX(150%)}.open-left .side-left .intro-content{-webkit-transform:translateY(-50%) translateX(-100%) scale(.6);transform:translateY(-50%) translateX(-100%) scale(.6)}.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .1s .3s;transition:opacity .3s,visibility .1s .3s}.open-left .page-left{-webkit-transform:translateX(0);transform:translateX(0)}
The javascript being used for this site can be obtained from blueprint site listed above The two names of the javascript files are cbpSplitLayout.js and Classie.js, as well as the included modernizer.js file from the site.
Can anyone please help me figure out why javascript would stop once the plug-ins html is placed in the main wrapper section? Thanks in advance.
Well it's been a few days and I want to I guess provide my own answer to my question. I don't have the "exact" answer, however, this is what I have found to fix the issue. The original issue was that every time I placed my jquery coded html inside the main wrapper div, the jquery functions would not work at all. Basically I'm building a parallax one page site that has multiple slides. The second slide from the header has the jquery plug in that is suppose to have two profile pics on it. One side for the developer and one for the designer. When either profile is clicked, depending on which one, the plugin is suppose to make the page slide open either left or right. Upon clicking the "x" I put inside the inner page, the page refreshes and shuts the sliding profile.
I noticed that when this was placed inside the main wrapper div that the rest of my content was in, it ceased to function. I still cannot explain why that is. However, if I placed it on the outside of the wrapper, it would automatically become fixed at the top, blocking my fixed header. That I cannot explain either. I tried creating two different wrappers, one for the first slide, leaving the jquery code out of that wrapper, then another wrapper to place the remaining content in, but still the jquery code would just become fixed to the top of the screen and block the header. It would work, mind you, but completely wrong positioning. So... my solution, although perhaps not the right one to the issue, was to re-create all the html code. This time, I added each slide 1 at a time and messed about with the positioning finally getting the whole page to function correctly when in a relative position, aside from my header and footer being fixed. Now the plug-in works beautifully and the page is taking shape into what I wanted it to be. So... my conclusion, although I can't explain the details, is that when using a jquery plugin, the positioning of that part of html code that responds to the js, relies on positioning. Apparently the only positioning that would work in my case was relative. Another guess as to why this could be was because the plug-in was designed to be a one full page plug-in and I tweaked the html to get it to fit in a 1903px width by 600px height container. Hopefully this will help someone out there struggling with the same issue.
I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.
I have a page with several divs like the following using Bootstrap classes.
The divs and buttons adjust their width properly when the screen size changes.
However, the image does not which then causes the image to overlap the underlying div when being watched on a small screen.
Is there any way I can set a max width for the image or do something so that it never exceeds the underlying div ? I tried adding height="auto" and width="80%" to the image but that didn't work.
<div class="txtcntr well well-large span4">
<img src="images/icons/bl_Queue.png" alt="" />
<br /><br />
Check Queue
</div>
Many thanks for any help with this, Tim.
You can try to add css property max-width: 100% for the image
Anyone knows how to put the image on this plugin in center? Because, with small images it appears always on left top.
On github it says nothing. https://github.com/elevateweb/elevatezoom
I probably have to find in the .js file where it creates the div or something.
I was able to center my images by placing everything in a div like the one below, however it's not centering the zoom on the "inner" zoomType when using a vertical image. Example: http://brecksargent.com/j/
<div id="wrapper" style="text-align: center">
<div id="yourdiv" style="display: inline-block;">
</div>
</div>