70 comments found.
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column-inner">
Other components goes here
</div>
<div>
is there a way to edit the file to achieve this. Thanks
</div></div>
Hi,
Please check link below to achieve the same:
http://www.drupalthemez.com/content/override-column-template-visual-editor
/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
function YOURTHEMENAME_theme_suggestions_ve_component_alter(array &$suggestions, array $vars) {
if($vars['settings']['id'] == 'column'){
array_unshift($suggestions, $vars['theme_hook_original'] . '__col_inner_wrapper' );
}
}
Have you replaced YOURTHEMENAME word in function name with your actual theme name?
Please check it.
do I put the file in a folder visual_editor/template in the theme root? also can any component I create goes in theme_name/templates/visual_editor/src/Plugins/VisualEditorComponent/ folder?
Put the file in templates/visual_editor directory of your theme root.
one thing I need also is making the svg upload available in image fields. any short way doing it?
Yes, you can allow svg extension. Import the configuration given in the link below as per instructions mentioned:
http://www.drupalthemez.com/content/allow-svg-extension-image-uploadU rock! is there a way to add a text field to column component to add class to column-inner div?
Hi,
Currently there no way to add classes to inner div, but can be achieved with a patch as described in the link below:
http://www.drupalthemez.com/content/override-column-template-visual-editor-0#patchthank you so much. Animations are not working. the animated and animation classes dont applied unless the column on viewport. any idea what that might have happen
The animation starts only when the component is visible in viewport. Otherwise users will not be able to see the effects.
that is what I am saying it doesnt. are u using waypoint?
Ok I have a big favor to ask. The column component needs one more thing, if you can help me it would be awesome. I ll be using you module on a lot of clients for sure. It si awesome.
So what I need is an image upload field (ebrowser) on the columns to do this:
<div attributes="">
<div class="image-class">{{ imagehere }}</div>
<div class="{{ settings.inner_wrapper.class }} column-inner"> {{ content }} </div> </div>
PLEASE HELP!
Hi,
For animation, please check if there is any javascript error. I checked it on preview it is working fine.
For column, I can provide you a patch, which will allow you to add image in parallel to column content.
please, I ve been trying for an hour. got the image filed show up but doesnt populate it
Hi,
Please check link given below for image field in col:
http://www.drupalthemez.com/content/override-column-template-visual-editor-0#innerimagecolPlease take files backup before replacing the content of respective files.
Also, is the animation working now?
chrome no firefox yes, weird
I cant see the patch btw
search for line given below in http://www.drupalthemez.com/content/override-column-template-visual-editor-0#innerimagecol. Its not a patch this time(replace content of files).
Replace content of ColumnComponent.php with following content to add image field in column:
Is the website hosted on public server? Can I see the link to check animation problem?
sure, I ll send you a message. btw like I said the link goes to the old post : http://www.drupalthemez.com/content/override-column-template-visual-editor-0#innerimagecol
Oops forgot to clear cache. Can you please check now? The URL is same as old one, I have appended the content for future references.
awesome. just one more thing I need to give the image class to <img class="" ....="" /> can you tell me what to do I try duplicating the alt attribute code for class but none shows up.
Follow the same steps given in the link below:
http://www.drupalthemez.com/content/override-column-template-visual-editor-0#innerimagecolReplace content of ColumnComponent.php with following content to add image field in column:
Thanks man it do it. One question I would like to add a class to the row element like visual-editor-row, so I can target when I style those row. any way of doing this?
You can add class to row by clicking settings button of a row component and going to attributes tab.
Yes I know that but I need to add a custom class to identify which rows are editors. so I kind of need a twig template or something for it.
Can you send me sample html snippet?
<div class="row row-ve {{ settings.content.row_class }}">
{{ content }}
</div>
Edit RowComponent.php and under render function add following line before return statement:
$build’#attributes’[] = ‘row-ve’;
stupid of me couldnt see that. sorry man. Thanks again You rock!
Hey there, for the column image, it doesn’t have a remove the image button on the editing. is there any way to enable that?
http://www.drupalthemez.com/content/override-column-template-visual-editor-0#innerimagecolHi, I will update you on this as soon as possible.
Hi, Please replace content of ColumnComponent.php with content at following location:
http://www.drupalthemez.com/content/override-column-template-visual-editor-0#innerimagecolawesome Vishal. thanks. One thing I noticed is when you are changing the column classes in responsive settings, it keeps the original column name even though it is updated.
so let say you dropped an 8/4 columns and change it to 6/6 from the settings the column name still says col 8 and col 4 instead of col 6 col 6.
thanks again man you are my hero 
Hey Vishal, is there a way to include menu as a widget like nodes and views?
Hi, currently there is no way to add menu. But I can come up with new component for the same.
Check following link for menu component:
http://www.drupalthemez.com/content/creating-menu-componentU ROCK! did you see my comment above “awesome Vishal. thanks. One thing I noticed is when you are changing the column classes in responsive settings, it keeps the original column name even though it is updated.
so let say you dropped an 8/4 columns and change it to 6/6 from the settings the column name still says col 8 and col 4 instead of col 6 col 6.”
Yes, I also observed the same thing. I will work on it. It will not affect the functionality, so it is minor. If you set the Component title, it will be replaced with newly added component title.
Good to know. Hey, also an idea if you have a git repo or some other system to communicate on bugs, feature requests and all that I would be happy to help out there if you add me.
Hey Vishal, I know there is an update for the module. “Implemented a functionality to create css/js per page”, Since I did a customization on a bunch of files, would you mind letting me know which files are changed with this new update, please. Thank you
Actually the version currently 2.2, I see that we edited the imageComponent and imageCarousel, I see waypoint there in the library, is that the only other addition?
Yes. In addition to that, included MenuComponent.php in the package.
Thanks Man. Anywhere I can add bug and feature requests? like git or any other platform?
Hi,
As of now, you can submit features request or bugs on the link given below:
https://docs.google.com/forms/d/e/1FAIpQLSdRZgOrO5d6dE9bhCbQALkMmmuZVXpiJFg9ihqmxLq_lFT7PA/viewformhey me again trying to output only the img url with selected image format isteag of to twig file like style=”background-image:url(‘{{ content.image }}’);”
can you help me?
if(isset($content['image'][0])){
$build['#content']['image'] = $this->renderImage($content['image'][0], $content['image_format'], []);
}else{
$fids = array_keys($content['image']['table']);
$img_attr = [
'#attributes' => [
'alt' => $content['image']['table'][$fids[0]]['alt']
]
];
$build['#content']['image'] = $this->renderImage($fids[0], $content['image_format'], $img_attr);
}
return $build;
I am creating background image option for each component. That may help resolve your problem.
Thats is awesome. Meanwhile though can you put me to the right direction to get the image url for the set image format?
Just render image with selected format using image component in a test page. Copy image url from page and set it as background url under attributes style field where you want to use it.
All that’s make sense to you for sure not to me haha. As a frontend dev, hard to figure out that. Any way you can give me a sample?
I will share a short video.
awesome
Please check video at link below:
http://www.drupalthemez.com/sites/default/files/Create%20Basic%20page%20_%20Drupal%20Smartcard.webmI See. I know that I can do that but I am creating custom components and I kind of need to set an image field (select/upload) and get the plain URL to use it on twig template. So starting from image Component, instead of rendering the whole img tag I need only its url (image_format applied, so it can be set).
<?php
/**
* @file
* Contains \Drupal\visual_editor\Plugin\VisualEditorComponent\ImageComponent.
*/
namespace Drupal\visual_editor\Plugin\VisualEditorComponent;
use Drupal\visual_editor\VisualEditorBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\file\Entity\File;
/**
* Provides a 'image' visual editor compoent.
*
* @VisualEditorComponent(
* id = "image",
* type = "widget",
* name = @Translation("Image"),
* description = @Translation("Place image in content"),
* iconClass = "fa fa-picture-o",
* )
*/
class ImageComponent extends VisualEditorBase {
public function buildForm(array &$form, FormStateInterface $form_state, array $settings) {
$content = $settings['content'];
$styles = \Drupal::entityTypeManager()->getStorage('image_style')->loadMultiple();
$image_styles = [];
foreach ($styles as $style) {
$image_styles[$style->id()] = $style->getName();
}
$content = $settings['content'];
$fids = $form_state->getValue([
'content',
'media',
'fids',
'entity_ids',
]);
$files = [];
$content['media']['table'] = empty($content['media']['table'])?[]:$content['media']['table'];
if (!empty($fids)) {
$files = \Drupal::service('plugin.manager.visual_editor')->getFids($fids);
}
else {
$files = array_keys($content['media']['table']);
}
$form['content']['media'] = \Drupal::service('plugin.manager.visual_editor')->browserForm($files, $content['media']['table']);
$form['content']['image_format'] = [
'#type' => 'select',
'#title' => t('Image format'),
'#options' => $image_styles,
'#empty_option' => t('- None -'),
'#default_value' => isset($content['image_format']) ? $content['image_format'] : '',
];
}
public function render($settings){
$content = $settings['content'];
if(isset($content['fid']) || isset($content['media_upload']['image'][0])){
$fid = !empty($content['fid'])?$content['fid']:$content['media_upload']['image'][0];
$build = parent::getBuild($settings);
$files = !empty($content['media']['table']) ? array_keys($content['media']['table']) : [];
if (!empty($files)) {
foreach ($files as $key => $file) {
$file_data = $content['media']['table'][$file];
$file = File::load($fid);
$path = $file->getFileUri();
if (!empty($content['image_format'])) {
$image['#theme'] = 'image_style';
$image['#style_name'] = $content['image_format'];
}
else {
$image['#theme'] = 'image';
}
$image['#uri'] = $path;
$build['#content'][$key]['path'] = $image;
}
}
}
return $build;
}
}
and use it like this
style="background-image:url('{{ content.image }}');"
DO NOT LAUGH!
Oops, my bad. Please add file given at following path for image url:
https://gist.github.com/drupalthemez/ae2bfce8a6f4c1c92813b8ac596d8d21#file-imageurlcomponent-phpHi,
I have installed this module but when i try to click on + symbol nothing working.
https://screenshots.firefox.com/YZYEPkIpnoMjMcYA/www.spectrait.netHi,
Please try clearing drupal cache. Also check if there is any javascript error on the page.
Hi clear cached and there is no javascript error on console.
still not working
Share website admin detail with you
Thank you, Just received login details. Let me check.
Hi Ravi,
On initial observation I observed that fontawesome css is not loaded.
Can you please confirm if libraries directory is uploaded in Drupal root directory and it has appropriate permissions?
Following url should be accessible in your website to load icons:
http://www.spectrait.net/libraries/font-awesome/css/font-awesome.min.css?oxof6alibraries directory uplodaded inside module
is library directory should be on root directory?
yes, in the drupal root directory.
library updated now font awesome icon is visible but functionality not working
Hi Ravi,
Just checked using login credentials and created a page http://www.spectrait.net/node/108. Please check once.
Hi,
But + Symbol still not working.
Thanks
Try clearing browser cache
how did you add this in node/108 ?
Can i insert webform inside any container
Can we have a call? Sharing my contact number using support@drupalthemez.com
As of now there is no way to insert webform inside container. But we will update you soon on the same.
Thanks every thing is working fine
Hello! I am using your visual editor but is not working right. I am doing 4 columns with images but in the front end I just see 3 columns and the 4 is broken… Could you help me?
Hi,
Please check if column settings for desktop are applied as col-lg-3. Also check if you have added any additional class/style to col which has margin on left/right.
If possible, can you share a fronted link?
Hi, Just a few feature requests… 1. Ability to label to or preview row/colums/content – when you build a big page, it gets really confusing to know what is where. Ex. https://www.screencast.com/t/DGwk7aCOvc
2. Ability to move content/columns between rows. I started creating rows, but then realized I needed Wrapped rows, so I had to start all over because I could not just move columns/content between rows
3. Add “Update settings and Close” button at bottom – to exit out of the window.
Overall, you did a fantastic job on this module!
Thank you for your valuable inputs, we will implement suggestions given by you.
Hi,
You can use “Component title” from row settings to set title for row(for feature request 1). Currently it is available for row only.
There is a bug with adding a link in the Rich Text widget. https://www.screencast.com/t/iiDpRw5ROQzM
Hi,
Please find below link to add a patch to the module to resolve rich text link issue
http://www.drupalthemez.com/content/visual-editor-11-patch-rich-text-anchor-dialogThat worked perfect! Thanks for the quick fix!
Hi Your product look promising, specially the accordion. it is pretty new and there is not a really big documentation, which confuses me a little. I’m in front of a bigger project, so my questions: - how sure is it that you maintain this plugin further? Even if you don’t sell it like you expect? - do you provide some more documentation soon?
Hi,
I am actively maintaining and creating new components for this module. Also I am working on video tutorials and documentation for each component.
What module used dependencies ?
There are no dependency modules required except core modules(node, block, views).
Which used in Content format Block ? Could you permisson allow create Block custom ? I want see feature in Block .
As of now it supports all block content types. Creating block content from component can be implemented, but it will take some time for development. If you are looking for creating basic block, then instead of creating it from visual editor you can use Rich text component of visual editor.
ok thanks for reply.
Cool Item! Good Luck!
nice work, fantastic ! I wish you big sales and a nice day
Amazing work! GLWS!
