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].
Related
In Drupal 7, I used following codes to link to other pages. I have "Service" block and inside that block , I write like this.
<?php
global $base_url;
global $base_path;
$link = $base_url . '/sites/all/themes/bootstrap_business/images';
?>
<div><img alt="" src="<?php print $link?>/customer.png" /></div>
<p> Service</p>
and I save text format with PHP.
But for now Drupal 8, we don't have Text format option "PHP" and also I don't know how to write codes to connect with other page.
Anyone help me please? Thanks.
In drupal 8 you can use hook_preprocess_HOOK() to pass variables to twig files and call your variables like
<header class="main-header">
{{ title_prefix }}
{% if page.header and logged_in %}
{{ page.header }}
{% endif %}
{% if not logged_in %}
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" id="logo" class="logo">
<img src="{{ base_path }}themes/custom/mytheme/logo-login.png" alt="{{ 'Home'|t }}" />
</a>
<h2 class="login-logo">{{ site_name }}</h2>
{% endif %}
{{ title_suffix }}
</header>
Please see https://www.drupal.org/docs/8/theming/twig/functions-in-twig-templates for more details
You can also include other pages using
{# this template is located in templates/layout.html.twig #}
{% extends "layout.html.twig" %}
{# this template is located in templates/user/profile.html.twig #}
{{ include('user/profile.html.twig') }}
See: https://www.drupal.org/docs/8/theming/twig/functions-in-twig-templates
In your example, you need to specify your theme directory. Just use:
<img src="/{{ directory }}/images/xyz.jpg">
Here, {{directory }} will resolve to directory of your current theme.
For preparing links to other fields. see above mentioned drupal page
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>
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 %}
I am trying to preview images which stored inside mybundle/image folder. but i can not get proper image path for view images which name is dynamic.
here is the code.
// inController
$image = $this->get('file_locator');
$path = $image->locate('#AcmeMyBundle/uploads/images/my_img.jpg');
return $this->render('images/myaction.html.twig', array(
'path'=>$path,
));
//in myaction.html.twig
{% image '#SeStorageBundle/uploads/images/'{{ image.name }} %}
<img src="{{ asset_url }}" width="100%" height="100%" alt="my alt of image" class="pull-left">
{% endimage %}
If the link to your image is correct, then try using asset to render the image like this:
<img src ="{{asset(path)}}"/>