Problem With Thymeleaf Background Image Url - html

I'm working on a Spring Boot project and I am using Thymeleaf. In one of my view page let's call it dashboard.html, I need to change background image.
I can change images source with Thymeleaf.
Example 1
<img th:src="'/uploads/' + ${dashboard.dashboard_photo}" alt="" class="img-fluid" />
Works fine..
But, I cannot change background image with Thymeleaf...
<div class="banner_w3lspvt" th:style="'background: url('/uploads/' + ${dashboard.dashboard_photo});'">
I tried everything I found. Yes I know the same question was asked before but none of these answers helped me at all.

Welcome to SO. When you ask a question, please try to provide as much information as possible about the issue, like the stack trace, the log, or the unexpected behaviour.
Meanwhile, try the following:
th:style="'background: url(/uploads/' + ${dashboard.dashboard_photo} + ');'"

I think Literal substitutions work well for expressions like that. For example:
<div class="banner_w3lspvt" th:style="|background: url(/uploads/${dashboard.dashboard_photo});|">

Related

adding imageurl to image element dynamically wont work

so iam trying to add a image i have saved on my project in image folder. But it dosent work
DirectCast(Customer.Items(0).FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
DirectCast(Customer.Items(0).FindControl("imageControl"), Image).DataBind()
customer is the repeater html element the image element is in. I cant call the image element direct in the server code because the image element is inside a repeater element. So i have to use findcontrol method which works good. When i debugg the code i can se that it finds the right image element the problem is when i set the imageurl nothing seems to happen in the ui but i dont understand why can anybody help me please :)
<div>
<asp:Image ID="imageControl" Width="100%" Height="70%" runat="server"/>
</div>
To me it looks like you are not trying access controls within repeater in correct manner , it should be like :
If image is in header :
DirectCast(Customer.Controls[0].Controls[0].FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
If image is in footer
DirectCast(Customer.Controls[Customer.Controls.Count - 1].Controls[0].FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
Please have a look at this post for more details.
PS : Are you using vb ? cause i have used C# syntax, if yes change accordingly.

How to make this code work in a Wordpress

Here is the code:
a:4:{i:2;a:3:{s:5:"title";s:78:"[:lt]naujas numeris[:en]
latest publication";s:4:"text";s:212:"<a
href="http://www.example.com/p/post-post/" target="_blank"><img
src="http://www.example.com/wp-content/uploads/2015/03/200x300.jpg"
height="254" width="165"></a>";s:6:"filter";b:0;}i:3;a:3:{s:5:"title";
s:78:"[:lt]Naujausias numeris[:en]latest
publication";s:4:"text";s:212:"<a href="http://www.example/post/"
target="_blank"><img src="http://www.example.jpg" height="254" width="165"></a>";s:6:"filter";
b:0;}i:4;a:3:{s:5:"title";s:68:"[:lt]ATSARGIAI:
[:en]CAREFUL:";s:4:"text";s:809:"<div id="widgettext">
/div>
<table>
TABLE
</table>
<div id="tarpelis"></div>
<div id="rudalinija"></div>
<div id="tarpelis"></div>
<div id="tarpelis"></div>";s:6:"filter";b:0;}s:12:"_multiwidget";i:1;}
This piece of code is a record in a website wp_options DB table (optopn_name: widget_text). I had to change one element of the code (TABLE), but right after that some problems occured (like previous table dissapeared). I fixed back the code, but looks like whenever i change name of the person in this table it dissapears on the website.
<tr>
<td><!--:lt-->Name Surname<!--:--><!--:ru-->Name Surname<!--:--></td>
</tr>
Do you have an idea why could this happen?
Also that code a:4:{i:2... is a bit troubling me, can you explain me what that does? It may be the case.
This is a compressed, minimized version of the original javascript or markup or other code that had the names of functions and variables changed to make things as small as possible. You can spend time looking through it to find it all but it can take a while.
Somehow missed that, but solution was quite easy. Turns out the only way to change it was to go to appearance(widgets) where i found this table. Eventhrough it is still strange that changing data in the database (where is stored that post with table) resulting to invalid post. Still thank you for your suggestions :)

Thymeleaf loops and iterating

this is my template : http://pastebin.com/Gmdmqwxa
Whenever I add comment it is adding always to the first question on the list, even if I click on the others question 'Add Comment' button.However, the remove button works just fine for all the questions.
I think i know what it is working like that, so i thought i could use iterStat or something like that to iterate through questions, and then set th:action with iterStat, but its not working
<div th:each="question, iterStat : ${person.questions}" >
th:action="#{'/newComment/' + ${iterStat.current}}"
Maybe anyone has different idea how to fix this issue ?

ng-src not showing up for my img array

I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"

Embedding Gist into Blogger not working

I have the following gist...
https://gist.github.com/4445255
I try adding it to my Blogger entry (per here) into my post by adding this to the very end...
<script src="https://raw.github.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
finally in position I add
<div class="gistLoad" data-id="4445255" id="gist-GistID">Loading ....</div>
But it just shows loading...
The script you just referenced (gistLoader.js) contains a call to the function initGist(), which I do not see anywhere.
It is also looking for a DOM element by the id "gistPrinter", when the element you have created has an id of "gist-GistID".
I'm not familiar with gist, maybe someone else can correct me.
EDIT: I found initGist() here: https://raw.github.com/moski/gist-Blogger/master/public/gistBlogger.js
I hadn't yet converted my project over to a Dynamic View. So I went to Template>Dynamic View.
There is a little issue, saving formatting only seems to work in IE for dynamic views...
http://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY%5B1-25-false%5D
You forgot to setup on of the attributes. It should look like this.
<div class="gistLoad" data-id="4445255" id="gist-4445255">Loading ....</div>
I had recently found this issue wherein the gist was not loading after putting the embed url eg
<script src="https://gist.github.com/dishabhatt123/43e98122304000687293b4c3ef3dc474.js"></script>
directly into the HTML view of my blog. Here is what has finally helped me after grilling down.
Basically browsers does not support random included scripts hence using rawgist. Place the below script on the top of bottom of the page.
<script src="https://rawgit.com/moski/gist-Blogger/master/public/gistLoader.js" type="text/javascript"></script>
Then, add the div as under:
<div class="gistLoad" data-id="43e98122304000687293b4c3ef3dc474" id="gist-43e98122304000687293b4c3ef3dc474">Loading or something, this is just text to display while the browser pulls the gist....</div>
Here, in the above div, data-id ="whereveryourgistidis" and id="gist - whereveryourgistidis"
In the above example of embed url, my gist Id is '43e98122304000687293b4c3ef3dc474'. You can replace it with your gist id from the embed url.
Please Note: you will not see the gist in 'Compose view'. But when you preview your blog, you can see it!!