i have screenShots element in my document that is an array of URLs which am trying to display in the front-end. here is my code
<div class="col-md-4">
{{#each product.screenShots}}
<img src="{{product.screenShots}}" alt="">
{{/each}}
</div>
this is what i get int he client side.
i can see the images exists when i enter the URLs.
what am i doing wrong here?
Since you said, screenshots is an array of URLs, you need to change src attribute like this,
<div class="col-md-4">
{{#each product.screenShots}}
<!-- Assuming product.screenShots = ["http://url-to-image1.com", "http://url-to-image2.com"] and so on..
<img src="{{this}}" alt="">
{{/each}}
</div>
Related
I use Handlebars for a simple Node.js project and I would like to insert more than just few variables in a partial.
I have a layout that contains the very basic frame of my html page (html and head tags). The pages I render are usually all the same and contain the following code:
{{> default/header
help_title="This is the title of my help modal."
help_body="<p>This is the body.</p>"
}}
<main class="vertical-center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 justify-content-center align-items-center">
<!-- THE CONTENT THERE -->
</div>
</div>
</div>
</main>
{{> default/footer}}
Depending on the page itself, I may want not to display the header and/or the footer (and I remove the line consequently).
My need: I'd like to wrap the main part in a partial (because everything but the <!-- THE CONTENT THERE --> is invariant) or whatever could do the job and providing to it not only few words (like in the header) but potentially a lot of html code. And I cannot find a way to do it in the documentation. Something like this, that would basically work a bit like layouts:
{{> default/main
<!-- THE RAW HTML CONTENT THERE -->
}}
Handlebars supports exactly what you are describing in the form of partial blocks. The default behavior of partial blocks is to render default content if the partial cannot be found. However, there is a special built-in helper, #partial-block which will inject content into your partial.
From the documentation:
This block syntax may also be used to pass templates to the partial, which can be executed by the specially named partial, #partial-block.
Inside your partial, you will add {{> #partial-block }} where you want the content to be injected. In your case, your "main" partial would look like:
<main class="vertical-center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 justify-content-center align-items-center">
{{> #partial-block }}
</div>
</div>
</div>
</main>
Then, the page that is calling the "main" partial would do using the block syntax with the content that is to be injected into the partial put inside of block tags:
{{#> main}}
<p>THE RAW HTML CONTENT HERE</p>
{{/main}}
I have created a fiddle for your reference.
When a user is viewing a tag on my blog, I'd like to be able to display additional information about that tag. I think it would be nice to have a template that's called for each tag I have.
My tag.hbs
{{!< default}}
<div class="row">
<div class="twelve columns">
<h1 class="archive_title"><span>{{tag.name}}</span></h1>
</div>
</div>
<!-- PLEASE LOOK HERE -->
I would like to render a partial here
<!-- PLEASE LOOK HERE -->
<div class="row {{#if #blog.cover}}margintop{{/if}}">
<div class="small-12 large-9 columns">
{{#foreach posts}}
{{> content-post}}
{{/foreach}}
</div>
<div class="small-12 large-3 columns">
{{> sidebar}}
</div>
</div>
<div class="row">
<div class="small-12 columns">
{{pagination}}
</div>
</div>
To render a partial for the current tag name, I've tried using this
{{> tag.name}}
I get a 500 error
[tag.hbs] The partial tag.name could not be found
Is there a way to include a partial with a dynamic name in handlebars?
Additional question: Ideally, I'd like all of the tag partials in their own directory. Is this possible too?
I am quite new to the Ghost platform, but I have been experimenting quite a bit. I see that you attempted to do this:
{{> tag.name}}
That is not actually calling the name for that particular tag, what you were trying to do there was to actually show the contents of the tag.hbs file itself. The reason I claim this is because when I recently just created a "menu.hbs" for a menu bar for my theme I attempted this:
{{> menu}}
Handlebars quickly realized that I had a "menu.hbs" file and poured the contents of that file onto the spot that I placed "{{>menu}}" in.
Essentially what you are trying to attempt is a "path". If you scroll down to "Handlebars Paths" on the Handlebars webpage you will find exactly the method you were trying to attempt. I hope this at least helped a little.
This works:
{{#has tag="foo"}}
{{> partial-for-foo}}
{{/has}}
{{#has tag="bar"}}
{{> partial-for-bar}}
{{/has}}
See the has helper docs.
Quite new to Drupal theming and need some help editing the markup a view outputs.
I know I have page templates, node templates, block templates; but what about views?! I choose the fields that are displayed in the results using views UI but that doesn't let me customise the outputted markup I want.
So for example, instead of this:
<div class="band propertysearch-results">
<section class="layout">
<ul>
<li>
<div><img src="" alt=""></div>
<div>
<h3>Location Name</h3>
<small>123 Leather Lane, London, NW1 123</small>
<p>oremque ad laborum et reiciendis eos quasi odit!</p>
</div>
<div class="results-info">
3 <span>Rooms</span>
View
Save
</div>
</li>
</ul>
Drupal is giving me:
<div class="view viewproerties">
<div class="view-content">
<ul data-thmr="thmr_46">
<li class="">
<div class="views-field views-field-field-photo" data-thmr="thmr_43">
<div class="field-content">
<img typeof="foaf:Image" src="http://findabode.d7/sites/default/files/mvenue1.jpg" alt="" data-thmr="thmr_16 thmr_17 thmr_18">
</div>
</div>
<div class="views-field views-field-title" data-thmr="thmr_43">
<span class="field-content">Leather Lane</span>
</div>
<div class="views-field views-field-body" data-thmr="thmr_43">
<div class="field-content"></div>
</div>
<div class="views-field views-field-field-rooms-1" data-thmr="thmr_43">
<span class="views-label views-label-field-rooms-1">Rooms: </span> <div class="field-content"><span data-thmr="thmr_22" class="devel-themer-wrapper">2</span></div>
</div>
<div class="views-field views-field-view-node" data-thmr="thmr_43">
<span class="field-content">view</span>
</div>
</li>
</ul>
</div>
</div>
So my question is how to I customise the outputted markup and how do I figure out what the variables for each field is called?
Do I make these changes in a tpl file or somewhere else?
Theming the output of views in Drupal is somewhat tricky, depending on the types of fields you have used and the kind of output style you have chosen to create the view.
You will need to learn about Views Templating in order to override the specific templates that your particular view is utilizing to render the output.
In order to customize the output , you need to implement custom template for views , that would override the default rendering of views
If you are creating a view, then views let any theme to overwrite at different levels
Display Output
Style Output
Row style output
Field Content
Here is the quick tutorial on how to theme views
Overriding drupal views
You can also use the Views interface to adapt the markup to what you need:
With the Style Settings you can alter the field markup including its container and label:
Or you can use the Rewrite Results to customize your markup and using tokens for the fields values.
I have been trying to resolve an issue for awhile with rendering of content and the {{currentUser}} check in meteor. A code snippet is below:
{{#if currentUser}}
<div class="sparkline-box side">
<div class="sparkline-row">
<h4 class="gray"><span>Pending Contract Actions</span> 25</h4>
<div class="sparkline big" data-color="gray"><!--28,11,24,24,8,20,26,22,16,6,12,15--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="dark-green"><span>Outstanding Task Orders</span> $43.33M</h4>
<div class="sparkline big" data-color="darkGreen"><!--16,20,6,19,25,22,9,13,7,10,15,4--></div>
</div>
<hr class="divider">
<div class="sparkline-row">
<h4 class="blue"><span>Current Month Actions</span> 45</h4>
<div class="sparkline big" data-color="blue"><!--20,18,21,17,5,7,29,9,8,14,23,8--></div>
</div>
<hr class="divider">
</div>
{{/if}}
With the {{currentUser}} block in place, the text appears, but the sparkline charts do not render in the browser, even when the page is reloaded. If I am not logged in, the text and charts are not visible. The problem is with the rendering of the sparkline charts when wrapped in the {{currentUser}} block. This also happens with other third-party javascript libraries that I am using in the application if wrapped in a {{currentUser}} block. Any thoughts on what may be happening?
Thanks!!
What happens is that meteor re-renders the context when {{currentUser}} changes. It does not preserve any changes made to the DOM by third parties. Read about isolate, preserve and constant. I believe that {{#constant}} will do the trick here.
I've started my asp.net WebPages site using the "Starter Site" template. It contains a layout page, _SiteLayout.cshtml, that is referenced in Default.cshtml.
In _SiteLayout, there is this HTML:
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"></p>
</div>
It originally had one of the images that "came with" the site instead of "something.png" but since I did not see the original image in the browser when I ran it, I changed it first to ~/Images/orderedList7.png and then to "something.png" in an attempt to raise an err msg or warning. But no! Tolerance, your name is html! (or is it vice-versa?).
At any rate, why am I not seeing the image specified in the layout file when I run the site?
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><img src="~/Images/something.png" /></p>
</div>
Try that, you are using an anchor instead of an image tag.