DATA attribute for image created from src image - src

I want to add to the photo the attributes "data-full" and "data-thumb" containing the image address. So for example:
<img data-full="images/photo.jpg" data-thumb="images/photo.jpg" src="images/photo.jpg">
Unfortunately, my attempts end in a failure.
Please help me.

If you use jquery then you can do it like this:
This is your html
<img id="myPhoto" src="images/photo.jpg">
Then in your jquery
$(#myPhoto).attr('data-full', 'images/photo.jpg');
$(#myPhoto).attr('data-thumb', 'images/photo.jpg');

I apologize for the delay with the response. I thought I was going to be notified that someone wrote something in the subject.
I want to implement https://github.com/HemantNegi/jquery.sumogallery to my website.
"My attempt end in a failure." That means I can not write well.
No. My html is:
...
<li><img src="images/o6/photo.jpg"></li>
<li><img src="images/o7/photo2.png"></li>
<li><img src="images/23/image1245.jpg"></li>
...
Image addresses are different because they are from different directories.
I would like to receive the result:
...
<li><img data-full="images/o6/photo.jpg" data-thumb="images/o6/photo.jpg" src="images/o6/photo.jpg"></li>
<li><img data-full="images/o7/photo2.png" data-thumb="images/o7/photo2.png" src="images/o7/photo2.png"></li>
<li><img data-full="images/23/image1245.jpg" data-thumb="images/23/image1245.jpg" src="images/23/image1245.jpg"></li>
...

Related

Symfony 4 Twig Set background image without attachement

I'm trying to set a background image in my template email, but without attachement.
I've tried to upload the image in the server, it works fine but to view the email it needs to click for downloading it.
I've tried this :
<div style="background-image: url({{asset('logo.jpg')}})">
and this :
<div style="background-image: url('{{ email.image('#img/logo.jpg') }}')">
Thanks.
I think the problem is that you need an absolute URL (starting with http://your.domain.com/etc) for the image to work inside the email:
<div style="background-image: url({{ absolute_url(asset('logo.jpg')) }})">

Drupal 8 - Broken default image link in view

I'm new to Drupal and I've been given a project to fix a couple of bugs on...
I've got a view with several fields, it displays OK when there is a picture but when there is no picture (and thus the need to display a default picture), then a broken image link appears...For some reason the path points to a different directory...
This works:
<div class="item-header"> <div class="views-field views-field-field-selection-photos"> ... <div class="content">
<div class="field field--name-field-photo field--type-image field--label-hidden field--item"> <img src="/sites/default/files/somepicture.jpeg?itok=sJ6SOjXo" width="445" height="334"/>
This does not, due to the path pointing to ../sites instead of /sites:
<div class="item-header">
<div class="views-field views-field-field-selection-photos"><div class="field-content"><img src="../sites/default/files/structures/photos/defaultpic.jpg" width="100%" />
I've been looking at theming fields but that seems overkill, I wonder if there's a nice and clean way to sort this out rather than override a template or anything else that would seem a bit too much...
Thanks

How reference an image file location in Flask? (beginner)

A Flask route passes a variable called imgloc to the Jinja template of the full path to an image file on the server. How do I refer to this in an image tag in HTML? The code:
<img src="{{url_for(filename=imgloc)}}">
does not work. Printing out the variable imgloc works fine , so it is being correctly passed to the template. In essence:
<img src="{{WHAT_GOES_IN_HERE}}">
It should be:
<img src="{{ url_for('static', filename='img/cat.png') }}">
It will be pointed to the /path/to/project/static/img/cat.png
A simple google search would have solved the issue, they have everything in docs.
Docs: https://flask.palletsprojects.com/en/1.1.x/tutorial/static/

django, secondary data in subfolders

I am working on an informational site. I am attempting to access files in a subdirectory using data from the django db.
Ex: if the record.id = 1 and the file is desc.txt, I want to grab /1/desc.txt
I currently have two items that I'm trying to access this way. The image file will work if I hard code the location, but I haven't been able to get it to work from the record data. The other one, I'm trying to load a description file into a div using jQuery and .html(), and can't get it to work at all.
The relevant section of code:
{% if aRecord %}
{% load static from staticfiles %}
<h1>{{ aRecord.Name }}</h1>
<br/>
Born: {{aRecord.Birth}}<br/>
Died: {{aRecord.Death}}<br/>
<div id="descArea"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
<script>
descfile = 'Authors/1/desc.txt';
$('#descArea').text(descfile);
$.get("{% static 'Authors/1/desc.txt' %}", function(data) {
$('#descArea').html(data);
});
</script>
<br/>
{% else %}
Requested author not found.
{% endif %}
This is the hard-coded version that works, but I need it to work from the aRecord data. The 1 in both cases should come from the record id, and the image filename in the img tag should as well.
It sounds like this is really a question about how to produce a file path from dynamic data. Is that the case? If so, you will probably need to use string substitution.
In order to produce a string like '/1/desc.txt' where the 1 is given by a record id, you could do something like this:
path = '/{}/desc.txt'.format(record.id).

How to define a html subtemplate inside a PlayFramework view?

From a master html template I'm calling #{doLayout} which renders my view html. I'd like to call a custom html template as well such as #{happyHeader} which I'd like to define inside my view html file. Something like this:
<html>
<body>
#{happyHeader}
<hr/>
#{doLayout}
</body>
</html>
And in my index.html have something like this:
<p>My happy doLayout main content here</p>
#{define happyHeader}
<h1>Nice header</h1>
#{/}
I've looked around StackOverflow and couldn't find a similar question, and neither do the custom template solutions in the Play Framework docs seem to cover this.
You do this with #{set} and #{get}.
You set the value in your index.html like this:
#{set 'happyHeader'}
<h1>Nice header</h1>
#{/set}
And you get it in your main.html like this:
#{get 'happyHeader' /}