Trying to wrap my head around Fatfree and how I can nest templates using data from the DB.
So far I have a home page loading that loads three templates. So good so far and everything works.
Main class
function homePage($f3){
$f3->set('slider','slider.html');
$f3->set('testimonials','testimonials.html');
$f3->set('cardContainer','cardContainer.html');
echo Template::instance()->render('home.html');
}
Home.html
<include href="{{ #slider }}" />
<include href="{{ #testimonials }}" />
<include href="{{ #cardContainer }}" />
CardContainer needs to load cards containing images and other text that are stored in the DB. I can get those rows from the DB no problem in the Main class and var_dump them to the view.
How ever I'm not understanding how I add that data to a card template and then insert that card into the cardContainer? I'm not even sure what I need to be looking for to make this possible. Any direction would be much appriciated. If this was done in straight up PHP I would be done by now.
Thanks for any help or guidance you can provide.
You would pull them out of your database and do one of 2 things:
<?php
// option 1
function homePage($f3){
$cards = $f3->db->getYourCardsOrWhatever();
$f3->set('cards', $cards);
$f3->set('slider','slider.html');
$f3->set('testimonials','testimonials.html');
// then in here you would reference #cards in a <repeat> element
$f3->set('cardContainer','cardContainer.html');
echo Template::instance()->render('home.html');
}
// option 2
?>
<include href="{{ #slider }}" />
<include href="{{ #testimonials }}" />
<include href="{{ #cardContainer }}" with="cards={{ #cards_from_somewhere_to_inject }}" />
Related
My Problem:
Hey everyone, I'm currently in the process of coding a website for Shopify and I want to animate some HTML within the website using anime.js. The website correctly locates and reads the "anime.min.js" file that I've included in the website's assets, however, it just isn't animating anything. Is it even possible to use anime.js in Shopify Liquid?
I would really appreciate it if someone could help clarify this for me.
What I've Tried:
If you know Shopify Liquid, I'm assuming you know how it code editor works as well. Like I said, I've added the "anime.min.js" file to the "Assets" folder in the template, and it's recognizing and reading that file correctly (via the code shown below) so I'm not really sure why it isn't working unless anime.js just doesn't work with Shopify Liquid for some reason.
My Code:
<!-- HTML/Liquid -->
<div class="social-media__icons">
{% for block in section.blocks %}
<img src="{{block.settings.icon | img_url:'x22'}}">
{% endfor %}
</div>
<!-- JS -->
<script src="{{ 'anime.min.js' | asset_url }}"></script>
<script>
anime({
targets: '.social-media__icon',
duration: 1000,
delay: anime.stagger(200, {start: 400}),
translateY: [-500, 0],
easing: 'easeOutCubic'
});
</script>
I'm using HTML snippets such as
<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px" border="0" />
to insert scaled and offset images into blog posts in Hugo. Unfortunately I'm finding with the latest version of Hugo that images inserted this way are not rendering. If I do an image insert via Markdown, the images are inserted fine, but it appears impossible apply a style tag?
Any suggestions on how I can diagnose the issue here? I'm currently at a loss.
I would prefer to keep the HTML out of the MD as much as possible; setting anything to "unsafe" always makes me a little nervous, and I presume that was the intention when the the parameter was named "unsafe"!
I think my first port of call would be to use the figure shortcode, that supports a class name, as well as nice-to-haves like captions and titles (which may have accessiblity and SEO benefits).
{{< figure src="site.jpg" title="Cool Image" class="pull-left" >}}
If that doesn't suit, the options would be a custom shortcode, or target through pure css, you could use nth-child to alternate images to the left and right if desired.
Edit - Additional info
Create a CSS file and link it in the head, for example I have <project-root>static/styles/main.css and this in the head of my layout
<link href="/styles/main.css" rel="stylesheet" type="text/css">
Very important to note that static is not part of the url/href.
Above I assigned the figure the class of pull-left so in main.css your style would look like
.pull-left{
width:100px;
float:left;
margin: 0px 5px 5px 0px;
}
Added details from Link in Comments
Best to make a copy of theme files rather than overwriting so create
layouts -> partials -> head.html
normally copied from
themes -> actual-theme -> layouts -> partials -> head.html
and add in the normal HTML link tag. (Fun bonus fact, themes are optional if you want to create from scratch)
You can also specify files in the config file
custom_css = ["css/custom.css"]
custom_js = ["js/custom.js"]
And use this code to add to the head.html
// css
{{ range .Site.Params.custom_css -}}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
// javascript
{{ range .Site.Params.custom_js -}}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
It turns out that inline HTML was getting filtered out by Hugo. The following needed to be added to config.toml to allow the HTML to be inserted into the resulting pages.
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
This came to pass in Hugo 0.60.0 with CommonMark compliance.
Not sure if this helps, but I cleaned up your syntax a little.
<img src="site.jpg" style="width:100px; float:left; margin: 0px 5px 5px 0px; border:0px;" />
I want to know How to add image in laravel.
I also know it can do using html/css. But I want to know how to give image path and where put images in laravel(I suppose public img folder in laravel).
Please help me.
Thanks in advance.
<img src="(How to give image path??)" alt="" style="width:100%;">
You need to store your images in the public folder and then you can access them like this
{{ asset('/my-picture.png') }}
You can also access them using Laravel Collective package for building forms and HTML elements, so your code will look like this:
{{ HTML::image('/my-picture.png', 'about the picture') }}
I solved my problem as following:
<img src="img/pictureName.jpg" alt="">
img is folder in public.I only give path in image simply.
Thanks all.
The storage_path() is OS file system path. For example in Windows it will be C:\project\storage or *nix /var/www/project/storage.
The <img> can't read the OS path. They read URL, something like http://domain/image.png.
For example to read images inside storage_path, add this inside routes/web.php.
Route::get('storage/{name}', function ($name) {
$path = storage_path($name);
$mime = \File::mimeType($path);
header('Content-type: ' . $mime);
return readfile($path);
})->where('name', '(.*)');
Usage
<img src="{{ get_image('storage/images/logo.png') }}" />
<img src="{{ get_image('storage/images/other.jpg') }}" />
<img src="{{url('folder_name/file_name_variable')}}" alt="" style="width:100%;">
{{url('folder_name/file_name_variable')}}<br>
try this
I want to display an image in my dossier.index page (blade). I've already defined an image with the following path:
/resources/assets/icons/step_1.png
What would be the correct syntax to get my image displayed in my view?
I've already tried something like this:
<img src="/resources/assets/icons/step_1.png">
Or with blade:
<img src="{{ URL::to('/resources/assets/icons/step_1.png') }}">
Use asset() helper:
<img src="{{ asset('icons/step_1.png') }}">
Also, public assets should be in public directory.
URL::to is generate absolute url to the given path and URL::asset is generate to an application asset. So use below code to display image.
<img src="{{ asset('icons/step_1.png') }}">
See the basic of laravel helpers
First, move /resources/assets/icons/step_1.png to storage/app/public/assets/icons/step_1.png as "Storage" directory should be used to store such publicly accessible files as per the Laravel's offical docuemtnation:
https://laravel.com/docs/5.3/filesystem#the-public-disk
Then fire below artisan command:
php artisan storage:link
Then
<img src="{{ asset('storage/assets/icons/step_1.png') }}">
This is the proper way to use such assets in Laravel.
Now, it should work.
I'm sort of updating my Octopress website, and decided to start from a clean install and add my customizations. I'm noticing a buggy behavior that was not there before in how Octopress parses html tags in particular situations.
An example. In the head section, I have the following commented out line:
<!--<link href="{{ root_url }}/favicon.png" rel="icon"> -->
This should be a perfectly valid commented out line, and works perfectly except when there's another html tag within the comment (i.e. <link ...>). In the above case, Octopress replaces the -- at the end of the comment with –, the HTML code for en-dash, with the result that the comment never actually ends when it should.
I found a workaround for this case by using <--> for closing the comment tag.
This is also happening in another instance, and I need help with this one. A few of my blog titles have an <em> in them, so that when Octopress creates an html for it, the result should be, for example:
My Title With <em>Emphasized</em> Text
However, once again, since there's a nested tag here, the actual result is the following:
<a href="/blog/link/to/post" title="My Title With <em>Emphasized</em> Text”>My Title With <em>Emphasized</em> Text</a>
i.e., the closing " at the end of the title is replaced with ”, the HTML code for ", with disastrous results.
I can't find a solution or a workaround for this... help!
I found a bug report here, but there doesn't seem to be any activity about this.
https://github.com/imathis/octopress/issues/1662
Once again, I should emphasize that this is a bug in a more recent build of Octopress (or its dependencies), and was not present in an earlier version that I have been using.
Help! :)
OK, found a solution!
Find the html layout file for your post type, usually here: /source/_layouts/post.html, and find this section:
<p class="meta">
{% if page.previous.url %}
<a class="basic-alignment left" href="{{page.previous.url}}" title="Previous Post: {{page.previous.title}}">« {{page.previous.title}}</a>
{% endif %}
{% if page.next.url %}
<a class="basic-alignment right" href="{{page.next.url}}" title="Next Post: {{page.next.title}}">{{page.next.title}} »</a>
{% endif %}
</p>
Add | strip_html after the two instances of title, as follows:
title="Previous Post: {{page.previous.title | strip_html}}
and
title="Next Post: {{page.next.title | strip_html}}"
And that's it! Now there's no html inside the title quote, and no issues!