I have 300 img to put in my html code but I don't know how to do it quickly.
This is my code :
<img class="img-responsive" src="images/image01.jpg" />
<img class="img-responsive" src="images/image02.jpg" />
<img class="img-responsive" src="images/image03.jpg" />
I would like to copy paste it 300 times but I don't want to write 01, 02, 03, 04,... manually.
Do you know a way to do it ?
Thank you :)
<body onload="myFunction()">
<div id="images">
<div>
</body>
<script>
function myFunction() {
for(let id=1; id<=300; id++){
document.querySelector('#images').innerHTML += `<img class="img-responsive" src="images/image${String(id).padStart(2, '0')}.jpg" />`
}
}
</script>
you can use javascript to do this activity
using for a for-loop
<?php
foreach(range(1,300) as $num){
echo "<img class='img-responsive' src='images/image"+str_pad($num, 2, '0', STR_PAD_LEFT);+".jpg'/>";
}
?>
Related
I'm learning to handle typo3. I understand that what I'm using here is Fluid to call the variable from my backend
I have this template
<f:layout name="Default" />
<f:section name="Main">
<div class="container">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '21'}" />
</div>
</f:section>
And this is the template? I'm printing my content element with.
<html data-namespace-typo3-fluid="true"
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<div class="row">
<div class="col-7 ">
<div class="screen">
<div class="screenshot">
<f:for each="{screenshots}" as="screenshot">
<f:image style="opacity: 1;" image="{screenshot}" />
</f:for>
</div>
<a href="#" target="_blank">
<img src="typo3conf/ext/hebotek_website/Resources/Public/Images/screen.png" width="100%">
</a>
</div>
</div>
<div class="col-5">
<f:for each="{logos}" as="logo">
<f:image style="opacity: 1;" image="{logo}" />
</f:for>
<div class="project_desc">
<h3>
{data.header}
</h3>
<f:format.html>{data.bodytext}</f:format.html>
</div>
</div>
</div>
</html>
This will print two columns, the first one with a picture and the second one with a header and a text.
I want to print one time the image at the left and the next time the image at the right and the next at the left again. How do I alternate the html here? Is this possible with fluid or I must take a different approach?
Something like:
if(index % 2 == 0)
{
print left
}
else
{
print right
}
In any of this two templates I have an array in order to do this.
Thanks!
Unfortunately, there is no real alternate functionality in fluid.
You could use your approach with a condition:
<f:if condition="{index % 2 == 0}">
<f:then>
print left
</f:then>
<f:else>
print right
</f:else>
</f:if>
Fluid also provides a way to render partials in separate files, to reduce the amount of markup in your template:
<f:render partial="path/to/your/partial/left">
But a better approach will probably be to use css to alternate your layout.
For example with flexbox:
.row:nth-child(even) .col-6.image {
order: 1;
}
.row:nth-child(even) .col-6.text {
order: 2;
}
.row:nth-child(odd) .col-6.image {
order: 2;
}
.row:nth-child(odd) .col-6.text {
order: 1;
}
This way, you can also use a media query, to keep your top-bottom order for smaller screens, so your images or your text are not next to each other.
I'm having the Error in execution of function repeat$1 while compiling a very simple VueJS template. This error prevents the app from compiling.
Can't wrap my head against what's wrong whit the template.
Here's the code:
(I replaced parts of the template that consisted solely on text with the word "text".)
<template>
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto" v-if="showPrivacyDisclaimer">
<div class="card mt-4">
<div class="card-body">
<div class="card-title">
text
</div>
<p>
<b>text</b>
</p>
<p>
text.
</p>
<p>
text
</p>
<div class="text-sm">
<a #click="details = true" style="text-decoration: underline">
Leer más: ¿Qué datos recopilamos?
</a>
<p v-if="details">
text
</p>
<br>
<a #click="rights = true" style="text-decoration: underline">
Leer más: ¿Cómo ejercer tus derechos sobre estos datos?
</a>
<p v-if="rights">
text
</p>
</div>
</div>
<div class="card-footer">
<button type="button"
class="btn btn-primary"
#click="continue()">
Aceptar y continuar
</button>
</div>
</div>
<img :src="baseUrl + '/public/img/eks-logo.svg'"
class="mt-4" style="max-width: 10rem">
<p class="text-muted mt-4 text-sm">
text
<br>
more text
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
baseUrl: process.env.VUE_APP_PHP_BASE_URL,
showPrivacyDisclaimer: false,
details: false,
rights: false,
}
},
mounted()
{
let hasPrivacyAccepted = window.localStorage.getItem('pda');
if (!hasPrivacyAccepted) {
this.showPrivacyDisclaimer = true;
} else {
this.continue();
}
},
methods: {
continue()
{
window.localStorage.setItem('pda', 1);
this.$router.replace({
path: '/encuesta/' + this.$route.query.e,
query: this.$route.query
})
}
}
}
</script>
If I completely remove everything between the <template> tags (except the first div that is required), the app starts compiling again.
I have tried progressively deleting parts of the template that use Vue directives (v-if, etc.). But this didn't made the app compile :(
Please help!
Update: I forgot to mention I've already tried deleting and re-installing node_modules
Update 2: I found the source of the bug. continue is a reserved JS word.
You can't use #click="continue()"
This is a reserved word for javascript.
You can see the full list here :
https://www.w3schools.com/js/js_reserved.asp
Update: I started refactoring the template in two views and a more descriptive error message pop'd-up.
The error was that I was using a JavaScript reserved word as a method name (continue is a reserved word).
I'm trying to get the following Bootstrap 3 plugin to work:
http://eonasdan.github.io/bootstrap-datetimepicker/Options/
One of the requirement is Moment.js:
http://momentjs.com/docs/#/customization/
My HTML is:
<div class="container">
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
The JS:
<script type="text/javascript" src="/clip-art/static/datepicker/moment.js"></script>
<script type="text/javascript" src="/clip-art/static/datepicker/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap.min.css" />
<link rel="stylesheet" href="/clip-art/static/datepicker/css/bootstrap-datetimepicker.min.css" />
$(function () {
$('#datetimepicker6').datetimepicker( {
maxDate: moment(),
allowInputToggle: true,
enabledHours : false,
//format: moment().format('YYYY-MM-DD'),
format: moment().format('LLLL'),
locale: "en"
});
$('#datetimepicker7').datetimepicker({
useCurrent: false, //Important! See issue #1075
allowInputToggle: true,
enabledHours : false
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
I'm a bit confused, as I can't seem to get the format to work. If I use this to set the format:
format: moment().format('LLLL'),
I get a REALLY weird date! (not even sure what language that is??)
If I change it to:
format: moment().format('YYYY-MM-DD'),
The date DOES show correctly, but then the dropdown stops working for me!
Can anyone suggest where I'm going wrong? I've done loads of playing around, googling etc, but I still can't figure it out :(
BTW: The dropdown itself works when I don't try and edit the format of the date:
Ok, well I'm not sure why it didn't like taking a moment().format() value, but after checking the GitHub issues, I came across an issue with the format. It led me to this example:
https://jsfiddle.net/dugujianxiao/ad64awL7/11/
So after tweaking my code to use format: 'YYYY-MM-DD' instead, and this seems to have sorted it:
$('#datetimepicker6').datetimepicker( {
maxDate: moment(),
allowInputToggle: true,
enabledHours : false,
locale: moment().local('en'),
format: 'YYYY-MM-DD'
});
The date is correct, as well as the format.
Hopefully this helps someone else!
I'm trying to use Tooltipster to show an image of hovered thumbnails that are in a loop. I've tried multiple ways to find the closest tooltip_templates class and show it, but am not having any success. Is there another way?
<li class="finish-swatch">
<img class="tooltip" data-tooltip-content=".tooltip_content" src="/img01.jpg" />
<div class="tooltip_templates">
<span class="tooltip_content">
<img class="tooltip-swatch" src="/img01.jpg" />
</span>
</div>
</li>
<li class="finish-swatch">
<img class="tooltip" data-tooltip-content=".tooltip_content" src="/img02.jpg" />
<div class="tooltip_templates">
<span class="tooltip_content">
<img class="tooltip-swatch" src="/img02.jpg" />
</span>
</div>
</li>
According to the docs (5. Use HTML inside your tooltips)
This should work:
<li class="finish-swatch tooltip" data-tooltip-content="#tooltip_content_1"></li>
<li class="finish-swatch tooltip" data-tooltip-content="#tooltip_content_2"></li>
<div class="tooltip_templates">
<li id="tooltip_content_1">
<img class="tooltip-swatch" src="/img01.jpg" />
</li>
<li id="tooltip_content_2">
<img class="tooltip-swatch" src="/img02.jpg" />
</li>
</div>
Note: it is not recommended to use the class 'tooltip' as it may conflict with Bootstrap or other styles but I left it as you had it.
Also, make sure your CSS includes:
.tooltip_templates { display: none; }
Finally, your jQuery should include:
$(document).ready(function() {
$('.tooltip').tooltipster();
});
That should do it. Let me know if you have any questions!
Thanks Jay. I also got this to work a couple of days ago. This is how I did it.
<div class="tooltip">
<span class="tooltip_content">
<img src="<?php echo $finish_image['value']; ?>" />
<p><?php echo $finish_name['value']; ?></p>
</span>
<img src="<?php echo $finish_image['value']; ?>" alt="<?php echo $image['alt'] ?>" />
</div>
jQuery('.tooltip').tooltipster({
trigger: 'custom',
triggerOpen: {
mouseenter: true,
touchstart: true
},
triggerClose: {
mouseleave: true,
tap: true
},
side: ['top'],
maxWidth: 200,
theme: ['tooltipster-shadow', 'tooltipster-shadow-customized'],
functionInit: function(instance, helper){
var content = jQuery(helper.origin).find('.tooltip_content').detach();
instance.content(content);
}
});
I'm trying to implement a Google Custom Search Engine into my website. So far, I've been able of changing my snippets layout, and show the variables Google shows in its examples:
http://googleajaxsearchapi.blogspot.com.es/2010/04/rendering-custom-data-in-custom-search.html
Well, in the examples, everything looks great, BECAUSE THEY KNOW THE VALUES THEY MAY PRINT. I mean, if you see this snippet:
<div id="mysite_thumbnail">
<div data-if="Vars.thumbnail" class="gs-image-box gs-web-image-box">
<a class="gs-image" data-attr="{href:url, target:target}">
<img class="gs-image" data-attr="{src:thumbnail.src, width:48, height: 48}"/>
</a>
</div>
</div>
it's pretty clear that "Vars" is holding some data GSE is printing. My problem is that I don't know what "Vars" holds, and when developing my view I can't know if the value is there, and what is its name.
So, the question is: How can I print "Vars"? I suppose is a js variable you may obtain from the jsapi, but juss guessing, console.log() was not working for me, :(
Well, I finally found out how to post the data:
From Google Search Engine Api documentation:
https://developers.google.com/custom-search/docs/js/rendering?hl=es&csw=1#richsnip
You only have to add the following code in your snippet:
<span data-body="JSON.stringify(Vars)"></span>
So, you'll have something like:
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
// Load the Search API
google.load('search', '1');
// Set a callback to load the Custom Search Control when you page loads
google.setOnLoadCallback(
function(){
new google.search.CustomSearchControl('XXXXXXXXXXXXXXX').draw('cse');
google.search.Csedr.addOverride("mysite_");
},
true);
console.log(google);
</script>
<div style="display:none">
<div id="mysite_thumbnail">
//This will show all Vars content
<span data-body="JSON.stringify(Vars)"></span>
<div data-if="Vars.thumbnail" class="gs-image-box gs-web-image-box">
<a class="gs-image" data-attr="{href:url, target:target}">
<img class="gs-image" data-attr="{src:thumbnail.src, width:48, height: 48}"/>
</a>
</div>
<div data-ifel="Vars.thumbnail == 0" class="gs-image-box gs-web-image-box">
<a class="gs-image" data-attr="{href:url, target:target}">
<img class="gs-image" data-attr="{src:'XXXXX.png', width:115, height: 90}"/>
</a>
</div>
</div>
<div id="mysite_webResult">
<div class="gs-webResult gs-result"
data-vars="{longUrl:function() {
var i = unescapedUrl.indexOf(visibleUrl);
return i < 1 ? visibleUrl : unescapedUrl.substring(i);}}">
<table>
<tr>
<td valign="top">
<div data-if="Vars.richSnippet" data-attr="0"
data-body="render('thumbnail',richSnippet,{url:unescapedUrl,target:target})"></div>
</td>
<td valign="top">
<div class="gs-title">
<a class="gs-title" data-attr="{href:unescapedUrl,target:target}"
data-body="html(title)"></a>
</div>
<div class="gs-snippet" data-body="html(content)"></div>
</td>
</tr>
</table>
</div>
</div>
</div>