I'm learning spring boot with thymeleaf. I've stored user object's profile image in the file system and only the URL of the image is part of the User object persisted in the database.
I've added the name and dpurl into the model, in order to access it from the template.
#GetMapping("/profile")
public String profileController(#AuthenticationPrincipal User activeUser, Model model) {
model.addAttribute("name", activeUser.getName());
model.addAttribute("dpurl", activeUser.getDpURL());
return "profile";
}
I'm able to access name from template using th:text="${name}"
However, I'm not able to specify background image using thymeleaf like this
<div id="dp-container" th:style="'background-image: url(' + #̣{dpurl} + ');'" >
this is resulting in error Could not parse as expression: "'background-image: url(' + #̣{dpurl} + ');'"
Update
Changed it like this
<div id="dp-container" th:style="'background-image:url(' + #{dpurl} + ');'">
Now I'm not getting any error but background image still not being displayed.How to specify background-image using Thymeleaf?
It probably needs to look like this:
<div id="dp-container" th:style="'background-image:url(' + ${dpurl} + ');'">
But it depends on what dpurl contains. Do you really need to use #{...}? Then you should use #{${dpurl}}.
To debug this, you should be looking at the source. it will reveal what your expressions are resolving too.
I got this to work:
<td th:style="'background: url(/images/aws2.png)'" class="fluid hero-image" >
Well, if you've got something more complex like needing to pass a variable into the url, you can try this:
<div id="profile_image" th:style="'background-image: url('+ #{'/view-profile-pic/' + ${result.profile_pic}} +');'"></div>
And in css, the image was displayed correctly with:
#profile_image {
margin: auto;
height: 200px;
width: 200px;
box-sizing: border-box;
border-radius: 100px;
background-size: cover;
}
I stumbled upon this solution when I wanted to display profile pictures received from search results.
You could try this too if none of the others work. Upload the image to some online store like a file sharing service or google drive and provide the link to the image as the url for your background-image property.
<div id="dp-container" style="background-image: url(Link to the image);" >
Related
I want to change the frontend font size from the admin panel in Laravel. Suppose there is a
<h2 class="intro">Introduction to PHP...?? </h2>
in style.css-->>>>
.intro{
font-size:20px;
}
I want this font size dynamic from admin panel by catching the class. If i need 25px i use that or any size I need I will use that.
How can I do that in laravel??? Give me some suggestions to step up...
You can simply use something like this:
Save a file named style.php in the path where the asset files are located. Then use in your base blade file like this:
<link href="{{ asset('path/style.php') . '?fontSize=' . $fontSize }}" rel="stylesheet"/>
The fontSize variable is the font size you want to use.
And use in style.php
<?php
header("Content-Type:text/css");
?>
.intro {
font-size: <?= $_GET['fontSize'] ?>;
}
One way to do this would be via Javascript and your controller:
In your controller, just pass a variable called $fontSize to your view file. The with JavaScript, get the element by the class name and set the CSS font-size property to whatever value your $fontSize variable has like this:
<script>
let h2Item = document.querySelector('.intro');
h2Item.style.fontSize = '{{ $fontSize }}'
</script>
Remember that the variable you are passing from your controller should not just be an integer, rather it should be something like 20px 30px 2em etcetera.
I'm using Webpack/Laravel and injecting vuejs on id #app in my page so to have skeleton loading page I want to have this markup
//client side, will show after ~0.2 seconds
<div id="app" v-cloak>
<hello-world>
</div
//server side, show for ~0.2 s then disappear
<div id="app__loading" v-cloak>
<div class="skeleton">
<span class="skeleton_ribs"></span>
</div>
</div>
I managed to display loading gif in background as pseudo element when v-cloak and everything inside from #app__loading is removed, but if I add normal elements in markup they appear at the bottom of the page after #app loads
[v-cloak] > * { display:none }
[v-cloak] + #app__loading::before {
content: url('https://i.pinimg.com/originals/65/ba/48/65ba488626025cff82f091336fbf94bb.gif');
display: flex;
justify-content: center;
align-items: center;
}
But I would like something like this to work with markup inside #app__loading, but it doesn't work
[v-cloak] > * { display:none }
#app-loader{
display: block;
}
[v-cloak] #app::finish-loading{
[v-cloak] #app-loader{
display: none!important;
}
}
You seem to be expecting the content your initial element to be found in the template of app root element. When using $mount() function, Vue completely replaces the target element with the template of the mounted element.
This replacement is somewhat masked by the fact that, out of the box, the index.html contains a <div id="app"> which gets replaced by the <div id="app">...</div> in your App.vue template.
But they're actually not related (and not the same element). If you changed the id of the one in index.html you'd need to change the target el in main.(js|ts). And obviously, you could change the id of the one in App.vue as well.
Now, to solve your issue, you could simply place v-cloak on the div in your App.vue. From what you've shown so far, that should make it work as expected.
For more complex use cases (i.e: if you wanted to trigger a particular event bound to the initial element) the way to go would be to wrap the initial placeholder in a parent, bind to the parent and, later on, in Vue, target the parent with this.$el.closest('.some-class') or with this.$el.parentElement() to access the binding.
If you still can't get the expected result, please create a mcve (you could use codesanbox.io) and describe in detail what is the expected behavior.
To make your headache smaller till you find proper vue solution, you can grab loader by id and when Vue instance mounts - give display none
export default {
mounted() {
document.querySelector('#app__loading').style.display = 'none';
},
}
I'm building a quiz app in Laravel. I have two tables of data that I want to retrieve from my MySQL database. These tables are called questions and answers. I also have two query builders for each of these tables. A questions query builder and an answers query builder.
I created the questions query builder before the answers query builder and managed to retrieve and display my data just fine with the help of Blade. The questions appeared fine with my styling. Soon after, I created my answers query builder to retrieve my answers table from the database. This worked, as my answers visibly appeared, except, everything else including my questions and background styling disappeared. What's left is a page with an answer and the default white background. This happens when I point the route resource methods in web.php to my localhost:8000/questions page. This is where I want everything to show.
Naturally, both of these query builder methods are in their own controller files. QuestionsController.php and AnswersController.php . I tried using just one controller file with one query builder to retrieve both the questions and answers from my database using ->join. I found this to be confusing though, especially when combined with my pagination methods. I've also learned it's better practice to compartmentalize your controller files when you have multiple data sets. My guess is that there is something wrong with my Blade code as it's the styling that's being messed with.
QuestionsController.php
public function index()
{
$questions = DB::table('questions')->simplePaginate(1);
return view('questions.questions', ['questions' => $questions]);
}
AnswersController.php
public function index()
{
$answers = DB::table('answers')->simplePaginate(1);
return view('answers.answers', ['answers' => $answers]);
}
questions.blade.php
#extends('home')
#if(count($questions))
#foreach($questions as $question)
<div class="row justify-content-center" style="margin-top: 200px; margin-left: 550px; position: absolute; z-index: 99;">
<p>{{$question->question}}</p>
</div>
#endforeach
#else
<p>How embarrassing. We couldn't even provide you a question. Worst quiz ever.</p>
#endif
// this is where my form goes
{{ $questions->links() }}
answers.blade.php
#if(count($answers))
#foreach($answers as $answer)
<div class="row justify-content-center" style="margin-top: 200px; margin-left: 550px; position: absolute; z-index: 99;">
<p>{{$answer->answer}}</p>
</div>
#endforeach
#else
<p>How embarrassing. We couldn't even provide you any answers. Worst quiz ever.</p>
#endif
web.php
Route::resource('questions', 'QuestionsController');
Route::resource('questions', 'AnswersController');
The objective is to have both my questions and answers displayed on the same page. With the styling intact.
P.S. I'm aware that I'm returning two different views, one in QuestionsController.php and the other in AnswersController.php. I understand that this is probably the route of the problem. I just don't know an alternative.
In your web.php, does your answers controller resource need to be:
Route::resource('answers', 'AnswersController');
rather than:
Route::resource('questions', 'AnswersController');
I am having a strange problem whereby my template path hints will not deactivate on a single only.
Previously to this I was having a strange error where the contact form on the page would submit, but would display it's success message on the product page.
This issue seemed to be resolved after clearing the cache (we use APC cache, which was also cleared). The thing was I submitted the contact form while the template hint where still on, and since then have been unable to turn them off for that page only.
I have tried the usual procedures of going up and down stairs with the cache, and also deleting the contents of the cache folder from the terminal.
Has anyone any suggestions where I would even begin to debug this?
Thanks
I'd start by dropping into the base template class
#File: app/code/core/Mage/Core/Block/Template.php
and figuring out why the getShowTemplateHints method is returning true on that page
#File: app/code/core/Mage/Core/Block/Template.php
public function getShowTemplateHints()
{
if (is_null(self::$_showTemplateHints)) {
self::$_showTemplateHints = Mage::getStoreConfig(self::XML_PATH_DEBUG_TEMPLATE_HINTS)
&& Mage::helper('core')->isDevAllowed();
self::$_showTemplateHintsBlocks = Mage::getStoreConfig(self::XML_PATH_DEBUG_TEMPLATE_HINTS_BLOCKS)
&& Mage::helper('core')->isDevAllowed();
}
return self::$_showTemplateHints;
}
Or, of it's returning false, why does the base template class still reach the rendering point.
#File: app/code/core/Mage/Core/Block/Template.php
if ($this->getShowTemplateHints()) {
echo <<<HTML
<div style="position:relative; border:1px dotted red; margin:6px 2px; padding:18px 2px 2px 2px; zoom:1;">
<div style="position:absolute; left:0; top:0; padding:2px 5px; background:red; color:white; font:normal 11px Arial;
text-align:left !important; z-index:998;" onmouseover="this.style.zIndex='999'"
onmouseout="this.style.zIndex='998'" title="{$fileName}">{$fileName}</div>
HTML;
if (self::$_showTemplateHintsBlocks) {
$thisClass = get_class($this);
echo <<<HTML
<div style="position:absolute; right:0; top:0; padding:2px 5px; background:red; color:blue; font:normal 11px Arial;
text-align:left !important; z-index:998;" onmouseover="this.style.zIndex='999'" onmouseout="this.style.zIndex='998'"
title="{$thisClass}">{$thisClass}</div>
HTML;
}
}
Refreshing the cache solved this problem for me.
After checking each store view for template hints and clearing server and local cache I cleared the cache again and then restarted apache.
I am working on asp.net mvc3 application.
In my application, User can post their comment and at that time i want to display their post in same page using ajax and jquery. This application is like facebook - we can share post, user can comment to post and all.
I have created two actions
- setcomment
-getcomment
how can i do,
- at page load i want to display textarea and post button to post commnent and
- below that all post of the user will be displayed on that
- and user can post subcomments also.
I have my code working but in that i am using actionlink to go to another page and use refresh button to load page again.
i have
setcomment -
#model <NAMESPACE>.<MODELNAME>
<some code>
getcomment -
#model IEnumerable<<NAMESPACE>.<MODELNAME>>
<some code>
i am not able to call
<div id="showusercomments" style="float: left; width: 75%">
#Html.Partial("_GetUserComment")
</div>
what can i do to solve this problem?
Try using #Html.Action() instead of Html.Partial .
Also see:
my answer here
this SO answer
You've got two options:
<div id="showusercomments" style="float: left; width: 75%">
#Html.Action("_GetUserComment")
</div>
or, get the IEnumerable<...> in the parent page's controller and pass it to the partial:
<div id="showusercomments" style="float: left; width: 75%">
#Html.Partial("_GetUserComment", Model.Comments)
</div>