displaying image reusable content with pieces - image

I wrote a Widget – i basically created the people Widget ( Adding Editable Content to Pages - Tutorial) and modified it to my needs.
The structure of the widget
On my show.html the heroimage is missing and everywhere else the image is displayed properly.
Does anyone have a clou, what i am missing?
app.js
project index.js
show.html

The code screenshots give an incomplete picture but a few things to double check or try:
Is heroimage actually a part of your project's schema?
In show.html are you tucking data.piece into its own variable? I would think the line would be
{% set image = apos.images.first(data.piece.heroimage) %}

Related

Extra text in footer in laravel

I have a Script . there have a footer text after
</body></html>
that means end of every page .i searching all view file and some off others directories not find out that text . so is there any possibility File i can get this footer text. i have not enough knowledge in laravel ..
As you mecioned, you cant find text on your footer.
That is probably beacause you have a template for content
search line code
section('content')
or maybe
section('footer')
This is the section you are working on.
Go back to your views folder
Open app.blade.php, find yield('content') or what your looking for, there you have the code included into all views.
or maybe you have a view fooder.blade.php the footer of all views
That is templating logic on laravel, you can search all code following the sections.
If there is no a layouts folder, look for something with related name.

Vue markdown Image not displaying

I'm using the vue-markdown package to render markdown. It seems to work except the images don't display. The file path is correct as I can have an img show up correctly
<img src="#/assets/7801_4_lang_image.png"><!-- shows up -->
<vue-markdown>![img](#/assets/7801_4_lang_image.PNG)</vue-markdown><!-- doesn't show up -->
Changing the # to .. doesn't change anything either, the top one displays but the bottom one doesn't. The case of png/PNG also doesn't matter. Am I referencing the image wrong?
The file loader doesn't know about images in Markdown so Webpack doesn't know to bundle them.
Typically you need to require() the image source (see https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports)
You could try this but I'm not entirely sure if it will work with the vue-markdown component.
![img]({{ require('#/assets/7801_4_lang_image.PNG') }})
To use the source prop, you would use something like
<vue-markdown :source="`![img](${require('#/assets/7801_4_lang_image.PNG')})`">
See https://v2.vuejs.org/v2/guide/syntax.html#Attributes
You could also use the public folder who's contents are always bundled. For example, for a file public/images/7801_4_lang_image.PNG and assuming your app runs at the domain root
![img](/images/7801_4_lang_image.PNG)

Kentico8 - Show / hide a webpart or transformation depending on path

On our website, we have a logo on top. What I want is the following:
If the website's path starts with: 'www.website.com/books' The Logo should be 'books.png'.
If the website's path starts with anything else, it should be 'logo.png'
The logo is loaded in a repeater webpart. I can set the visibility of the books.png webpart to:
{%NodeAliasPath.StartsWith("/books/")#%}
Which works, The logo shows up if I go to, say, website.com/books and website.com/books/harry-potter, but I want the normal logo on any other website.
First I tried to make some sort of If statement in the transformation of the repeater itself. This way I will only need one webpart, that changes content depending on the path. But it looks like Kentico won't allow If statements inside a transformation. I still prefer an option like this, since it feels cleaner to me.
The other option is I make two repeaters, one with the normal logo.png, and one with books.png. But how would I hide the logo.png if the path starts with /books?
Or if anyone has another solution to this problem, let me know :)
Thanks.
Easiest option is to just have 2 repeaters or webparts for this so it's easily visible in the Design tab.
Your visibility macro for the /books should be:
{% CurrentDocument.NodeAliasPath.ToLower().Contains("/books") %}
And for the other webpart you'd enter:
{% !CurrentDocument.NodeAliasPath.ToLower().Contains("/books") %}

Content attribute in CSS to show image icon

While creating and learning bootstrap page. I came across the content attribute of css I read few articles and I got how it works. But following code snippet shows me an image icon but the content attribute value really isn't the image url but a code. I'm not clear as how we can show the image without the url and where is the image coming from?
.test.glass i:before {
content: "\e001";
}
Following is the html element to show an image icon using above css:
<span class="test glass"><i></i></span>
But what is "\e001" is that an image code or something else?
they are utf8 codes. there are plenty of sites describing the glyphs for different standard fonts but you can also define your own font set with whatever images you choose as whatever character.
if you use a webfont, from fontello for example but are plenty of sites like that one, you can define what image to use as character \e0001 and whenever you want to use that image, you must make sure you use that font-face for the element and use the utf8 code to display the image. in html it would be someting like <span class="iconfont"></span>. if you add the image with css then is like in your example.

Joomla 2.5.8. How to display only article or module content in modal box popup.

I want to put login module in to modal popup. But when I use class="modal" whole page gets loaded in to modal. Can you show me the way to put only module.
This stands also for displaying articles in modal.
here is the link with problem
I do this fairly often and there are two tricks that can help make this work better. First you will likely want to add tmpl=component to your url. This causes Joomla to only display the article instead of the entire template (as long as your template supports this, most do).
This should do pretty well. If you want to get even more selective, you can do one of two things:
Add CSS to hide pieces
.modal-body .other-selector {
display:none;
}
Use Javascript to select only the piece that you want
$('#myModal').on('show', function () {
// selects a piece of the current modal body and sets it as the only content of the modal
$('#myModal .modal-body').html($('#myModal .modal-body').find('.other-selector).html());
})
The way you can only display the component is to add an extra parameter tmpl=component in the url.If you'll see the component.php inside your template folder that has mainly <jdoc:include type="component" /> with no module position.So it'll load only component.
I did not try for module but you can try similar for module.So you can try it by just giving the position of the module in whole template like create a new page called modules.php in your template folder and put the module position inside this page.And you call it in a similar way just like component like tmpl=modules
I hope this will work.
It was problem with my templates component.php file. I just added inside and now it works fine. Thanks guys

Resources