It's my first time with Timber/Wordpress.
I'm trying to use this plugin with Timber but I can't render any image.
I'm only getting the ids of the images:
{% set images = post.get_field('gallery_images') %} // "47,48"
I also try:
if (isset($post->hero_image) && strlen($post->hero_image)){
$post->hero_image = new TimberImage($post->hero_image);
}
I looked at the documentation
How can I get all the src of my images?
It depends on how or if your field gallery_images is nested further (via ACF).
If it's not nested it should work like this:
{% for image in post.get_field('gallery_images') %}
<img src="{{ TimberImage(image).src }}" alt="" />
{% endfor %}
Related
I have rendered all my pictures from gallery, but need to get them to slider in my twig file.. is that possible without using any plugin, please???
My code, php:
<?php
$context = Timber::get_context();
$context["post"] = Timber::get_post();
Timber::render( 'pages/single/single-one-collection.twig', $context, CACHE_TIME);
My twig:
{% for picture in post.get_field('oc_gallery') %}
<div class="section" id="section{{ loop.index }}">
<img src="{{ TimberImage(picture).src | resize(400, 266)}}" alt="" />
</div>
{% endfor %}
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 will try to add image gallery to my product entity. In my database all looks ok, in product table he had a gallery id, in admin panel i can set gallery to product. In twig when i try to show my product image this way:
<div>
{% for image in product.gallery %}
{% media image,'small' %}
{% else %}
No image
{% endfor %}
</div>
I have No image message, when doing by this way:
<div>
{% for image in product.gallery.galleryHasMedias %}
{% media image,'small' %}
{% else %}
No image
{% endfor %}
</div>
Have no message and empty div witohut image. {{ dump(product) }} return me this:
So in gallery field i have 4 images (its exacly what i add). How to show them on twig?
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.
I try to display an image which is in web/uploads/img
this image has the following name: Screenshot_2014-12-24-23-01-17.png
1/ when doing this, it works perfectly:
<img src="{{ asset('uploads/img/Screenshot_2014-12-24-23-01-17.png') }}" />
2/ when doing the following (the path of the image is in a variable) nothing is displayed :
<img src="{{ asset(array_image_WebPath[t]) }}" />
( with t = 1 and array_image_WebPath[1] = uploads/img/Screenshot_2014-12-24-23-01-17.png)
The fact is that I need to store my webpath of my images in an array. So what is the proper way of doing it?
EDIT: I tried with objects directly doing the following: {% for image in liste_images %} '<'img src="{{ asset(image.webpath)}}"/> {% endfor ‰} AND IT WORKS but I need to use my array to get the right image at the right place.
Go with a for...in:
{% for image in array_image_WebPath %}
<img src="{{ asset(image) }}" />
{% endfor %}
And access the loop index with either loop.index or loop.index0 [respectively 1 and 0 based].