I have an array of objects containing image and its respective information that I am iterating through. The path of the image is not rendering correctly.
Here is the sample array this is inside the data() method):
samples:
[
{ 'title': 'Numero Um', 'desc': 'Lorem ipsum dolor sit amet', 'img': '#/static/img/work/1.jpg' },
{ 'title': 'Numero Dois', 'desc': 'Lorem ipsum dolor sit amet', 'img': '#/static/img/work/2.jpg' },
{ 'title': 'Numero Tres', 'desc': 'Lorem ipsum dolor sit amet', 'img': '#/static/img/work/3.jpg' },
{ 'title': 'Numero Quatro', 'desc': 'Lorem ipsum dolor, ', 'img': '#/static/img/work/4.jpg' }
]
The the iteration is:
<div class="sampleCard" v-for='(s, index) in samples' :key='index'>
<img :src="s.img" alt="s.img">
</div>
What I get in the browser on the image src is - #/static/img/work/1.jpg
Now, if I hard code the #/static/img/work/1.jpg and not bind the src attribute the image displays and in the browser on the image src I get - /_nuxt/static/img/work/1.jpg
I'm not sure what Im doing wrong... the image exists and the path is correct. In previous version on Nuxt this worked fine - I'm upgrading an older project manually.
I also tried replacing the "#" with a "~" and still same issue.
ALSO, Im getting the same phenomenon when binding to the style and adding a background image dynamically:
<div :style="{ 'background-image': 'url(#/static/img/' + bannerUrl + ')' }">
This also used to work fine, but does not with Nuxt3.
Thanks in advance for any help.
So I just realized that I cannot serve dynamic content from the "assets" directory, it must come from a "public" directory. Here is reference to the docs - https://nuxt.com/docs/getting-started/assets#example-1
Related
When I type
<font> test </font>
in laravel blade file nothing is rendered in chrome.
Edit: please dont just advise not to use font tag, read the whole question. This font tag is generated by wysiwyg editor summernote so its not my choice to use it or not.
Weird thing is that I see this tag in page source but its not rendered on the page. When I make local html file with same source - it shows text within font tags in Chrome.
Also when I go to developer tools elements and click on container div to edit as html, if I add anything anywhere, then all the font tags suddenly show up. Behavior is exactly the same in Firefox. If I dont edit page in inspector font tags are not shown no matter how many times I refresh.
here is my blade file:
#extends('layouts.app')
#section('content')
<font> test </font>
<p> <-Back</p>
<p> Selected article: {{$article->title}} </p>
<p> Description: {{$article->description}} </p>
<p><img src="/{{$article->image}}" width="600px" alt="ASD"></p>
<font> ojo </font>
{!! $article->body !!}
<p>ge?</p>
#stop
The <font></font> was deprecated in HTML 4.01 at the same time as all elements related to styling only, then obsoleted in HTML5.
This has nothing to do with laravel.
The former behavior of the <font> element can be achieved, and even better controlled using the CSS Fonts CSS properties
See more information on <font> here.
EDIT
I got your question wrong, http://summernote.org/ is generating the <font> tag. You could replace it every time the summernote gets input. Like this:
(May need some adjustments)
//some dynamic elements have to be triggered from the body
$body = $(document.body);
//container where font excists
$container = $('.container')
//less code to type
function observe(element, event, handler) {
$body.on(event, element, handler)
}
//delay 0 to speed up
function delay_func() {
window.setTimeout(font_to_span(), 0);
}
//replace font tags with span and extract the font family
function font_to_span() {
$font = $container.find('font');
font_family = $font.attr('face');
$font.replaceWith(function() {
return $("<span />", {
html: $(this).html(),
style: 'font-family:' + font_family + ';'
});
});
}
//add events to trigger font finder_to_span on
observe($container, 'change', font_to_span);
observe($container, 'cut', delay_func);
observe($container, 'paste', delay_func);
observe($container, 'drop', delay_func);
observe($container, 'keydown', delay_func);
font_to_span();
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat, sapien sed tempor dignissim, mi metus tempor enim, <font face="Comic Sans MS">a vestibulum nulla tortor</font> posuere tellus. Etiam eu dolor ut dui viverra dictum non non justo. Duis
blandit in enim vitae mollis. Integer euismod lectus ut turpis fermentum, eget rutrum urna ornare.</div>
I found what was causing this behavior, I should have realized earlier that if it looks like magic - its javascript.
So in basic Laravel 5.3 blade page we have font tags in the source and we can see it in page source on frontend but they are not visible on page. Reason is because Laravel 5.3 by default includes Vue javascript framework by including app.js that includes Vue, which runs some Vue magic on document load, so font tags are being hidden for some reason - probably related to being deprecated.
I removed Vue from my Laravel app for now (by removing js code that includes it) and font tags are back.
Imagine we have this code in editor:
<div class="menu">
<div>Hello 1</div>
<div>Hello 2</div>
<div>Hello 3</div>
</div>
How to remove all spaces between html tags? So the result should be:
<div class="menu"><div>Hello 1</div><div>Hello 2</div><div>Hello 3</div</div>
Use {strip}
{strip}
<div class="menu">
<div>Hello 1</div>
<div>Hello 2</div>
<div>Hello 3</div>
</div>
{/strip}
If you want to remove spaces even in the same line, its a bit more complicated, you'll have to use capture and do a regular expression replacement (or create your own plugin for that):
{capture name="code"}
{strip}
<div id="1"></div> <div id="2"></div>
{/strip}
{/capture}
{$smarty.capture.code|regex_replace:'/\>[\s\r\t\n]*\</':'><'}
However that can produce unexpected results when a space between tags is supposed to be there. Consider i.e.:
<strong>one hundred</strong> <span class="unit">grams</span>
removing the spaces will render the html as
one hundredgrams
So i solved it via custom block function, I created new PHP file "smarty/plugins/block.minify.php" with this code:
function smarty_block_minify($params, $content, &$smarty, &$repeat) {
if (!$repeat) {
if (isSet($content)) {
// HTML Minifier
$input = $content;
if(trim($input) === "") return $input;
// Remove extra white-space(s) between HTML attribute(s)
$input = preg_replace_callback('#<([^\/\s<>!]+)(?:\s+([^<>]*?)\s*|\s*)(\/?)>#s', function($matches) {
return '<' . $matches[1] . preg_replace('#([^\s=]+)(\=([\'"]?)(.*?)\3)?(\s+|$)#s', ' $1$2', $matches[2]) . $matches[3] . '>';
}, str_replace("\r", "", $input));
// Minify inline CSS declaration(s)
if(strpos($input, ' style=') !== false) {
$input = preg_replace_callback('#<([^<]+?)\s+style=([\'"])(.*?)\2(?=[\/\s>])#s', function($matches) {
return '<' . $matches[1] . ' style=' . $matches[2] . minify_css($matches[3]) . $matches[2];
}, $input);
}
return preg_replace(
array(
// t = text
// o = tag open
// c = tag close
// Keep important white-space(s) after self-closing HTML tag(s)
'#<(img|input)(>| .*?>)#s',
// Remove a line break and two or more white-space(s) between tag(s)
'#(<!--.*?-->)|(>)(?:\n*|\s{2,})(<)|^\s*|\s*$#s',
'#(<!--.*?-->)|(?<!\>)\s+(<\/.*?>)|(<[^\/]*?>)\s+(?!\<)#s', // t+c || o+t
'#(<!--.*?-->)|(<[^\/]*?>)\s+(<[^\/]*?>)|(<\/.*?>)\s+(<\/.*?>)#s', // o+o || c+c
'#(<!--.*?-->)|(<\/.*?>)\s+(\s)(?!\<)|(?<!\>)\s+(\s)(<[^\/]*?\/?>)|(<[^\/]*?\/?>)\s+(\s)(?!\<)#s', // c+t || t+o || o+t -- separated by long white-space(s)
'#(<!--.*?-->)|(<[^\/]*?>)\s+(<\/.*?>)#s', // empty tag
'#<(img|input)(>| .*?>)<\/\1\x1A>#s', // reset previous fix
'#( ) (?![<\s])#', // clean up ...
// Force line-break with `
` or `
`
'#&\#(?:10|xa);#',
// Force white-space with ` ` or ` `
'#&\#(?:32|x20);#',
// Remove HTML comment(s) except IE comment(s)
'#\s*<!--(?!\[if\s).*?-->\s*|(?<!\>)\n+(?=\<[^!])#s'
),
array(
"<$1$2</$1\x1A>",
'$1$2$3',
'$1$2$3',
'$1$2$3$4$5',
'$1$2$3$4$5$6$7',
'$1$2$3',
'<$1$2',
'$1 ',
"\n",
' ',
""
),
$input);
return $input;
}
}
}
And now I am able to call it via {minify}some html code{/minify}.
If you can't access Smarty's installation directory to install the plugin above, you can do the following:
<!-- "strip" removes line breaks -->
{capture name="nospacesbetweentags"}
{strip}
<div class="row">
<div class="col-md-4 col-sm-6">
Lorem ipsum dolor sit amet consectetur
</div>
<div class="col-md-4 col-sm-6">
Lorem ipsum dolor sit amet consectetur
</div>
<div class="col-md-4 col-sm-6">
Lorem ipsum dolor sit amet consectetur
</div>
</div>
{/strip}
{/capture}
<!-- this removes spaces & tabs between tags -->
{$smarty.capture.nospacesbetweentags|replace:"> <":"><"|replace:"> <":"><"}
I don't know if regex replacement is better, but this works fine for me.
EDIT: {strip} doesn't work on included subtemplates ({strip}{include "..."}{/strip}). Therefore, |strip modifier is necessary:
{capture name="nospacesbetweentags"}
<div id="row1" class="row">
<div class="col-md-4 col-sm-6">
Lorem ipsum dolor sit amet consectetur
</div>
<div class="col-md-4 col-sm-6">
Lorem ipsum dolor sit amet consectetur
</div>
<div class="col-md-4 col-sm-6">
Lorem ipsum dolor sit amet consectetur
</div>
</div>
{include "row2.tpl"}
{/capture}
<!-- |strip already modifies multiple tabs into a sigle space -->
{$smarty.capture.nospacesbetweentags|strip|replace:"> <":"><"}
I have an html like so:
<div class="content">
<h1>Title 1</h1>
Lorem ipsum 1
<h2>Title 2</h2>
Lorem ipsum 2
<h3>Title 3</h3>
<b>Lorem ipsum 3</b>
<h1>Title 4</h1>
Lorem ipsum 4
<h2>Title 5</h2>
Lorem ipsum 5
</div>
I want to extract content under each header title and place them into an array like so:
[
"Lorem ipsum 1",
"Lorem ipsum 2",
"<b>Lorem ipsum 3</b>",
"Lorem ipsum 4",
"Lorem ipsum 5"
]
How would I do that using regex and/or ruby? I tried playing around with split method, like html_body.split(">"), but still can't figure out how to do so correctly. What is the correct way to do it using regex and/or ruby?
You shouldn't reinvent the wheel. Using Nokogiri is more robust than trying from scratch.
require "nokogiri"
html = <<_
<div class="content">
<h1>Title 1</h1>
Lorem ipsum 1
<h2>Title 2</h2>
Lorem ipsum 2
<h3>Title 3</h3>
<b>Lorem ipsum 3</b>
<h1>Title 4</h1>
Lorem ipsum 4
<h2>Title 5</h2>
Lorem ipsum 5
</div>
_
Nokogiri::HTML(html)
.css("div")
.children
.reject{|e| e.name =~ /\Ah\d\z/}
.map{|e| e.to_html.strip}.reject(&:empty?)
result:
[
"Lorem ipsum 1",
"Lorem ipsum 2",
"<b>Lorem ipsum 3</b>",
"Lorem ipsum 4",
"Lorem ipsum 5"
]
You can use the regex
/(?<=<\/h\d>\n).*/gm
and trim the match to get the desired output.
DEMO
I'm trying to think of a really nice way to echo the module styling for Joomla. I have:
<div class="module">
<div class="module_inner">
<h1>Some other title, eh?</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="module_bot"></div>
I want to output all modules with this sctructure, when a user creates a new module (HTML). The below, might get messy having multiple OR's. Messy?
<?php if ($this->countModules('module1')): ?>
// echo div structure
// echo module contents
<?php endif; ?>
Any way I can do this more Object Orientated, so I don't have alot of code on my template index.php. Possibly functions?
Just to be clear, My question is: How do I output a div structure, styling a module, with php so the user doesnt have to input the div structure in the Custom HTML module, it does it all for them -> They just type Header + Text + image.
Thanks!
You can add your own module types within your template. Looks for modules.php. You can add a new type and then use it in your main index.php template
I was researching here on SO how to implement a tabbed interface in my Rails app. For example, I like how Ryan Bates uses it in his Railscast overview page.
I want to mimic that in my Rails app so that a User's profile has a navigation in it with two or three links. Clicking either link loads information using AJAX (I'm guessing). Then the URL shows /profiles/1/view?info or /profiles/1/view?otherdata
I came across this question, with the following solution:
I would make the contents of each tab be called in by a separate ajax request. This would give you the following benefits
Now each tab can easily be a different view/controller
You only need to load the contents for a tab when it is used; you won't be processing code/downloading html for tabs that the user doesn't use.
The problem is I'm new to Rails and have no idea how to do this. Can anyone point me to some resources that help explain how to set this up? I'd be tabbing between profile data and messages to the user.
Any help would be much appreciated.
As you're new to Rails I'd suggest breaking up your goal into 2 sections: first, get the tabs working with simple content, then add the AJAX.
Step 1 - Getting the tabs working
Have a look at the JQuery UI tabs demos: http://jqueryui.com/demos/tabs/
The code looks something like this:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque.</p>
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Step 2 - Getting the AJAX working
Check out: http://jqueryui.com/demos/tabs/#ajax
Even it may be hip to use AJAX today, why not do the Simplest Thing That Could Possibly Work? If have done in the past something like the following:
Adding tabs to the UI by code like the following (notation is HAML, sorry for that). As a result, you get a list of links that link to the controllers index action. This code is part of the file layouts/_header.html.haml.
%ul.sideul
- ["page", "notice", "contact"].each do |thing|
- curr = controller.controller_name.singularize == thing
- cl = curr ? 'current' : 'normal'
%li.normal= link_to(thing.humanize, {:controller => controller, :action => "index"}, {:class => cl })
Add then the CSS to your application that this is shown as tabs. There you will need the information if a li is current or normal.
Every time you click then on the tab, the index action of that controller is called, and after that, the index page is shown.
Your file layouts/application.html.haml should have the following content (at least). I have skipped what is not necessary for the example. The template is taken from html5-boilerplate for Rails.
%body{ :class => "#{controller.controller_name}" }
#columns
%header#side
= render "layouts/header"
#main{ :role => 'main' }
%h1= yield(:title)
= render "layouts/flashes"
= yield
= render "layouts/javascripts"
The relevant parts for this solution is:
= render "layouts/header": Renders the list of tabs inside of #columns > header#side
= yield: Renders whatever is in the view for the action of the controller. In our case first the index page, may be later the edit or show page.