I have an problem with displaying my uploaded image to web/images when using the following line below while inside of the blog text or using a data fixture.
I've tested it by manually calling in the code to display the image inside of the Twig file but I want to use this in a fixture/entering it in the blog text to customize the size/alignment of the images for each post.
Can someone show me what's preventing the image from displaying?
Cheers!
This refuses to display image while in a fixture or inside blog text: (shows an outline of the proper sizing and alignment of image inside the blog text but not the image itself)
<img class="alignleft" src="{{ asset(['images/', news.image]|join) }}" alt="" width="290" height="275" />
Using a web link for an image works fine when in a fixture or when entering a blog text:
<img class="alignleft" src="http://www.example.com/example.jpg" alt="" width="290" height="275" />
Using autoescape false to display the blog text:
{% autoescape false %}
<p>{{ news.blog }}</p>
{% endautoescape %}
You're trying to render a string(variable) as a (sub-)template.
That's why twig isn't processing the {{ asset() }} function.
Auto-escaping is not what you're looking for as it doesn't enable processing of twig functions inside strings.
solution:
the template_from_string function
1.) Enable the Twig_Extension_StringLoader extension that comes bundled with twig in your config.yml
services:
# ...
twig.extension.stringloader:
class: Twig_Extension_StringLoader
tags:
- { name: twig.extension }
Now clear your cache using app/console cache:clear.
2.) If you have your template stored in a variable named news.blog you can now use the function as follows:
{{ include(template_from_string(news.blog)) }}
more information in the documentation: template_from_string
Related
I am trying to src an image into my html. Using Laravel as a backend.
<img class="card-img-top" src="storage/app/public/photos/{{$photo}}" alt="Card image cap">
I have also used the system link command and tried,
<img class="card-img-top" src="storage/{{$photo}}" alt="Card image cap">
In the past this would have been sufficent however, when using Laravel this does not link the image.
Does Laravel not allow direct 'src' links, or am I messing up the 'src' file structure?
Laravel uses blade syntax, variables ($) need to be between {{ }} in order to output their value.
So give <img class="card-img-top" src="storage/app/public/photos/{{ $photo }}" alt="Card image cap"> a try :)
i think the simple call like
<img src="storage/image/{{$data->photo}}" alt="">
$data = result from foreach
photo = column in db.
Correct file path is:
src="storage/photos/{{photo}}"
It skips /app/public
src="{{ url('assets/img') }}/{{ $item->photo }}"
Works for me!
I am trying to make a jekyll blog with github-pages.
In order to get some pictures from a folder, I used this gist: https://gist.github.com/jgatjens/8925165
Now, I want to make it a little bit more flexible so that it would get a front matter variable ( page.folder ) and would return the images from there.
My problem is that whenever I assign a folder variable to the front matter and then pass it to the block like this:
{% loop_directory directory:page.folder iterator:image filter:*.jpg sort:descending %}
<div class="item">
<a class="content" href="{{ site.baseurl }}/{{ image }}" title="portfolio 2015">
<img src="{{ site.baseurl }}/{{ image }}"/>
</a>
</div>
{% endloop_directory %}
In the directory attribute it passes page.folder instead of, for example "images/portfolio" which is defined on the front matter. I am rather new at ruby so I can't find something refered to that problem. Is it a bug or something that I need to write correctly to pass the variable?
Did you tried:
{% loop_directory directory: {{page.folder}} iterator:image filter:*.jpg sort:descending %}
I had figured it using the context object to get the front matter attributes,
but unfortunately github / github-pages do not accept plugins (_plugins folder), so a day was wasted for that.
I resolved to github's solution, to create a _data folder and use a text-based (yaml) format to list all my extra assets in an organized way.
I have a website that consists out of a few 'slides'. Each has a fixed structure, used by some scripts, but variable content. I'm hosting it on github and am now trying to use Jekyll to make it easier to add new slides.
I already have each slide in a different html file, which I include in the main page: {% include_relative _slides/about.html %}. Now I'm trying to make it a markdown file, and I wanted to use front matter to make a layout that each slide's file could use. I can include a markdown file, and get it to render by doing:
{% capture myInclude %}{% include_relative _slides/test.md %}{% endcapture %}
{{ myInclude | markdownify }}
However, when I add a front-matter block to it with a layout defined in it, the layout doesn't get applied. It just gets rendered as a horizontal line (for the first ---) and then "layout: slide title: Test Slide —" in plain text.
Is there any way to fix this? Or perhaps a better way to break up my index.html and the slides in it?
Thanks a lot!
Note: Sorry if this was asked before, I Googled everything I could imagine it would be called.
I found something that works for me. I divided my template in two parts, the part above the content, and the part under it. Then in the file I include, there are two includes as well, one at the top and one at the bottom.
So my 'slide' files look like this:
{% include slide_start.html title="About" image="images/about.jpg" %}
... the content of the slide ...
{% include slide_end.html %}
As you can see, in the first include I give some parameters, these will be filled in and can be accessed with the liquid tags {{ include.something }}.
My slide_start.html looks like:
<div class="slide">
<div class="header">
<span>{{ include.title }}</span><!-- no whitespace
--><img src="{{ include.image }}" alt="{{ include.title }}"/>
</div>
<div class="content" markdown="1">
the slide_end.html is just two closing div tags.
You're trying to mix the page/post and the include strategies.
Page/post have a front matter and are decorated with a template, which can itself be decorated. `mypage.html -> layout: page -> layout: default.
Includes are included in page/post but they are only code parts. They cannot be decorated with a template.
You will have to choose.
Take a lool at https://github.com/shower/jekyller this can be helpfull.
I'm using LiipImagineBundle for an application built with symfony2 and I want to display a default image, when a image does not exists.
Let's say I have
<img src="{{ ('/profiles/foo.JPG') | imagine_filter('bar') }}" />
How could I display default.jpg when '/profiles/foo.JPG' does not exists?
Thanks,
This is an old question but the correct (and probably easiest) way to do this is to specify a default_image in the liip-imagine configuration file.
http://symfony.com/doc/current/bundles/LiipImagineBundle/configuration.html
Ok Martin Lie i have foud a link for you and i hope you will directly undeerstand the scenario because by default Twig can not test if a Phisicall object exists or not.. so you must create a service that will help you to make it directely in Twig...
Create a service for twig
Don't worry !
You test if the variable the image exist...
for example is you have sent your image from a controller
just make:
{% if image is defined %}
<img src="{{ image | imagine_filter('bar') }}" />
{% else %}
<img src="{{ ('/profiles/default.jpg') | imagine_filter('bar') }}" />
{% endif %}
I have a basic layout page template:
---
layout: default
---
<header class="sidebar">
{{ page.title }}
</header>
<section class="content">
{{ content }}
</section>
My pages that use this as the page template are just Markdown that gets put into the <section> block.
I'm looking for a way to keep all my page content in one file but have it so I can define separate content that gets put into the <header> tag from the page template.
Is there any way to do this and keep all the page's content in one file?
You can do so by defining the content you wish to be separate and reused in the _includes/ directory.
You would then include it by calling for example: {% include file.ext %} to include the of the file name _includes/file.ext (almost as if you just copy and pasted it in).
See section pertaining to the _includes in the Jekyll documentation here.
The YAML Front Matter can be used to directly store additional content for the page. This is done by creating custom key/value variables. The layout/template uses liquid tags to check to see if the secondary content is available. If so, it gets output. Otherwise, the section is skipped.
Here's an example of a layout template that checks to see if a custom variable called myvar1 is set:
---
layout: default
---
<header class="sidebar">
<h2>{{ page.title }}</h2>
{% if page.myvar1 %}
<p>Secondary content here: {{ page.myvar1 }}</p>
{% endif %}
</header>
<section class="content">
{{ content }}
</section>
Note: To match your original example, this layout file calls a parent "default" layout. For this example, the above is in a layout file called "_layouts/nested_layout.html".
To use the new slot, a myvar1 variable is added to the front matter, like this:
---
layout: nested_layout
title: This is the post test layout
myvar1: More here <strong>including bold text</strong>.
---
And here is the page content: The quick brown fox jumps over the lazy dog.
When that page is processed, the secondary content will show up. If you create another page that doesn't have myvar1, nothing will be rendered at that part of the template.
You can add as many custom variables to your pages as necessary. The values can include HTML as shown in this example. (It works for me in Jekyll 0.11.2.) If you have a lot of code that you want to add (instead of something that easily fits on one line), or if you want to have the same content available to turn on/off for multiple pages, you can use the custom variable as a flag. Then, in the {% if %} tag, you would call an include if the value is set.