I have a form in Symfony2 and in a form i have a photo input field where after upload a photo file give me the path but i would to show the preview about photo uploaded..
This is the code of the add in the form :
->add('photo','file',array(
'attr' => array("class"=>"filestyle",
"data-iconName"=>"glyphicon-inbox",
"data-buttonText"=>"Scegli foto..",
"data-buttonName"=>"btn-primary",
"data-iconName"=>"glyphicon-folder-open"),
'label'=>'user.file.label',
'required'=>false,
)
)
How can i do for use the method onChange or can you give me the method for to show the preview of photo uploaded??
Thanks!!
You are storing file to someplace and then storing that path to database so you need to add condition for this, to display image.
You can pass image value attribute from you form with PhotoImage(file) (i am assuming your entity name is Photo) entity like this
'value' => file_exists(IMAGE_PATH.$builder->getData()->getPhotoImage()) ? $builder->getData()->getPhotoImage() : false )
here
$builder->getData()->getPhotoImage()
gives you your PhotoImage entity value if any and
IMAGE_PATH
is constant which store your root path.
now your code is sending photo path to your form now you have to get that path and display to customer, for this condition in your twig file so that you can check if value is false or not.
for this you have to render your custom form theme like described here just add this code like written bellow - link
{% if form.vars.block_prefixes[1] == "file" %}
<div class="file-box" {% if form.vars.attr.value is not defined or form.vars.attr.value %}style="background:url('{{form.vars.attr.value}}')"{% endif %}></div>
{% endif %}
{{ form_widget(form) }}
{{ form_label(form) }}
{% if form_errors(form) %}
{{ form_errors(form) }}
{% endif %}
form.vars.block_prefixes[1] == 'file' will check if it's input type file or not.
<div class="file-box"> will display your image if you have any.
Based on Nikhil Chaudhary answer, you can shows it in form:
{% if form.photo.vars.block_prefixes[1] == "file" and form.photo.vars.data %}
<img style="max-width: 100px" src="{{ asset(form.photo.vars.data) }}">
{% endif %}
You do not need check file, because the input is file, so can remove
form.photo.vars.block_prefixes[1] == "file"
block from code.
BUT if you wan't to show on change, use jQuery lib or custom function(s), like this.
Related
So i'm trying to gererate a frontend user list, but i'm having trouble reaching the avatar url.
i'm able to get all user names but when i try to do the same with the profile picture the fallback is shown.
The {{ user.avatar.url }} is working on the user page when someone is signed in.
I've tried to look for the query used on the backend to get the user avatar on the preview, but i was not able to find it.
I don't know if this is relevant but i'm using https://octobercms.com/plugin/netsti-uploader for frontend users to upload their avatars. It's working since if i upload it on the frontend the backend user preview shows the right avatar
This is what i am using to get all users:
CODE:
use October\Rain\Auth\Models\User;
function onInit() {
$this['activatedUsers'] = User::whereIsActivated(true)->get();
}
MARKUP
<div>
{% for user in activatedUsers %}
<div class="card list">
{% if user.avatar %}
<img class="userimg" src="{{ user.avatar.url }}">
{% else %}
<img class="userimg" src="assets/images/user.png">
{% endif %}
<p class="name"><span class="rank-title">NAME</span><br>{{ user.name }} {{ user.surname }}</p>
{% if user.last_login %}
<p><span class="rank-title">LAST UPDATE</span><br>{{ user.last_login }}</p>
{%endif%}
</div>
{% endfor %}
All help is appreciated, thanks
try to use it like that.
use RainLab\User\Models\User;
function onInit() {
$this['activatedUsers'] = User::whereIsActivated(true)->get();
}
Markup
{% for user in activatedUsers %}
<div class="card list">
{{ user.avatar.path }}
</div>
{% endfor %}
Have a look at October\Rain\Database\Attach\File class to see available methods :
getThumb($w,$h,$options) - Generates and returns a thumbnail path
getPath() - Returns the public address to access the file
getLocalPath() - Returns a local path to this file. If the file is stored remotely,it will be downloaded to a temporary directory.
getDiskPath() - Returns the path to the file, relative to the storage disk
e.g :
{{user.avatar.getThumb(200,200, { mode : 'crop' } )}}
install "Frontend File Uploader for Model" plugin
insert {% component 'imageUploader' %} in your markup
insert
function onInit()
{
$user = Auth::getUser();
if($user){
$component = $this->addComponent(
'NetSTI\Uploader\Components\ImageUploader',
'imageUploader',
['modelClass'=>'RainLab\User\Models\User','modelKeyColumn'=>'avatar', 'deferredBinding' => false]
);
$component->bindModel('avatar', $user);
}
}
on your code section
You can query the backend user model with with 'avatar'.
use Backend\Models\User;
...
$user = User::where('id', $author_id)->with('avatar')->first();
...
<h1>{{ user.avatar.path }}</h1>
I have Symfony3 app and I am making a simple form the code in the twig is as follows
{{ form_start(edit_form) }}
{{ form_widget(edit_form) }}
<input type="submit" value="Edit" />
{{ form_end(edit_form) }}
Pretty simple. What this code creates is a form and each form field is within it's own <div> which is fine, but if the type is date here is what the generated html looks like
<div>
<label class="required">Term</label>
<div id="appbundle_project_term">
<select id="appbundle_project_term_year" name="appbundle_project[term][year]"></select>
<select id="appbundle_project_term_year" name="appbundle_project[term][month]"></select>
<select id="appbundle_project_term_year" name="appbundle_project[term][day]"></select>
</div>
</div>
What bugs me is the inner div created for the date type field. Is there a way in the FormBuilder to keep the type date but remove this inner div without using javascript to handle it or in the twig template. Simply to say - "inner tag => span".
This is pretty generic question as I am looking for a way to usually change the auto generated tags, but if needed here is how this form field is created in form builder
add('term',DateType::class, array(
'widget' => 'choice',
'label'=>"Term",
'data'=>$project->getTerm()
))
You can override form rendering, there are few ways.
The simplest one is overriding form theme widget block (in this case date_widget) and setting form_theme to _self.
Basic example:
{% form_theme form _self %}
{% block date_widget %}
<span>
{% if widget == 'single_text' %}
{{ block('form_widget_simple') }}
{% else %}
{# rendering 3 fields for year, month and day #}
{{ form_widget(form.year) }}
{{ form_widget(form.month) }}
{{ form_widget(form.day) }}
{% endif %}
</span>
{% endblock %}
{% block content %}
{# ... form rendering #}
{{ form_row(form.someDateField) }}
{% endblock %}
I am having trouble working around with twig.
I pass a $labelz var on twig, and this $labelz is an array of the form label[0][left], label[1][left], ... label[2][left] so on.
This array, $labelz is actually a _POST var, so when I do some "validation", i want to echo the values stored on this array again back to the form. Hence, I loop it on twig. I can successfully echo the stored value back in a input form using
{% for key, label in labelz %}
<input type="text" name="label[{{ key }}][left]" value="{{ labelz[key]['left'] }}">
{% endfor %}
Now, here is my problem, I am using this function
{% if errors.has('VARIABLE') %}
{{ errors.first('VARIABLE') }}
{% endif %}">
to check if there's an error passed to the page (using errors.has()), then echo the error message if it has (using errors.first()) . Now, with those function I want to do the same to $labelz so I tried using this:
{% for key, label in labelz %}
{% if errors.has(labelz[key]['left']) %}
{{ errors.first(labelz[key]['left']) }}
{% endif %}`
{% endfor %}
but it fails, because as you can see, and note key is a forloop variable of twig, and i have no idea how to make this work. Please help thanks!
turns our ~ solved my problem, it allows me to concatenate string on twig.
Thanks!
I am trying to customise a specific form row in my form layout. From the symfony cookbook it tells me, if i understand correctly, that I can modify the form by adding a code block in my form theme file.
I am adding the field to the form like this:
->add('editions', 'collection',
array('type' => new EditionType(),
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
)
)
I generate the form rows in the template in the following way, I need the data-prototype tag because the user needs to possibility to add an edition when viewing the form:
<div class="editions" data-prototype="{{ form_widget(form.editions.vars.prototype)|e }}">
{% for edition in form.editions %}
<section class="edition-container">
{{ form_label(edition.isbn) }}
{{ form_errors(edition.isbn) }}
{{ form_widget(edition.isbn) }}
</section>
{% endfor %}
</div>
To customise the rows for the 'editions' fields I tried the following:
<!-- Custom form theme for textarea label rows -->
{% block textarea_label %}
{% spaceless %}
<div {{ block('label_container_attributes') }}>
<label class="label">{{ label }}</label>
</div>
{% endspaceless %}
{% endblock %}
<!-- Custom form theme for edition field textarea label rows -->
{% block _booklist_editions_label %}
{% spaceless %}
<div {{ block('label_container_attributes') }}>
<label class="label">{{ label }}!</label>
</div>
{% endspaceless %}
{% endblock %}
Unfortunately the second block isn't working, the first block however does work. What I did notice is that the outer div from the editions field does not have an id attribute with the field name in it.
This makes me think that the solution to the problem could be one of these:
Custom form theme block has the wrong name, don't know what other name I should give it then.
The id's is not added to the outer div, therefor it's not 'linking' the custom form style.
Could someone explain me how I can add a custom form theme to my 'editions' field using an external form theme file or how I can achieve this in another way.
pyrocms page in Body Editor how to code for display custom fields data. like
i have a image custom field. i write code like.
{{ image:id }}
{{ page:image:id }}
{{ pages:image:id }}
{{ template:image:id }}
{{ custom_fields }}
<img alt="" class="img-custom-responsive img-border" data-pyroimage="true" src="{{ url:site }}files/thumb/{{ image:id }}/310/310/fit" />
{{ /custom_fields }}
i write this code in body Editor But this is not return image id.
How can i get image id on body Editor.
please help.
Thank you.
There is no "id" attribute for the image field type.
Check out the docs on the image field-type to see the available attributes.
Example:
{{ custom_fields }}{{ image:img }}{{ /custom_fields }} // produces a full img tag
{{ custom_fields }}{{ image:filename }}{{ /custom_fields }} // get the filename