HTML is a markup language For web pages. In fact, HTML stands for HyperText Markup Language.
One thing that needs to be made clear right away and kept in mind is that theHTML is not a programming language: HTML is only for format text and to layout elements such as forms, quotes, videos.
In this brief guide we will not dwell too much on technical or philosophical discussions of what is a hypertext, but we will take as our definition that of a web page, a navigable page on the Internet.
Tools
All you need to develop your first html page is a simple text editor, for Windows users the simple Notepad.
Our first HTML page
We open notepad and enter the following code:
<html></html>
We click save and choose a name "page.html" and from the drop-down menu "save as" let us remember to select "all files“.
At this point we have created our first html page, which when opened will show a blank page.
Each html page basically consists of two elements, a head <head> and a body <body>.
We modify our page in this way:
<html>
<head></head>
<body></body>
</html>
The DOCTYPE
At this point it is important to introduce the concept of DOCTYPE. The doctype is a declaration that is inserted at the beginning of the document that allows browsers to render the page correctly. In the case of HTML5 the doctype declaration is as follows:
<!doctype html>
<html>
<head></head>
<body></body>
</html>
In the past, longer and more articulate doctype statements were used, but now theHTML5 is a standard, so we will limit ourselves only to this one.
Adding a title to the HTML page: the title tag
If we try to open the previously created html page, we will see that the window bar will show the file path. If we want to add a more explanatory title, we can add the tag </strong> in the<strong><head></strong> Of the document.</p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup line-numbers"><!doctype html>
<html>
<head>
<title>My first web page</title>
</head>
<body></body>
</html></code></pre>
<p>In addition to making the page more user-friendly, the presence of the title is also important on the side <strong>SEO</strong>.</p>
<h2 class="wp-block-heading" id="i-tag">Tags</h2>
<p>One of the first things we can notice is that HTML is a language composed of tags. Each HTML tag is always enclosed between a minor sign ( ). A generic tag is characterized by the following syntax: </p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup line-numbers"><nomedeltag></code></pre>
<p>Tags can provide an opening <strong><nometag></strong> and a closing <strong></nometag></strong>, </p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup"><h1>Article Title</h1></code></pre>
<p>or be tags that contain no elements so they are self-closing. An example of the latter type of tag is. <strong><img /></strong>.</p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup line-numbers"><img src="mondo.jpg" /></code></pre>
<p>In this brief guide we will not analyze all html tags, but only the most frequently used ones. For an exhaustive list of all tags you can look at <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank" rel="noopener">here</a>.</p>
<p>Let's see what the main tags are and how to use them.</p>
<h2 class="wp-block-heading" id="il-tag-h1-e-gli-altri-headings">The tag <h1> and the other headings</h2>
<p>The tag <strong><h1></strong> is used to define a heading (title, header), which is text that has greater importance within the content of our html page, so it will be formatted with a larger font. </p>
<p>There are various header tags based on importance: therefore, you can have <strong><h1></strong>, <strong><h2></strong> , <<strong>h3></strong> , <strong><h4></strong> , <strong><h5></strong> , <strong><h6></strong>. </p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup"><h1>Page title</h1></code></pre>
<h2 class="wp-block-heading" id="il-tag-p">The tag <p></h2>
<p>The <<strong>p></strong> is used to define a paragraph. By inserting text within this tag, it will be formatted as free text. </p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup"><p>On this page we will discuss HTML.</p></code></pre>
<h2 class="wp-block-heading" id="il-tag-b">The tag <b></h2>
<p>The tag <strong><b></strong> Is used to highlight text:</p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup"><b>very important text</b></code></pre>
<p>Its operation is identical to that of the tag <strong>, bold a portion of text.</p>
<h2 class="wp-block-heading" id="il-tag-a">The tag <a> </h2>
<p>The tag <a> is used to define a link (links between web pages) allows us to create a link from our page to another page. The syntax of a link is as follows: </p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup"><a href="https://www.google.it">Link to Google</a></code></pre>
<p>We can see that the tag <a> needs the href attribute indicating the destination page. </p>
<h2 class="wp-block-heading" id="il-tag-img">The tag <img></h2>
<p>The tag <strong><img></strong> is used to insert an image within the HTML page. Unlike the previous tags, the <img> is a self-closing tag, that is, it does not need a closing tag.</p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup"><img src="immagini/terra.jpg" /></code></pre>
<p>As we see in the example, the tag <img> needs the src attribute, which indicates the path to the image to be displayed. The tag <img> Can also have other attributes:</p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup"><img src="immagini/terra.jpg" alt="image of the Earth" /></code></pre>
<p>In this example, the alt attribute is used to display alternative text in case the image does not load. It is also useful for indicating to search engines what is displayed on the page, which is very important from an SEO perspective.</p>
<h2 class="wp-block-heading" id="i-tag-lista-ul-ol-li">The list tags <ul>, <ol>, <li>.</h2>
<p>If we want to show a list in our html page we can use the <ul> tag. This tag shows an unordered list, so a dot will appear at the side of each list item. In case we want to show a numbered list we can use the <ol> tag. </p>
<p>Each list item must be enclosed within the <li> tag.</p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup"><ul>
<li>Primo punto</li>
<li>Secondo punto</li>
<li>Terzo punto</li>
</ul></code></pre>
<h2 class="wp-block-heading" id="mini-tutorial-come-creare-la-tua-prima-pagina-web">Mini tutorial: how to create your first web page</h2>
<p>After taking a quick look at the main html tags, we can try to create our first web page.</p>
<p>We open Notepad or any other text edtor and start typing this code inside:</p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup"><!doctype html>
<html>
<head>
<title>My first web page</title>
</head>
<body></body>
</html></code></pre>
<figure data-wp-context="{"uploadedSrc":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_02.png","figureClassNames":"wp-block-image","figureStyles":null,"imgClassNames":"wp-image-133","imgStyles":null,"targetWidth":600,"targetHeight":400,"scaleAttr":false,"ariaLabel":"Enlarge image: prima pagina html","alt":"prima pagina html"}" data-wp-interactive="core/image" class="wp-block-image wp-lightbox-container"><img decoding="async" width="600" height="400" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" src="https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_02.png" alt="first page html" class="wp-image-133" title="HTML beginner's guide: tags and formatting of text and images 2" srcset="https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_02.png 600w, https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_02-300x200.png 300w" sizes="(max-width: 600px) 100vw, 600px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Enlarge image: first page html"
data-wp-init="callbacks.initTriggerButton"
data-wp-on-async--click="actions.showLightbox"
data-wp-style--right="context.imageButtonRight"
data-wp-style--top="context.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewbox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button></figure>
<p>Save as and remember to select "All files" in the drop-down box, after which we save as <strong>index.html</strong> o <strong>mypage.html</strong> Or whatever we like best. </p>
<figure data-wp-context="{"uploadedSrc":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_02-1.png","figureClassNames":"wp-block-image","figureStyles":null,"imgClassNames":"wp-image-135","imgStyles":null,"targetWidth":960,"targetHeight":540,"scaleAttr":false,"ariaLabel":"Enlarge image","alt":""}" data-wp-interactive="core/image" class="wp-block-image wp-lightbox-container"><img loading="lazy" decoding="async" width="960" height="540" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" src="https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_02-1.png" alt="HTML beginner's guide: tags and formatting of text and images 1" class="wp-image-135" title="HTML beginner's guide: tags and formatting of text and images 3" srcset="https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_02-1.png 960w, https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_02-1-300x169.png 300w, https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_02-1-768x432.png 768w" sizes="(max-width: 960px) 100vw, 960px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Enlarge image"
data-wp-init="callbacks.initTriggerButton"
data-wp-on-async--click="actions.showLightbox"
data-wp-style--right="context.imageButtonRight"
data-wp-style--top="context.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewbox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button></figure>
<p>If we double-click on the file we just saved, a new browser window will open with our first html page. It will be a blank page, but it will have the title we entered in the tag <strong><title></strong>.</p>
<figure data-wp-context="{"uploadedSrc":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_03.png","figureClassNames":"wp-block-image","figureStyles":null,"imgClassNames":"wp-image-136","imgStyles":null,"targetWidth":650,"targetHeight":133,"scaleAttr":false,"ariaLabel":"Enlarge image","alt":""}" data-wp-interactive="core/image" class="wp-block-image wp-lightbox-container"><img loading="lazy" decoding="async" width="650" height="133" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" src="https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_03.png" alt="HTML beginner's guide: tags and formatting of text and images 2" class="wp-image-136" title="HTML guide for beginners: tags and formatting of text and images 4" srcset="https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_03.png 650w, https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_03-300x61.png 300w" sizes="(max-width: 650px) 100vw, 650px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Enlarge image"
data-wp-init="callbacks.initTriggerButton"
data-wp-on-async--click="actions.showLightbox"
data-wp-style--right="context.imageButtonRight"
data-wp-style--top="context.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewbox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button></figure>
<p>Let's go ahead and build the web page. Let's add a header and a few paragraphs. Let's apply the tag <strong><b></strong> to a few words to highlight, such as the name of the city of Birth, add a photo with the tag <strong><img></strong> and a link to the page on Wikipedia.</p>
<pre class="wp-block-code" data-no-auto-translation=""><code lang="markup" class="language-markup line-numbers"><!doctype html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>Lionel Messi</h1>
<p>Lionel Andrés Messi, called simply Leo by many, was born on June 24, 1987 in <b>Rosario</b>, in the Argentine state of Santa Fe.
</p>
<img src="Messi.jpg" />
<p>He is only five years old when he starts kicking the ball for the first time. His first team is the <b>Grandoli</b>, a small soccer school in his town aimed at children. Coaching the boys is Jorge Messi, a metalworker employee and father of the future champion.
</p>
<p>At the age of seven <a href="https://it.wikipedia.org/wiki/Lionel_Messi">Lionel Messi</a> he wears the jersey of "Newell's Old Boys" and plays in the youth categories. To the eyes of the soccer fans who followed the young boy in the small fields of Rosario, the talent of the youngster was already clear.
</p>
<h2>The arrival in barcelona</h2>
<p>Because of a delay in the boy's bone development due to low levels of growth hormones in his body, the transition fades.
</p>
<p>Medical treatment is recommended to the family, but it is very expensive: it is reported to be $900 monthly; Jorge Messi asks for help from Newell's Old Boys and River Plate without getting adequate solutions. He strongly believes in Lionel's possible future as a champion: so he asks some foundations for help.
</p>
</body>
</html></code></pre>
<p>If we want to insert an image, we can save it in the same folder as the html file and retrieve it by entering the file name in the attribute <strong>src</strong> of the tag <strong><img></strong>.</p>
<p>If we have done everything correctly, we should get something like this:</p>
<figure data-wp-context="{"uploadedSrc":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/2019\/07\/tutorial_html_04.png","figureClassNames":"wp-block-image","figureStyles":null,"imgClassNames":"wp-image-146","imgStyles":null,"targetWidth":902,"targetHeight":654,"scaleAttr":false,"ariaLabel":"Enlarge image","alt":""}" data-wp-interactive="core/image" class="wp-block-image wp-lightbox-container"><img loading="lazy" decoding="async" width="902" height="654" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" src="https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_04.png" alt="HTML beginner's guide: tags and formatting of text and images 3" class="wp-image-146" title="HTML beginner's guide: tags and formatting of text and images 5" srcset="https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_04.png 902w, https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_04-300x218.png 300w, https://www.francescopepe.com/wp-content/uploads/2019/07/tutorial_html_04-768x557.png 768w" sizes="(max-width: 902px) 100vw, 902px" /><button
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="Enlarge image"
data-wp-init="callbacks.initTriggerButton"
data-wp-on-async--click="actions.showLightbox"
data-wp-style--right="context.imageButtonRight"
data-wp-style--top="context.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewbox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
</svg>
</button></figure>
<p>In this brief guide on HTML we have seen how to make a web page, add text and images, format a header and bold text, and add links. </p>
<p>To improve our page we will need to change its appearance, using the <strong>CSS</strong>. This will be the subject of a future guide.</p>
</div>
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<div class="wp-block-group post-meta has-small-font-size is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-5 wp-block-group-is-layout-flex" style="border-radius:5px;margin-top:var(--wp--preset--spacing--large)"></div>
</div>
</main>
<div class="wp-block-comments alignfull wp-block-comments-query-loop has-tertiary-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--x-large);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--x-large);padding-left:var(--wp--preset--spacing--medium)">
<div class="wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-10 wp-block-group-is-layout-constrained" style="padding-right:0;padding-left:0">
<div class="wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-8 wp-block-group-is-layout-constrained">
<h2 class="wp-block-heading">Comments</h2>
</div>
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"></div>
<div id="respond" class="comment-respond wp-block-post-comments-form">
<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/en/html-guide/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://www.francescopepe.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate data-trp-original-action="https://www.francescopepe.com/wp-comments-post.php"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p>
<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p>
<p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p>
<p class="form-submit wp-block-button"><input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><input type="hidden" name="trp-form-language" value="en"/></form> </div><!-- #respond -->
</div>
</div>
<div class="wp-block-group alignfull has-primary-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-14 wp-block-group-is-layout-constrained" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--x-large);padding-bottom:var(--wp--preset--spacing--x-large)">
<div class="wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow"><ul class="columns-3 wp-block-post-template has-large-font-size is-layout-grid wp-container-core-post-template-is-layout-1 wp-block-post-template-is-layout-grid"><li class="wp-block-post post-1084 post type-post status-publish format-standard has-post-thumbnail hentry category-guide">
<div class="wp-block-group is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-11 wp-block-group-is-layout-flex"><div style="font-style:normal;font-weight:500" class="taxonomy-category has-link-color is-style-default wp-elements-a566851584f438afbd43d6c4573ab560 wp-block-post-terms has-text-color has-main-accent-color has-x-small-font-size"><a href="https://www.francescopepe.com/en/category/guides/" rel="tag">Guides</a></div>
<h2 style="font-style:normal;font-weight:600;text-decoration:none; margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;" class="has-link-color wp-elements-93a9775c2dc1ae17883d3f54ed88db4b wp-block-post-title has-base-font-size"><a href="https://www.francescopepe.com/en/how-to-submit-form-data-to-google-sheets/" target="_self" >How to Submit Form Data to Google Sheets: A Practical Guide</a></h2>
<div class="wp-block-post-date has-text-color has-main-accent-color has-x-small-font-size"><time datetime="2024-05-10T02:59:54+00:00">May 10, 2024</time></div></div>
</li><li class="wp-block-post post-316 post type-post status-publish format-standard has-post-thumbnail hentry category-seo">
<div class="wp-block-group is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-12 wp-block-group-is-layout-flex"><div style="font-style:normal;font-weight:500" class="taxonomy-category has-link-color is-style-default wp-elements-a566851584f438afbd43d6c4573ab560 wp-block-post-terms has-text-color has-main-accent-color has-x-small-font-size"><a href="https://www.francescopepe.com/en/category/seo/" rel="tag">SEO</a></div>
<h2 style="font-style:normal;font-weight:600;text-decoration:none; margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;" class="has-link-color wp-elements-93a9775c2dc1ae17883d3f54ed88db4b wp-block-post-title has-base-font-size"><a href="https://www.francescopepe.com/en/how-to-increase-search-engine-visibility-through-faq-rich-snippet/" target="_self" >How to increase search engine visibility through FAQ rich snippet</a></h2>
<div class="wp-block-post-date has-text-color has-main-accent-color has-x-small-font-size"><time datetime="2023-08-02T17:09:00+00:00">August 2, 2023</time></div></div>
</li><li class="wp-block-post post-375 post type-post status-publish format-standard has-post-thumbnail hentry category-seo">
<div class="wp-block-group is-vertical is-content-justification-left is-layout-flex wp-container-core-group-is-layout-13 wp-block-group-is-layout-flex"><div style="font-style:normal;font-weight:500" class="taxonomy-category has-link-color is-style-default wp-elements-a566851584f438afbd43d6c4573ab560 wp-block-post-terms has-text-color has-main-accent-color has-x-small-font-size"><a href="https://www.francescopepe.com/en/category/seo/" rel="tag">SEO</a></div>
<h2 style="font-style:normal;font-weight:600;text-decoration:none; margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;" class="has-link-color wp-elements-93a9775c2dc1ae17883d3f54ed88db4b wp-block-post-title has-base-font-size"><a href="https://www.francescopepe.com/en/how-to-track-events-in-analytics/" target="_self" >How to track events in Google Analytics</a></h2>
<div class="wp-block-post-date has-text-color has-main-accent-color has-x-small-font-size"><time datetime="2019-08-05T15:32:46+00:00">August 5, 2019</time></div></div>
</li></ul></div>
</div>
<footer class="site-footer wp-block-template-part">
<div class="wp-block-group alignfull dark-footer has-base-color has-main-background-color has-text-color has-background has-link-color wp-elements-0f294aabf00e0760828c70e5013002a4 has-global-padding is-layout-constrained wp-container-core-group-is-layout-21 wp-block-group-is-layout-constrained" style="margin-top:0px;padding-top:var(--wp--preset--spacing--xx-large);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--xx-large);padding-left:var(--wp--preset--spacing--medium)">
<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p style="font-style:normal;font-weight:600">Francis Pepe</p>
<ul class="wp-block-social-links has-icon-color has-icon-background-color is-style-default is-content-justification-left is-layout-flex wp-container-core-social-links-is-layout-1 wp-block-social-links-is-layout-flex"><li style="color: #150E29; background-color: #fff; " class="wp-social-link wp-social-link-instagram has-main-color has-base-background-color wp-block-social-link"><a href="https://instagram.com/tropicalista_" class="wp-block-social-link-anchor"><svg width="24" height="24" viewbox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Instagram</span></a></li>
<li style="color: #150E29; background-color: #fff; " class="wp-social-link wp-social-link-facebook has-main-color has-base-background-color wp-block-social-link"><a href="https://facebook.com/tropicalista" class="wp-block-social-link-anchor"><svg width="24" height="24" viewbox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a></li>
<li style="color: #150E29; background-color: #fff; " class="wp-social-link wp-social-link-github has-main-color has-base-background-color wp-block-social-link"><a href="https://github.com/tropicalista" class="wp-block-social-link-anchor"><svg width="24" height="24" viewbox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"></path></svg><span class="wp-block-social-link-label screen-reader-text">GitHub</span></a></li>
<li style="color: #150E29; background-color: #fff; " class="wp-social-link wp-social-link-youtube has-main-color has-base-background-color wp-block-social-link"><a href="https://www.youtube.com/@tropicalista" class="wp-block-social-link-anchor"><svg width="24" height="24" viewbox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg><span class="wp-block-social-link-label screen-reader-text">YouTube</span></a></li></ul>
</div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p style="font-style:normal;font-weight:600">About</p>
<div class="wp-block-group has-main-accent-color has-text-color has-small-font-size has-global-padding is-layout-constrained wp-container-core-group-is-layout-15 wp-block-group-is-layout-constrained">
<p><a href="https://www.francescopepe.com/en/blog/" data-type="page" data-id="34">Blog</a></p>
<p><a href="https://www.francescopepe.com/en/shop/" data-type="page" data-id="987">Plugins</a></p>
<p><a href="https://www.francescopepe.com/en/contacts/" data-type="page" data-id="40" rel="nofollow">Contact</a></p>
<p><a href="https://www.francescopepe.com/en/cookie-policy-eu/" data-type="page" data-id="1193" rel="nofollow">Cookie Policy</a></p>
</div>
</div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p style="font-style:normal;font-weight:600">Resources</p>
<div class="wp-block-group has-main-accent-color has-text-color has-small-font-size has-global-padding is-layout-constrained wp-container-core-group-is-layout-16 wp-block-group-is-layout-constrained">
<p><a href="https://www.francescopepe.com/en/dashboard-2/" data-type="page" data-id="985" rel="nofollow">Account</a></p>
<p><a href="https://www.francescopepe.com/en/docs/" data-type="page" data-id="964">Documentation</a></p>
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-fill" style="text-decoration:underline"><a data-popper="1285" class="wp-block-button__link has-main-background-color has-background wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">Support</a></div>
</div>
</div>
</div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p style="font-style:normal;font-weight:600">Plugins</p>
<div class="wp-block-group has-main-accent-color has-text-color has-small-font-size has-global-padding is-layout-constrained wp-container-core-group-is-layout-17 wp-block-group-is-layout-constrained">
<p>Pdf Embed</p>
<p>Popper</p>
<p>Search Console</p>
</div>
</div>
</div>
</div>
</div>
<hr class="wp-block-separator alignwide has-text-color has-secondary-color has-alpha-channel-opacity has-secondary-background-color has-background is-style-separator-dotted"/>
<div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow">
<div class="wp-block-group has-main-accent-color has-text-color has-link-color wp-elements-45f4c4590d38b59f221116172a248e2a is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-19 wp-block-group-is-layout-flex">
<p class="has-x-small-font-size">ยฉ 2024 - Francesco Pepe</p>
<div class="wp-block-group has-x-small-font-size is-nowrap is-layout-flex wp-container-core-group-is-layout-18 wp-block-group-is-layout-flex">
<p>Visit Formello</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<template id="tp-language" data-tp-language="en_US"></template><script id="sc-store-data" type="application/json">{"checkout":{"formId":983,"mode":"test","persist":"browser"}}</script>
<sc-cart-loader
template='<sc-cart id="sc-cart" header="Cart" checkout-link="https://www.francescopepe.com/en/checkout/" style="font-size: 16px; --sc-z-index-drawer: 999999; --sc-drawer-size: 500px" > <div style="border-bottom:var(--sc-drawer-border);padding-top:1.25em;padding-bottom:1.25em;padding-left:1.25em;padding-right:1.25em"><sc-cart-header><span>Review Your Cart</span></sc-cart-header></div> <sc-line-items style="border-bottom:var(--sc-drawer-border);padding-top:1.25em;padding-bottom:1.25em;padding-left:1.25em;padding-right:1.25em" removable="true" editable="true"></sc-line-items> <sc-order-coupon-form label="Add Coupon Code" placeholder="Enter coupon code" class="" style="border-bottom:var(--sc-drawer-border);padding-top:1.25em;padding-bottom:1.25em;padding-left:1.25em;padding-right:1.25em" collapsed> Apply </sc-order-coupon-form> <sc-line-item-total total="subtotal" size="large" class="" style="padding-top:1.25em;padding-bottom:0em;padding-left:1.25em;padding-right:1.25em"> <span slot="title">Subtotal</span> </sc-line-item-total> <sc-line-item-bump label="Bundle Discount" class="" style="padding-top:1.25em;padding-bottom:0em;padding-left:1.25em;padding-right:1.25em"></sc-line-item-bump> <div class="wp-block-buttons" style="border-bottom:var(--sc-drawer-border);padding-top:1.25em;padding-bottom:1.25em;padding-left:1.25em;padding-right:1.25em"> <sc-cart-submit class="wp-block-button"> <a href="https://www.francescopepe.com/en/checkout/" class="wp-block-button__link wp-element-button sc-button "> <span data-text>Checkout</span> <sc-spinner data-loader></sc-spinner> </a> </sc-cart-submit> </div> </sc-cart> <sc-cart-icon style="font-size: 16px"> <sc-icon name="shopping-bag"></sc-icon> </sc-cart-icon>'>
</sc-cart-loader>
<div id="trp-floater-ls" onclick="" data-no-translation class="trp-language-switcher-container trp-floater-ls-names trp-bottom-right trp-color-dark flags-full-names" >
<div id="trp-floater-ls-current-language" class="trp-with-flags">
<a href="#" class="trp-floater-ls-disabled-language trp-ls-disabled-language" onclick="event.preventDefault()">
<img class="trp-flag-image" src="https://www.francescopepe.com/wp-content/plugins/translatepress-multilingual/assets/images/flags/en_US.png" width="18" height="12" alt="en_US" title="English">English </a>
</div>
<div id="trp-floater-ls-language-list" class="trp-with-flags" >
<div class="trp-language-wrap trp-language-wrap-bottom"> <a href="https://www.francescopepe.com/guida-html/"
title="Italian">
<img class="trp-flag-image" src="https://www.francescopepe.com/wp-content/plugins/translatepress-multilingual/assets/images/flags/it_IT.png" width="18" height="12" alt="it_IT" title="Italian">Italian </a>
<a href="https://www.francescopepe.com/es/guia-html/"
title="Spanish">
<img class="trp-flag-image" src="https://www.francescopepe.com/wp-content/plugins/translatepress-multilingual/assets/images/flags/es_ES.png" width="18" height="12" alt="es_ES" title="Spanish">Spanish </a>
<a href="#" class="trp-floater-ls-disabled-language trp-ls-disabled-language" onclick="event.preventDefault()"><img class="trp-flag-image" src="https://www.francescopepe.com/wp-content/plugins/translatepress-multilingual/assets/images/flags/en_US.png" width="18" height="12" alt="en_US" title="English">English</a></div> </div>
</div>
<!-- Consent Management powered by Complianz | GDPR/CCPA Cookie Consent https://wordpress.org/plugins/complianz-gdpr -->
<div id="cmplz-cookiebanner-container"><div class="cmplz-cookiebanner cmplz-hidden banner-1 banner-a optin cmplz-bottom-right cmplz-categories-type-no" aria-modal="true" data-nosnippet="true" role="dialog" aria-live="polite" aria-labelledby="cmplz-header-1-optin" aria-describedby="cmplz-message-1-optin">
<div class="cmplz-header">
<div class="cmplz-logo"><a href="https://www.francescopepe.com/en/" class="custom-logo-link" rel="home"><img width="1250" height="1250" src="https://www.francescopepe.com/wp-content/uploads/2024/04/fp-logo.png" class="custom-logo" alt="Francis Pepe" decoding="async" srcset="https://www.francescopepe.com/wp-content/uploads/2024/04/fp-logo.png 1250w, https://www.francescopepe.com/wp-content/uploads/2024/04/fp-logo-300x300.png 300w, https://www.francescopepe.com/wp-content/uploads/2024/04/fp-logo-1024x1024.png 1024w, https://www.francescopepe.com/wp-content/uploads/2024/04/fp-logo-150x150.png 150w, https://www.francescopepe.com/wp-content/uploads/2024/04/fp-logo-768x768.png 768w" sizes="(max-width: 1250px) 100vw, 1250px" /></a></div>
<div class="cmplz-title" id="cmplz-header-1-optin">Manage Consent</div>
<div class="cmplz-close" tabindex="0" role="button" aria-label="Close dialog" data-no-translation-aria-label="">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
</div>
</div>
<div class="cmplz-divider cmplz-divider-header"></div>
<div class="cmplz-body">
<div class="cmplz-message" id="cmplz-message-1-optin">To provide the best experiences, we use technologies such as cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent may adversely affect some features and functions.</div>
<!-- categories start -->
<div class="cmplz-categories">
<details class="cmplz-category cmplz-functional" >
<summary>
<span class="cmplz-category-header">
<span class="cmplz-category-title">Functional</span>
<span class='cmplz-always-active'>
<span class="cmplz-banner-checkbox">
<input type="checkbox"
id="cmplz-functional-optin"
data-category="cmplz_functional"
class="cmplz-consent-checkbox cmplz-functional"
size="40"
value="1"/>
<label class="cmplz-label" for="cmplz-functional-optin" tabindex="0"><span class="screen-reader-text">Functional</span></label>
</span>
Always active </span>
<span class="cmplz-icon cmplz-open">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
</span>
</span>
</summary>
<div class="cmplz-description">
<span class="cmplz-description-functional">Technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.</span>
</div>
</details>
<details class="cmplz-category cmplz-preferences" >
<summary>
<span class="cmplz-category-header">
<span class="cmplz-category-title">Preferences</span>
<span class="cmplz-banner-checkbox">
<input type="checkbox"
id="cmplz-preferences-optin"
data-category="cmplz_preferences"
class="cmplz-consent-checkbox cmplz-preferences"
size="40"
value="1"/>
<label class="cmplz-label" for="cmplz-preferences-optin" tabindex="0"><span class="screen-reader-text">Preferences</span></label>
</span>
<span class="cmplz-icon cmplz-open">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
</span>
</span>
</summary>
<div class="cmplz-description">
<span class="cmplz-description-preferences">Technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.</span>
</div>
</details>
<details class="cmplz-category cmplz-statistics" >
<summary>
<span class="cmplz-category-header">
<span class="cmplz-category-title">Statistics</span>
<span class="cmplz-banner-checkbox">
<input type="checkbox"
id="cmplz-statistics-optin"
data-category="cmplz_statistics"
class="cmplz-consent-checkbox cmplz-statistics"
size="40"
value="1"/>
<label class="cmplz-label" for="cmplz-statistics-optin" tabindex="0"><span class="screen-reader-text">Statistics</span></label>
</span>
<span class="cmplz-icon cmplz-open">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
</span>
</span>
</summary>
<div class="cmplz-description">
<span class="cmplz-description-statistics">Technical storage or access that is used exclusively for statistical purposes.</span>
<span class="cmplz-description-statistics-anonymous">Technical storage or access that is used solely for anonymous statistical purposes. Without a subpoena, voluntary compliance by your Internet Service Provider, or additional records from third parties, information stored or retrieved for this purpose alone cannot usually be used for identification.</span>
</div>
</details>
<details class="cmplz-category cmplz-marketing" >
<summary>
<span class="cmplz-category-header">
<span class="cmplz-category-title">Marketing</span>
<span class="cmplz-banner-checkbox">
<input type="checkbox"
id="cmplz-marketing-optin"
data-category="cmplz_marketing"
class="cmplz-consent-checkbox cmplz-marketing"
size="40"
value="1"/>
<label class="cmplz-label" for="cmplz-marketing-optin" tabindex="0"><span class="screen-reader-text">Marketing</span></label>
</span>
<span class="cmplz-icon cmplz-open">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512" height="18" ><path d="M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z"/></svg>
</span>
</span>
</summary>
<div class="cmplz-description">
<span class="cmplz-description-marketing">Technical storage or access is necessary to create user profiles to send advertisements, or to track the user on one website or several websites for similar marketing purposes.</span>
</div>
</details>
</div><!-- categories end -->
</div>
<div class="cmplz-links cmplz-information">
<a class="cmplz-link cmplz-manage-options cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container" data-no-translation="" data-trp-gettext="">Manage options</a>
<a class="cmplz-link cmplz-manage-third-parties cookie-statement" href="#" data-relative_url="#cmplz-cookies-overview" data-no-translation="" data-trp-gettext="">Manage services</a>
<a class="cmplz-link cmplz-manage-vendors tcf cookie-statement" href="#" data-relative_url="#cmplz-tcf-wrapper" data-no-translation="" data-trp-gettext="">Manage {vendor_count} vendors</a>
<a class="cmplz-link cmplz-external cmplz-read-more-purposes tcf" target="_blank" rel="noopener noreferrer nofollow" href="https://cookiedatabase.org/tcf/purposes/" data-no-translation="" data-trp-gettext="">Read more about these purposes</a>
</div>
<div class="cmplz-divider cmplz-footer"></div>
<div class="cmplz-buttons">
<button class="cmplz-btn cmplz-accept">Accept</button>
<button class="cmplz-btn cmplz-deny">Nega</button>
<button class="cmplz-btn cmplz-view-preferences">View preferences</button>
<button class="cmplz-btn cmplz-save-preferences">Save preferences</button>
<a class="cmplz-btn cmplz-manage-options tcf cookie-statement" href="#" data-relative_url="#cmplz-manage-consent-container">View preferences</a>
</div>
<div class="cmplz-links cmplz-documents">
<a class="cmplz-link cookie-statement" href="#" data-relative_url="">{title}</a>
<a class="cmplz-link privacy-statement" href="#" data-relative_url="">{title}</a>
<a class="cmplz-link impressum" href="#" data-relative_url="">{title}</a>
</div>
</div>
</div>
<div id="cmplz-manage-consent" data-nosnippet="true"><button class="cmplz-btn cmplz-hidden cmplz-manage-consent manage-consent-1">Manage Consent</button>
</div>
<script type="text/html" id="tmpl-media-frame">
<div class="media-frame-title" id="media-frame-title"></div>
<h2 class="media-frame-menu-heading">Actions</h2>
<button type="button" class="button button-link media-frame-menu-toggle" aria-expanded="false">
Menu <span class="dashicons dashicons-arrow-down" aria-hidden="true"></span>
</button>
<div class="media-frame-menu"></div>
<div class="media-frame-tab-panel">
<div class="media-frame-router"></div>
<div class="media-frame-content"></div>
</div>
<h2 class="media-frame-actions-heading screen-reader-text">
Selected media actions </h2>
<div class="media-frame-toolbar"></div>
<div class="media-frame-uploader"></div>
</script>
<script type="text/html" id="tmpl-media-modal">
<div tabindex="0" class="media-modal wp-core-ui" role="dialog" aria-labelledby="media-frame-title">
<# if ( data.hasCloseButton ) { #>
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">
Close dialog </span></span></button>
<# } #>
<div class="media-modal-content" role="document"></div>
</div>
<div class="media-modal-backdrop"></div>
</script>
<script type="text/html" id="tmpl-uploader-window">
<div class="uploader-window-content">
<div class="uploader-editor-title">Drop files to upload</div>
</div>
</script>
<script type="text/html" id="tmpl-uploader-editor">
<div class="uploader-editor-content">
<div class="uploader-editor-title">Drop files to upload</div>
</div>
</script>
<script type="text/html" id="tmpl-uploader-inline">
<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
<# if ( data.canClose ) { #>
<button class="close dashicons dashicons-no"><span class="screen-reader-text">
Close uploader </span></button>
<# } #>
<div class="uploader-inline-content {{ messageClass }}">
<# if ( data.message ) { #>
<h2 class="upload-message">{{ data.message }}</h2>
<# } #>
<div class="upload-ui">
<h2 class="upload-instructions drop-instructions">Drop files to upload</h2>
<p class="upload-instructions drop-instructions">or</p>
<button type="button" class="browser button button-hero" aria-labelledby="post-upload-info">Select Files</button>
</div>
<div class="upload-inline-status"></div>
<div class="post-upload-ui" id="post-upload-info">
<p class="max-upload-size">
Maximum upload file size: 2 GB. </p>
<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
<p class="suggested-dimensions">
Suggested image dimensions: {{data.suggestedWidth}} by {{data.suggestedHeight}} pixels. </p>
<# } #>
</div>
</div>
</script>
<script type="text/html" id="tmpl-media-library-view-switcher">
<a href="https://www.francescopepe.com/wp-admin/upload.php?mode=list" class="view-list">
<span class="screen-reader-text">
List view </span>
</a>
<a href="https://www.francescopepe.com/wp-admin/upload.php?mode=grid" class="view-grid current" aria-current="page">
<span class="screen-reader-text">
Grid view </span>
</a>
</script>
<script type="text/html" id="tmpl-uploader-status">
<h2>Uploading</h2>
<div class="media-progress-bar"><div></div></div>
<div class="upload-details">
<span class="upload-count">
<span class="upload-index"></span> / <span class="upload-total"></span>
</span>
<span class="upload-detail-separator">–</span>
<span class="upload-filename"></span>
</div>
<div class="upload-errors"></div>
<button type="button" class="button upload-dismiss-errors">Dismiss errors</button>
</script>
<script type="text/html" id="tmpl-uploader-status-error">
<span class="upload-error-filename">{{{ data.filename }}}</span>
<span class="upload-error-message">{{ data.message }}</span>
</script>
<script type="text/html" id="tmpl-edit-attachment-frame">
<div class="edit-media-header">
<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text">Edit previous media item</span></button>
<button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text">Edit next media item</span></button>
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">Close dialog</span></span></button>
</div>
<div class="media-frame-title"></div>
<div class="media-frame-content"></div>
</script>
<script type="text/html" id="tmpl-attachment-details-two-column">
<div class="attachment-media-view {{ data.orientation }}">
<h2 class="screen-reader-text">Attachment Preview</h2>
<div class="thumbnail thumbnail-{{ data.type }}">
<# if ( data.uploading ) { #>
<div class="media-progress-bar"><div></div></div>
<# } else if ( data.sizes && data.sizes.full ) { #>
<img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" alt="" />
<# } else if ( data.sizes && data.sizes.large ) { #>
<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
<img class="details-image icon" src="{{ data.icon }}" draggable="false" alt="" />
<# } #>
<# if ( 'audio' === data.type ) { #>
<div class="wp-media-wrapper wp-audio">
<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
<source type="{{ data.mime }}" src="{{ data.url }}" />
</audio>
</div>
<# } else if ( 'video' === data.type ) {
var w_rule = '';
if ( data.width ) {
w_rule = 'width: ' + data.width + 'px;';
} else if ( wp.media.view.settings.contentWidth ) {
w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
}
#>
<div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
<video controls="controls" class="wp-video-shortcode" preload="metadata"
<# if ( data.width ) { #>width="{{ data.width }}"<# } #>
<# if ( data.height ) { #>height="{{ data.height }}"<# } #>
<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
<source type="{{ data.mime }}" src="{{ data.url }}" />
</video>
</div>
<# } #>
<div class="attachment-actions">
<# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
<button type="button" class="button edit-attachment">Edit Image</button>
<# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
<p>Document Preview</p>
<# } #>
</div>
</div>
</div>
<div class="attachment-info">
<span class="settings-save-status" role="status">
<span class="spinner"></span>
<span class="saved">Saved.</span>
</span>
<div class="details">
<h2 class="screen-reader-text">
Details </h2>
<div class="uploaded"><strong>Uploaded on:</strong> {{ data.dateFormatted }}</div>
<div class="uploaded-by">
<strong>Uploaded by:</strong>
<# if ( data.authorLink ) { #>
<a href="{{ data.authorLink }}">{{ data.authorName }}</a>
<# } else { #>
{{ data.authorName }}
<# } #>
</div>
<# if ( data.uploadedToTitle ) { #>
<div class="uploaded-to">
<strong>Uploaded to:</strong>
<# if ( data.uploadedToLink ) { #>
<a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a>
<# } else { #>
{{ data.uploadedToTitle }}
<# } #>
</div>
<# } #>
<div class="filename"><strong>File name:</strong> {{ data.filename }}</div>
<div class="file-type"><strong>File type:</strong> {{ data.mime }}</div>
<div class="file-size"><strong>File size:</strong> {{ data.filesizeHumanReadable }}</div>
<# if ( 'image' === data.type && ! data.uploading ) { #>
<# if ( data.width && data.height ) { #>
<div class="dimensions"><strong>Dimensions:</strong>
{{ data.width }} by {{ data.height }} pixels </div>
<# } #>
<# if ( data.originalImageURL && data.originalImageName ) { #>
<div class="word-wrap-break-word">
<strong>Original image:</strong>
<a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
</div>
<# } #>
<# } #>
<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
<div class="file-length"><strong>Length:</strong>
<span aria-hidden="true">{{ data.fileLengthHumanReadable }}</span>
<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
</div>
<# } #>
<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
<div class="bitrate">
<strong>Bitrate:</strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
<# if ( data.meta.bitrate_mode ) { #>
{{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
<# } #>
</div>
<# } #>
<# if ( data.mediaStates ) { #>
<div class="media-states"><strong>Used as:</strong> {{ data.mediaStates }}</div>
<# } #>
<div class="compat-meta">
<# if ( data.compat && data.compat.meta ) { #>
{{{ data.compat.meta }}}
<# } #>
</div>
</div>
<div class="settings">
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<# if ( 'image' === data.type ) { #>
<span class="setting alt-text has-description" data-setting="alt">
<label for="attachment-details-two-column-alt-text" class="name">Alternative Text</label>
<textarea id="attachment-details-two-column-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
</span>
<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" target="_blank" rel="noopener">Learn how to describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
<# } #>
<span class="setting" data-setting="title">
<label for="attachment-details-two-column-title" class="name">Title</label>
<input type="text" id="attachment-details-two-column-title" value="{{ data.title }}" {{ maybeReadOnly }} />
</span>
<# if ( 'audio' === data.type ) { #>
<span class="setting" data-setting="artist">
<label for="attachment-details-two-column-artist" class="name">Artist</label>
<input type="text" id="attachment-details-two-column-artist" value="{{ data.artist || data.meta.artist || '' }}" />
</span>
<span class="setting" data-setting="album">
<label for="attachment-details-two-column-album" class="name">Album</label>
<input type="text" id="attachment-details-two-column-album" value="{{ data.album || data.meta.album || '' }}" />
</span>
<# } #>
<span class="setting" data-setting="caption">
<label for="attachment-details-two-column-caption" class="name">Caption</label>
<textarea id="attachment-details-two-column-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
</span>
<span class="setting" data-setting="description">
<label for="attachment-details-two-column-description" class="name">Description</label>
<textarea id="attachment-details-two-column-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
</span>
<span class="setting" data-setting="url">
<label for="attachment-details-two-column-copy-link" class="name">File URL:</label>
<input type="text" class="attachment-details-copy-link" id="attachment-details-two-column-copy-link" value="{{ data.url }}" readonly />
<span class="copy-to-clipboard-container">
<button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-two-column-copy-link">Copy URL to clipboard</button>
<span class="success hidden" aria-hidden="true">Copied!</span>
</span>
</span>
<div class="attachment-compat"></div>
</div>
<div class="actions">
<# if ( data.link ) { #>
<a class="view-attachment" href="{{ data.link }}">View media file</a>
<# } #>
<# if ( data.can.save ) { #>
<# if ( data.link ) { #>
<span class="links-separator">|</span>
<# } #>
<a href="{{ data.editLink }}">Edit more details</a>
<# } #>
<# if ( data.can.save && data.link ) { #>
<span class="links-separator">|</span>
<a href="{{ data.url }}" download>Download file</a>
<# } #>
<# if ( ! data.uploading && data.can.remove ) { #>
<# if ( data.link || data.can.save ) { #>
<span class="links-separator">|</span>
<# } #>
<button type="button" class="button-link delete-attachment">Delete permanently</button>
<# } #>
</div>
</div>
</script>
<script type="text/html" id="tmpl-attachment">
<div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
<div class="thumbnail">
<# if ( data.uploading ) { #>
<div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
<# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
<div class="centered">
<img src="{{ data.size.url }}" draggable="false" alt="" />
</div>
<# } else { #>
<div class="centered">
<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
<img src="{{ data.image.src }}" class="thumbnail" draggable="false" alt="" />
<# } else if ( data.sizes && data.sizes.medium ) { #>
<img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" />
<# } else { #>
<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
<# } #>
</div>
<div class="filename">
<div>{{ data.filename }}</div>
</div>
<# } #>
</div>
<# if ( data.buttons.close ) { #>
<button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text">
Remove </span></button>
<# } #>
</div>
<# if ( data.buttons.check ) { #>
<button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text">
Deselect </span></button>
<# } #>
<#
var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
if ( data.describe ) {
if ( 'image' === data.type ) { #>
<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
aria-label="Caption"
placeholder="Caption…" {{ maybeReadOnly }} />
<# } else { #>
<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
<# if ( 'video' === data.type ) { #>
aria-label="Video title"
placeholder="Video title…"
<# } else if ( 'audio' === data.type ) { #>
aria-label="Audio title"
placeholder="Audio title…"
<# } else { #>
aria-label="Media title"
placeholder="Media title…"
<# } #> {{ maybeReadOnly }} />
<# }
} #>
</script>
<script type="text/html" id="tmpl-attachment-details">
<h2>
Attachment Details <span class="settings-save-status" role="status">
<span class="spinner"></span>
<span class="saved">Saved.</span>
</span>
</h2>
<div class="attachment-info">
<# if ( 'audio' === data.type ) { #>
<div class="wp-media-wrapper wp-audio">
<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
<source type="{{ data.mime }}" src="{{ data.url }}" />
</audio>
</div>
<# } else if ( 'video' === data.type ) {
var w_rule = '';
if ( data.width ) {
w_rule = 'width: ' + data.width + 'px;';
} else if ( wp.media.view.settings.contentWidth ) {
w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
}
#>
<div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
<video controls="controls" class="wp-video-shortcode" preload="metadata"
<# if ( data.width ) { #>width="{{ data.width }}"<# } #>
<# if ( data.height ) { #>height="{{ data.height }}"<# } #>
<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
<source type="{{ data.mime }}" src="{{ data.url }}" />
</video>
</div>
<# } else { #>
<div class="thumbnail thumbnail-{{ data.type }}">
<# if ( data.uploading ) { #>
<div class="media-progress-bar"><div></div></div>
<# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
<img src="{{ data.size.url }}" draggable="false" alt="" />
<# } else { #>
<img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
<# } #>
</div>
<# } #>
<div class="details">
<div class="filename">{{ data.filename }}</div>
<div class="uploaded">{{ data.dateFormatted }}</div>
<div class="file-size">{{ data.filesizeHumanReadable }}</div>
<# if ( 'image' === data.type && ! data.uploading ) { #>
<# if ( data.width && data.height ) { #>
<div class="dimensions">
{{ data.width }} by {{ data.height }} pixels </div>
<# } #>
<# if ( data.originalImageURL && data.originalImageName ) { #>
<div class="word-wrap-break-word">
Original image: <a href="{{ data.originalImageURL }}">{{data.originalImageName}}</a>
</div>
<# } #>
<# if ( data.can.save && data.sizes ) { #>
<a class="edit-attachment" href="{{ data.editLink }}&image-editor" target="_blank">Edit Image</a>
<# } #>
<# } #>
<# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
<div class="file-length">Length: <span aria-hidden="true">{{ data.fileLengthHumanReadable }}</span>
<span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
</div>
<# } #>
<# if ( data.mediaStates ) { #>
<div class="media-states"><strong>Used as:</strong> {{ data.mediaStates }}</div>
<# } #>
<# if ( ! data.uploading && data.can.remove ) { #>
<button type="button" class="button-link delete-attachment">Delete permanently</button>
<# } #>
<div class="compat-meta">
<# if ( data.compat && data.compat.meta ) { #>
{{{ data.compat.meta }}}
<# } #>
</div>
</div>
</div>
<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
<# if ( 'image' === data.type ) { #>
<span class="setting alt-text has-description" data-setting="alt">
<label for="attachment-details-alt-text" class="name">Alt Text</label>
<textarea id="attachment-details-alt-text" aria-describedby="alt-text-description" {{ maybeReadOnly }}>{{ data.alt }}</textarea>
</span>
<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" target="_blank" rel="noopener">Learn how to describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
<# } #>
<span class="setting" data-setting="title">
<label for="attachment-details-title" class="name">Title</label>
<input type="text" id="attachment-details-title" value="{{ data.title }}" {{ maybeReadOnly }} />
</span>
<# if ( 'audio' === data.type ) { #>
<span class="setting" data-setting="artist">
<label for="attachment-details-artist" class="name">Artist</label>
<input type="text" id="attachment-details-artist" value="{{ data.artist || data.meta.artist || '' }}" />
</span>
<span class="setting" data-setting="album">
<label for="attachment-details-album" class="name">Album</label>
<input type="text" id="attachment-details-album" value="{{ data.album || data.meta.album || '' }}" />
</span>
<# } #>
<span class="setting" data-setting="caption">
<label for="attachment-details-caption" class="name">Caption</label>
<textarea id="attachment-details-caption" {{ maybeReadOnly }}>{{ data.caption }}</textarea>
</span>
<span class="setting" data-setting="description">
<label for="attachment-details-description" class="name">Description</label>
<textarea id="attachment-details-description" {{ maybeReadOnly }}>{{ data.description }}</textarea>
</span>
<span class="setting" data-setting="url">
<label for="attachment-details-copy-link" class="name">File URL:</label>
<input type="text" class="attachment-details-copy-link" id="attachment-details-copy-link" value="{{ data.url }}" readonly />
<div class="copy-to-clipboard-container">
<button type="button" class="button button-small copy-attachment-url" data-clipboard-target="#attachment-details-copy-link">Copy URL to clipboard</button>
<span class="success hidden" aria-hidden="true">Copied!</span>
</div>
</span>
</script>
<script type="text/html" id="tmpl-media-selection">
<div class="selection-info">
<span class="count"></span>
<# if ( data.editable ) { #>
<button type="button" class="button-link edit-selection">Edit Selection</button>
<# } #>
<# if ( data.clearable ) { #>
<button type="button" class="button-link clear-selection">Clear</button>
<# } #>
</div>
<div class="selection-view"></div>
</script>
<script type="text/html" id="tmpl-attachment-display-settings">
<h2>Attachment Display Settings</h2>
<# if ( 'image' === data.type ) { #>
<span class="setting align">
<label for="attachment-display-settings-alignment" class="name">Alignment</label>
<select id="attachment-display-settings-alignment" class="alignment"
data-setting="align"
<# if ( data.userSettings ) { #>
data-user-setting="align"
<# } #>>
<option value="left">
Left </option>
<option value="center">
Center </option>
<option value="right">
Right </option>
<option value="none" selected>
</option>
</select>
</span>
<# } #>
<span class="setting">
<label for="attachment-display-settings-link-to" class="name">
<# if ( data.model.canEmbed ) { #>
Embed or Link <# } else { #>
Link To <# } #>
</label>
<select id="attachment-display-settings-link-to" class="link-to"
data-setting="link"
<# if ( data.userSettings && ! data.model.canEmbed ) { #>
data-user-setting="urlbutton"
<# } #>>
<# if ( data.model.canEmbed ) { #>
<option value="embed" selected>
Embed Media Player </option>
<option value="file">
<# } else { #>
<option value="none" selected>
</option>
<option value="file">
<# } #>
<# if ( data.model.canEmbed ) { #>
Link to Media File <# } else { #>
Media File <# } #>
</option>
<option value="post">
<# if ( data.model.canEmbed ) { #>
Link to Attachment Page <# } else { #>
Attachment Page <# } #>
</option>
<# if ( 'image' === data.type ) { #>
<option value="custom">
Custom URL </option>
<# } #>
</select>
</span>
<span class="setting">
<label for="attachment-display-settings-link-to-custom" class="name">URL</label>
<input type="text" id="attachment-display-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
</span>
<# if ( 'undefined' !== typeof data.sizes ) { #>
<span class="setting">
<label for="attachment-display-settings-size" class="name">Size</label>
<select id="attachment-display-settings-size" class="size" name="size"
data-setting="size"
<# if ( data.userSettings ) { #>
data-user-setting="imgsize"
<# } #>>
<#
var size = data.sizes['thumbnail'];
if ( size ) { #>
<option value="thumbnail" >
Thumbnail – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<#
var size = data.sizes['medium'];
if ( size ) { #>
<option value="medium" >
Medium – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<#
var size = data.sizes['large'];
if ( size ) { #>
<option value="large" >
Large – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<#
var size = data.sizes['full'];
if ( size ) { #>
<option value="full" selected='selected'>
Full Size – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<#
var size = data.sizes['trp-custom-language-flag'];
if ( size ) { #>
<option value="trp-custom-language-flag" >
Custom Language Flag – {{ size.width }} × {{ size.height }}
</option>
<# } #>
</select>
</span>
<# } #>
</script>
<script type="text/html" id="tmpl-gallery-settings">
<h2>Gallery Settings</h2>
<span class="setting">
<label for="gallery-settings-link-to" class="name">Link To</label>
<select id="gallery-settings-link-to" class="link-to"
data-setting="link"
<# if ( data.userSettings ) { #>
data-user-setting="urlbutton"
<# } #>>
<option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' === wp.media.galleryDefaults.link ) {
#>selected="selected"<# }
#>>
Attachment Page </option>
<option value="file" <# if ( 'file' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
Media File </option>
<option value="none" <# if ( 'none' === wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
</option>
</select>
</span>
<span class="setting">
<label for="gallery-settings-columns" class="name select-label-inline">Columns</label>
<select id="gallery-settings-columns" class="columns" name="columns"
data-setting="columns">
<option value="1" <#
if ( 1 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
#>>
1 </option>
<option value="2" <#
if ( 2 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
#>>
2 </option>
<option value="3" <#
if ( 3 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
#>>
3 </option>
<option value="4" <#
if ( 4 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
#>>
4 </option>
<option value="5" <#
if ( 5 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
#>>
5 </option>
<option value="6" <#
if ( 6 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
#>>
6 </option>
<option value="7" <#
if ( 7 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
#>>
7 </option>
<option value="8" <#
if ( 8 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
#>>
8 </option>
<option value="9" <#
if ( 9 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
#>>
9 </option>
</select>
</span>
<span class="setting">
<input type="checkbox" id="gallery-settings-random-order" data-setting="_orderbyRandom" />
<label for="gallery-settings-random-order" class="checkbox-label-inline">Random Order</label>
</span>
<span class="setting size">
<label for="gallery-settings-size" class="name">Size</label>
<select id="gallery-settings-size" class="size" name="size"
data-setting="size"
<# if ( data.userSettings ) { #>
data-user-setting="imgsize"
<# } #>
>
<option value="thumbnail">
Thumbnail </option>
<option value="medium">
Medium </option>
<option value="large">
Large </option>
<option value="full">
Full Size </option>
<option value="trp-custom-language-flag">
Custom Language Flag </option>
</select>
</span>
</script>
<script type="text/html" id="tmpl-playlist-settings">
<h2>Playlist Settings</h2>
<# var emptyModel = _.isEmpty( data.model ),
isVideo = 'video' === data.controller.get('library').props.get('type'); #>
<span class="setting">
<input type="checkbox" id="playlist-settings-show-list" data-setting="tracklist" <# if ( emptyModel ) { #>
checked="checked"
<# } #> />
<label for="playlist-settings-show-list" class="checkbox-label-inline">
<# if ( isVideo ) { #>
Show Video List <# } else { #>
Show Tracklist <# } #>
</label>
</span>
<# if ( ! isVideo ) { #>
<span class="setting">
<input type="checkbox" id="playlist-settings-show-artist" data-setting="artists" <# if ( emptyModel ) { #>
checked="checked"
<# } #> />
<label for="playlist-settings-show-artist" class="checkbox-label-inline">
Show Artist Name in Tracklist </label>
</span>
<# } #>
<span class="setting">
<input type="checkbox" id="playlist-settings-show-images" data-setting="images" <# if ( emptyModel ) { #>
checked="checked"
<# } #> />
<label for="playlist-settings-show-images" class="checkbox-label-inline">
Show Images </label>
</span>
</script>
<script type="text/html" id="tmpl-embed-link-settings">
<span class="setting link-text">
<label for="embed-link-settings-link-text" class="name">Link Text</label>
<input type="text" id="embed-link-settings-link-text" class="alignment" data-setting="linkText" />
</span>
<div class="embed-container" style="display: none;">
<div class="embed-preview"></div>
</div>
</script>
<script type="text/html" id="tmpl-embed-image-settings">
<div class="wp-clearfix">
<div class="thumbnail">
<img src="{{ data.model.url }}" draggable="false" alt="" />
</div>
</div>
<span class="setting alt-text has-description">
<label for="embed-image-settings-alt-text" class="name">Alternative Text</label>
<textarea id="embed-image-settings-alt-text" data-setting="alt" aria-describedby="alt-text-description"></textarea>
</span>
<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" target="_blank" rel="noopener">Learn how to describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
<span class="setting caption">
<label for="embed-image-settings-caption" class="name">Caption</label>
<textarea id="embed-image-settings-caption" data-setting="caption"></textarea>
</span>
<fieldset class="setting-group">
<legend class="name">Align</legend>
<span class="setting align">
<span class="button-group button-large" data-setting="align">
<button class="button" value="left">
Left </button>
<button class="button" value="center">
Center </button>
<button class="button" value="right">
Right </button>
<button class="button active" value="none">
</button>
</span>
</span>
</fieldset>
<fieldset class="setting-group">
<legend class="name">Link To</legend>
<span class="setting link-to">
<span class="button-group button-large" data-setting="link">
<button class="button" value="file">
Image URL </button>
<button class="button" value="custom">
Custom URL </button>
<button class="button active" value="none">
</button>
</span>
</span>
<span class="setting">
<label for="embed-image-settings-link-to-custom" class="name">URL</label>
<input type="text" id="embed-image-settings-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
</span>
</fieldset>
</script>
<script type="text/html" id="tmpl-image-details">
<div class="media-embed">
<div class="embed-media-settings">
<div class="column-settings">
<span class="setting alt-text has-description">
<label for="image-details-alt-text" class="name">Alternative Text</label>
<textarea id="image-details-alt-text" data-setting="alt" aria-describedby="alt-text-description">{{ data.model.alt }}</textarea>
</span>
<p class="description" id="alt-text-description"><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" target="_blank" rel="noopener">Learn how to describe the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
<span class="setting caption">
<label for="image-details-caption" class="name">Caption</label>
<textarea id="image-details-caption" data-setting="caption">{{ data.model.caption }}</textarea>
</span>
<h2>Display Settings</h2>
<fieldset class="setting-group">
<legend class="legend-inline">Align</legend>
<span class="setting align">
<span class="button-group button-large" data-setting="align">
<button class="button" value="left">
Left </button>
<button class="button" value="center">
Center </button>
<button class="button" value="right">
Right </button>
<button class="button active" value="none">
</button>
</span>
</span>
</fieldset>
<# if ( data.attachment ) { #>
<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
<span class="setting size">
<label for="image-details-size" class="name">Size</label>
<select id="image-details-size" class="size" name="size"
data-setting="size"
<# if ( data.userSettings ) { #>
data-user-setting="imgsize"
<# } #>>
<#
var size = data.sizes['thumbnail'];
if ( size ) { #>
<option value="thumbnail">
Thumbnail – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<#
var size = data.sizes['medium'];
if ( size ) { #>
<option value="medium">
Medium – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<#
var size = data.sizes['large'];
if ( size ) { #>
<option value="large">
Large – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<#
var size = data.sizes['full'];
if ( size ) { #>
<option value="full">
Full Size – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<#
var size = data.sizes['trp-custom-language-flag'];
if ( size ) { #>
<option value="trp-custom-language-flag">
Custom Language Flag – {{ size.width }} × {{ size.height }}
</option>
<# } #>
<option value="custom">
Custom Size </option>
</select>
</span>
<# } #>
<div class="custom-size wp-clearfix<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
<span class="custom-size-setting">
<label for="image-details-size-width">Width</label>
<input type="number" id="image-details-size-width" aria-describedby="image-size-desc" data-setting="customWidth" step="1" value="{{ data.model.customWidth }}" />
</span>
<span class="sep" aria-hidden="true">×</span>
<span class="custom-size-setting">
<label for="image-details-size-height">Height</label>
<input type="number" id="image-details-size-height" aria-describedby="image-size-desc" data-setting="customHeight" step="1" value="{{ data.model.customHeight }}" />
</span>
<p id="image-size-desc" class="description">Image size in pixels</p>
</div>
<# } #>
<span class="setting link-to">
<label for="image-details-link-to" class="name">Link To</label>
<select id="image-details-link-to" data-setting="link">
<# if ( data.attachment ) { #>
<option value="file">
Media File </option>
<option value="post">
Attachment Page </option>
<# } else { #>
<option value="file">
Image URL </option>
<# } #>
<option value="custom">
Custom URL </option>
<option value="none">
</option>
</select>
</span>
<span class="setting">
<label for="image-details-link-to-custom" class="name">URL</label>
<input type="text" id="image-details-link-to-custom" class="link-to-custom" data-setting="linkUrl" />
</span>
<div class="advanced-section">
<h2><button type="button" class="button-link advanced-toggle">Advanced Options</button></h2>
<div class="advanced-settings hidden">
<div class="advanced-image">
<span class="setting title-text">
<label for="image-details-title-attribute" class="name">Image Title Attribute</label>
<input type="text" id="image-details-title-attribute" data-setting="title" value="{{ data.model.title }}" />
</span>
<span class="setting extra-classes">
<label for="image-details-css-class" class="name">Image CSS Class</label>
<input type="text" id="image-details-css-class" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
</span>
</div>
<div class="advanced-link">
<span class="setting link-target">
<input type="checkbox" id="image-details-link-target" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>>
<label for="image-details-link-target" class="checkbox-label">Open link in a new tab</label>
</span>
<span class="setting link-rel">
<label for="image-details-link-rel" class="name">Link Rel</label>
<input type="text" id="image-details-link-rel" data-setting="linkRel" value="{{ data.model.linkRel }}" />
</span>
<span class="setting link-class-name">
<label for="image-details-link-css-class" class="name">Link CSS Class</label>
<input type="text" id="image-details-link-css-class" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
</span>
</div>
</div>
</div>
</div>
<div class="column-image">
<div class="image">
<img src="{{ data.model.url }}" draggable="false" alt="" />
<# if ( data.attachment && window.imageEdit ) { #>
<div class="actions">
<input type="button" class="edit-attachment button" value="Edit Original" />
<input type="button" class="replace-attachment button" value="Replace" />
</div>
<# } #>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="tmpl-image-editor">
<div id="media-head-{{ data.id }}"></div>
<div id="image-editor-{{ data.id }}"></div>
</script>
<script type="text/html" id="tmpl-audio-details">
<# var ext, html5types = {
mp3: wp.media.view.settings.embedMimes.mp3,
ogg: wp.media.view.settings.embedMimes.ogg
}; #>
<div class="media-embed media-embed-details">
<div class="embed-media-settings embed-audio-settings">
<audio style="visibility: hidden"
controls
class="wp-audio-shortcode"
width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
<#
if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
#> autoplay<#
}
if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
#> loop<#
}
#>
>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# } #>
<# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
<source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
<# } #>
<# if ( ! _.isEmpty( data.model.ogg ) ) { #>
<source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
<# } #>
<# if ( ! _.isEmpty( data.model.flac ) ) { #>
<source src="{{ data.model.flac }}" type="{{ wp.media.view.settings.embedMimes[ 'flac' ] }}" />
<# } #>
<# if ( ! _.isEmpty( data.model.m4a ) ) { #>
<source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
<# } #>
<# if ( ! _.isEmpty( data.model.wav ) ) { #>
<source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
<# } #>
</audio>
<# if ( ! _.isEmpty( data.model.src ) ) {
ext = data.model.src.split('.').pop();
if ( html5types[ ext ] ) {
delete html5types[ ext ];
}
#>
<span class="setting">
<label for="audio-details-source" class="name">URL</label>
<input type="text" id="audio-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
<button type="button" class="button-link remove-setting">Remove audio source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.mp3 ) ) {
if ( ! _.isUndefined( html5types.mp3 ) ) {
delete html5types.mp3;
}
#>
<span class="setting">
<label for="audio-details-mp3-source" class="name">MP3</label>
<input type="text" id="audio-details-mp3-source" readonly data-setting="mp3" value="{{ data.model.mp3 }}" />
<button type="button" class="button-link remove-setting">Remove audio source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.ogg ) ) {
if ( ! _.isUndefined( html5types.ogg ) ) {
delete html5types.ogg;
}
#>
<span class="setting">
<label for="audio-details-ogg-source" class="name">OGG</label>
<input type="text" id="audio-details-ogg-source" readonly data-setting="ogg" value="{{ data.model.ogg }}" />
<button type="button" class="button-link remove-setting">Remove audio source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.flac ) ) {
if ( ! _.isUndefined( html5types.flac ) ) {
delete html5types.flac;
}
#>
<span class="setting">
<label for="audio-details-flac-source" class="name">FLAC</label>
<input type="text" id="audio-details-flac-source" readonly data-setting="flac" value="{{ data.model.flac }}" />
<button type="button" class="button-link remove-setting">Remove audio source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.m4a ) ) {
if ( ! _.isUndefined( html5types.m4a ) ) {
delete html5types.m4a;
}
#>
<span class="setting">
<label for="audio-details-m4a-source" class="name">M4A</label>
<input type="text" id="audio-details-m4a-source" readonly data-setting="m4a" value="{{ data.model.m4a }}" />
<button type="button" class="button-link remove-setting">Remove audio source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.wav ) ) {
if ( ! _.isUndefined( html5types.wav ) ) {
delete html5types.wav;
}
#>
<span class="setting">
<label for="audio-details-wav-source" class="name">WAV</label>
<input type="text" id="audio-details-wav-source" readonly data-setting="wav" value="{{ data.model.wav }}" />
<button type="button" class="button-link remove-setting">Remove audio source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( html5types ) ) { #>
<fieldset class="setting-group">
<legend class="name">Add alternate sources for maximum HTML5 playback</legend>
<span class="setting">
<span class="button-large">
<# _.each( html5types, function (mime, type) { #>
<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
<# } ) #>
</span>
</span>
</fieldset>
<# } #>
<fieldset class="setting-group">
<legend class="name">Preload</legend>
<span class="setting preload">
<span class="button-group button-large" data-setting="preload">
<button class="button" value="auto">Auto</button>
<button class="button" value="metadata">Metadata</button>
<button class="button active" value="none"></button>
</span>
</span>
</fieldset>
<span class="setting-group">
<span class="setting checkbox-setting autoplay">
<input type="checkbox" id="audio-details-autoplay" data-setting="autoplay" />
<label for="audio-details-autoplay" class="checkbox-label">Autoplay</label>
</span>
<span class="setting checkbox-setting">
<input type="checkbox" id="audio-details-loop" data-setting="loop" />
<label for="audio-details-loop" class="checkbox-label">Loop</label>
</span>
</span>
</div>
</div>
</script>
<script type="text/html" id="tmpl-video-details">
<# var ext, html5types = {
mp4: wp.media.view.settings.embedMimes.mp4,
ogv: wp.media.view.settings.embedMimes.ogv,
webm: wp.media.view.settings.embedMimes.webm
}; #>
<div class="media-embed media-embed-details">
<div class="embed-media-settings embed-video-settings">
<div class="wp-video-holder">
<#
var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
h = ! data.model.height ? 360 : data.model.height;
if ( data.model.width && w !== data.model.width ) {
h = Math.ceil( ( h * w ) / data.model.width );
}
#>
<# var w_rule = '', classes = [],
w, h, settings = wp.media.view.settings,
isYouTube = isVimeo = false;
if ( ! _.isEmpty( data.model.src ) ) {
isYouTube = data.model.src.match(/youtube|youtu\.be/);
isVimeo = -1 !== data.model.src.indexOf('vimeo');
}
if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
w = settings.contentWidth;
} else {
w = data.model.width;
}
if ( w !== data.model.width ) {
h = Math.ceil( ( data.model.height * w ) / data.model.width );
} else {
h = data.model.height;
}
if ( w ) {
w_rule = 'width: ' + w + 'px; ';
}
if ( isYouTube ) {
classes.push( 'youtube-video' );
}
if ( isVimeo ) {
classes.push( 'vimeo-video' );
}
#>
<div style="{{ w_rule }}" class="wp-video">
<video controls
class="wp-video-shortcode {{ classes.join( ' ' ) }}"
<# if ( w ) { #>width="{{ w }}"<# } #>
<# if ( h ) { #>height="{{ h }}"<# } #>
<#
if ( ! _.isUndefined( data.model.poster ) && data.model.poster ) {
#> poster="{{ data.model.poster }}"<#
} #>
preload ="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"
<#
if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
#> autoplay<#
}
if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
#> loop<#
}
#>
>
<# if ( ! _.isEmpty( data.model.src ) ) {
if ( isYouTube ) { #>
<source src="{{ data.model.src }}" type="video/youtube" />
<# } else if ( isVimeo ) { #>
<source src="{{ data.model.src }}" type="video/vimeo" />
<# } else { #>
<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# }
} #>
<# if ( data.model.mp4 ) { #>
<source src="{{ data.model.mp4 }}" type="{{ settings.embedMimes[ 'mp4' ] }}" />
<# } #>
<# if ( data.model.m4v ) { #>
<source src="{{ data.model.m4v }}" type="{{ settings.embedMimes[ 'm4v' ] }}" />
<# } #>
<# if ( data.model.webm ) { #>
<source src="{{ data.model.webm }}" type="{{ settings.embedMimes[ 'webm' ] }}" />
<# } #>
<# if ( data.model.ogv ) { #>
<source src="{{ data.model.ogv }}" type="{{ settings.embedMimes[ 'ogv' ] }}" />
<# } #>
<# if ( data.model.flv ) { #>
<source src="{{ data.model.flv }}" type="{{ settings.embedMimes[ 'flv' ] }}" />
<# } #>
{{{ data.model.content }}}
</video>
</div>
<# if ( ! _.isEmpty( data.model.src ) ) {
ext = data.model.src.split('.').pop();
if ( html5types[ ext ] ) {
delete html5types[ ext ];
}
#>
<span class="setting">
<label for="video-details-source" class="name">URL</label>
<input type="text" id="video-details-source" readonly data-setting="src" value="{{ data.model.src }}" />
<button type="button" class="button-link remove-setting">Remove video source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.mp4 ) ) {
if ( ! _.isUndefined( html5types.mp4 ) ) {
delete html5types.mp4;
}
#>
<span class="setting">
<label for="video-details-mp4-source" class="name">MP4</label>
<input type="text" id="video-details-mp4-source" readonly data-setting="mp4" value="{{ data.model.mp4 }}" />
<button type="button" class="button-link remove-setting">Remove video source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.m4v ) ) {
if ( ! _.isUndefined( html5types.m4v ) ) {
delete html5types.m4v;
}
#>
<span class="setting">
<label for="video-details-m4v-source" class="name">M4V</label>
<input type="text" id="video-details-m4v-source" readonly data-setting="m4v" value="{{ data.model.m4v }}" />
<button type="button" class="button-link remove-setting">Remove video source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.webm ) ) {
if ( ! _.isUndefined( html5types.webm ) ) {
delete html5types.webm;
}
#>
<span class="setting">
<label for="video-details-webm-source" class="name">WEBM</label>
<input type="text" id="video-details-webm-source" readonly data-setting="webm" value="{{ data.model.webm }}" />
<button type="button" class="button-link remove-setting">Remove video source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.ogv ) ) {
if ( ! _.isUndefined( html5types.ogv ) ) {
delete html5types.ogv;
}
#>
<span class="setting">
<label for="video-details-ogv-source" class="name">OGV</label>
<input type="text" id="video-details-ogv-source" readonly data-setting="ogv" value="{{ data.model.ogv }}" />
<button type="button" class="button-link remove-setting">Remove video source</button>
</span>
<# } #>
<# if ( ! _.isEmpty( data.model.flv ) ) {
if ( ! _.isUndefined( html5types.flv ) ) {
delete html5types.flv;
}
#>
<span class="setting">
<label for="video-details-flv-source" class="name">FLV</label>
<input type="text" id="video-details-flv-source" readonly data-setting="flv" value="{{ data.model.flv }}" />
<button type="button" class="button-link remove-setting">Remove video source</button>
</span>
<# } #>
</div>
<# if ( ! _.isEmpty( html5types ) ) { #>
<fieldset class="setting-group">
<legend class="name">Add alternate sources for maximum HTML5 playback</legend>
<span class="setting">
<span class="button-large">
<# _.each( html5types, function (mime, type) { #>
<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
<# } ) #>
</span>
</span>
</fieldset>
<# } #>
<# if ( ! _.isEmpty( data.model.poster ) ) { #>
<span class="setting">
<label for="video-details-poster-image" class="name">Poster Image</label>
<input type="text" id="video-details-poster-image" readonly data-setting="poster" value="{{ data.model.poster }}" />
<button type="button" class="button-link remove-setting">Remove poster image</button>
</span>
<# } #>
<fieldset class="setting-group">
<legend class="name">Preload</legend>
<span class="setting preload">
<span class="button-group button-large" data-setting="preload">
<button class="button" value="auto">Auto</button>
<button class="button" value="metadata">Metadata</button>
<button class="button active" value="none"></button>
</span>
</span>
</fieldset>
<span class="setting-group">
<span class="setting checkbox-setting autoplay">
<input type="checkbox" id="video-details-autoplay" data-setting="autoplay" />
<label for="video-details-autoplay" class="checkbox-label">Autoplay</label>
</span>
<span class="setting checkbox-setting">
<input type="checkbox" id="video-details-loop" data-setting="loop" />
<label for="video-details-loop" class="checkbox-label">Loop</label>
</span>
</span>
<span class="setting" data-setting="content">
<#
var content = '';
if ( ! _.isEmpty( data.model.content ) ) {
var tracks = jQuery( data.model.content ).filter( 'track' );
_.each( tracks.toArray(), function( track, index ) {
content += track.outerHTML; #>
<label for="video-details-track-{{ index }}" class="name">Tracks (subtitles, captions, descriptions, chapters, or metadata)</label>
<input class="content-track" type="text" id="video-details-track-{{ index }}" aria-describedby="video-details-track-desc-{{ index }}" value="{{ track.outerHTML }}" />
<span class="description" id="video-details-track-desc-{{ index }}">
The srclang, label, and kind values can be edited to set the video track language and kind. </span>
<button type="button" class="button-link remove-setting remove-track">Remove video track</button><br />
<# } ); #>
<# } else { #>
<span class="name">Tracks (subtitles, captions, descriptions, chapters, or metadata)</span><br />
<em>There are no associated subtitles.</em>
<# } #>
<textarea class="hidden content-setting">{{ content }}</textarea>
</span>
</div>
</div>
</script>
<script type="text/html" id="tmpl-editor-gallery">
<# if ( data.attachments.length ) { #>
<div class="gallery gallery-columns-{{ data.columns }}">
<# _.each( data.attachments, function( attachment, index ) { #>
<dl class="gallery-item">
<dt class="gallery-icon">
<# if ( attachment.thumbnail ) { #>
<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" alt="{{ attachment.alt }}" />
<# } else { #>
<img src="{{ attachment.url }}" alt="{{ attachment.alt }}" />
<# } #>
</dt>
<# if ( attachment.caption ) { #>
<dd class="wp-caption-text gallery-caption">
{{{ data.verifyHTML( attachment.caption ) }}}
</dd>
<# } #>
</dl>
<# if ( index % data.columns === data.columns - 1 ) { #>
<br style="clear: both;" />
<# } #>
<# } ); #>
</div>
<# } else { #>
<div class="wpview-error">
<div class="dashicons dashicons-format-gallery"></div><p>No items found.</p>
</div>
<# } #>
</script>
<script type="text/html" id="tmpl-crop-content">
<img class="crop-image" src="{{ data.url }}" alt="Image crop area preview. Requires mouse interaction." />
<div class="upload-errors"></div>
</script>
<script type="text/html" id="tmpl-site-icon-preview">
<h2>Preview</h2>
<strong aria-hidden="true">As a browser icon</strong>
<div class="favicon-preview">
<img src="https://www.francescopepe.com/wp-admin/images/browser.png" class="browser-preview" width="182" height="" alt="" />
<div class="favicon">
<img id="preview-favicon" src="{{ data.url }}" alt="Preview as a browser icon" />
</div>
<span class="browser-title" aria-hidden="true"><# print( 'Francesco Pepe' ) #></span>
</div>
<strong aria-hidden="true">As an app icon</strong>
<div class="app-icon-preview">
<img id="preview-app-icon" src="{{ data.url }}" alt="Preview as an app icon" />
</div>
</script>
<div
class="wp-lightbox-overlay zoom"
data-wp-interactive="core/image"
data-wp-context='{}'
data-wp-bind--role="state.roleAttribute"
data-wp-bind--aria-label="state.currentImage.ariaLabel"
data-wp-bind--aria-modal="state.ariaModal"
data-wp-class--active="state.overlayEnabled"
data-wp-class--show-closing-animation="state.showClosingAnimation"
data-wp-watch="callbacks.setOverlayFocus"
data-wp-on--keydown="actions.handleKeydown"
data-wp-on-async--touchstart="actions.handleTouchStart"
data-wp-on--touchmove="actions.handleTouchMove"
data-wp-on-async--touchend="actions.handleTouchEnd"
data-wp-on-async--click="actions.hideLightbox"
data-wp-on-async-window--resize="callbacks.setOverlayStyles"
data-wp-on-async-window--scroll="actions.handleScroll"
tabindex="-1"
>
<button type="button" aria-label="Close" style="fill: var(--wp--preset--color--main)" class="close-button" data-no-translation-aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
</button>
<div class="lightbox-image-container">
<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.currentImage.currentSrc">
</figure>
</div>
<div class="lightbox-image-container">
<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.currentImage.figureStyles">
<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
</figure>
</div>
<div class="scrim" style="background-color: var(--wp--preset--color--base)" aria-hidden="true"></div>
<style data-wp-text="state.overlayStyles"></style>
</div><script src="https://www.francescopepe.com/wp-includes/js/underscore.min.js?ver=1.13.4" id="underscore-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/shortcode.min.js?ver=6.6.1" id="shortcode-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/backbone.min.js?ver=1.5.0" id="backbone-js"></script>
<script id="wp-util-js-extra">
var _wpUtilSettings = {"ajax":{"url":"\/wp-admin\/admin-ajax.php"}};
</script>
<script src="https://www.francescopepe.com/wp-includes/js/wp-util.min.js?ver=6.6.1" id="wp-util-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/wp-backbone.min.js?ver=6.6.1" id="wp-backbone-js"></script>
<script id="media-models-js-extra">
var _wpMediaModelsL10n = {"settings":{"ajaxurl":"\/wp-admin\/admin-ajax.php","post":{"id":0}}};
</script>
<script src="https://www.francescopepe.com/wp-includes/js/media-models.min.js?ver=6.6.1" id="media-models-js"></script>
<script id="wp-plupload-js-extra">
var pluploadL10n = {"queue_limit_exceeded":"You have attempted to queue too many files.","file_exceeds_size_limit":"%s exceeds the maximum upload size for this site.","zero_byte_file":"This file is empty. Please try another.","invalid_filetype":"Sorry, you are not allowed to upload this file type.","not_an_image":"This file is not an image. Please try another.","image_memory_exceeded":"Memory exceeded. Please try another smaller file.","image_dimensions_exceeded":"This is larger than the maximum size. Please try another.","default_error":"An error occurred in the upload. Please try again later.","missing_upload_url":"There was a configuration error. Please contact the server administrator.","upload_limit_exceeded":"You may only upload 1 file.","http_error":"Unexpected response from the server. The file may have been uploaded successfully. Check in the Media Library or reload the page.","http_error_image":"The server cannot process the image. This can happen if the server is busy or does not have enough resources to complete the task. Uploading a smaller image may help. Suggested maximum size is 2560 pixels.","upload_failed":"Upload failed.","big_upload_failed":"Please try uploading this file with the %1$sbrowser uploader%2$s.","big_upload_queued":"%s exceeds the maximum upload size for the multi-file uploader when used in your browser.","io_error":"IO error.","security_error":"Security error.","file_cancelled":"File canceled.","upload_stopped":"Upload stopped.","dismiss":"Dismiss","crunching":"Crunching\u2026","deleted":"moved to the Trash.","error_uploading":"\u201c%s\u201d has failed to upload.","unsupported_image":"This image cannot be displayed in a web browser. For best results convert it to JPEG before uploading.","noneditable_image":"This image cannot be processed by the web server. Convert it to JPEG or PNG before uploading.","file_url_copied":"The file URL has been copied to your clipboard"};
var _wpPluploadSettings = {"defaults":{"file_data_name":"async-upload","url":"\/wp-admin\/async-upload.php","filters":{"max_file_size":"2147483648b","mime_types":[{"extensions":"jpg,jpeg,jpe,gif,png,bmp,tiff,tif,webp,avif,ico,heic,asf,asx,wmv,wmx,wm,avi,divx,flv,mov,qt,mpeg,mpg,mpe,mp4,m4v,ogv,webm,mkv,3gp,3gpp,3g2,3gp2,txt,asc,c,cc,h,srt,csv,tsv,ics,rtx,css,vtt,dfxp,mp3,m4a,m4b,aac,ra,ram,wav,ogg,oga,flac,mid,midi,wma,wax,mka,rtf,pdf,class,tar,zip,gz,gzip,rar,7z,psd,xcf,doc,pot,pps,ppt,wri,xla,xls,xlt,xlw,mdb,mpp,docx,docm,dotx,dotm,xlsx,xlsm,xlsb,xltx,xltm,xlam,pptx,pptm,ppsx,ppsm,potx,potm,ppam,sldx,sldm,onetoc,onetoc2,onetmp,onepkg,oxps,xps,odt,odp,ods,odg,odc,odb,odf,wp,wpd,key,numbers,pages,json"}]},"heic_upload_error":true,"multipart_params":{"action":"upload-attachment","_wpnonce":"ad45e50884"}},"browser":{"mobile":false,"supported":true},"limitExceeded":false};
</script>
<script src="https://www.francescopepe.com/wp-includes/js/plupload/wp-plupload.min.js?ver=6.6.1" id="wp-plupload-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/jquery/ui/mouse.min.js?ver=1.13.3" id="jquery-ui-mouse-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/jquery/ui/sortable.min.js?ver=1.13.3" id="jquery-ui-sortable-js"></script>
<script id="mediaelement-core-js-before">
var mejsL10n = {"language":"en","strings":{"mejs.download-file":"Download File","mejs.install-flash":"You are using a browser that does not have Flash player enabled or installed. Please turn on your Flash player plugin or download the latest version from https:\/\/get.adobe.com\/flashplayer\/","mejs.fullscreen":"Fullscreen","mejs.play":"Play","mejs.pause":"Pause","mejs.time-slider":"Time Slider","mejs.time-help-text":"Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds.","mejs.live-broadcast":"Live Broadcast","mejs.volume-help-text":"Use Up\/Down Arrow keys to increase or decrease volume.","mejs.unmute":"Unmute","mejs.mute":"Mute","mejs.volume-slider":"Volume Slider","mejs.video-player":"Video Player","mejs.audio-player":"Audio Player","mejs.captions-subtitles":"Captions\/Subtitles","mejs.captions-chapters":"Chapters","mejs.none":"None","mejs.afrikaans":"Afrikaans","mejs.albanian":"Albanian","mejs.arabic":"Arabic","mejs.belarusian":"Belarusian","mejs.bulgarian":"Bulgarian","mejs.catalan":"Catalan","mejs.chinese":"Chinese","mejs.chinese-simplified":"Chinese (Simplified)","mejs.chinese-traditional":"Chinese (Traditional)","mejs.croatian":"Croatian","mejs.czech":"Czech","mejs.danish":"Danish","mejs.dutch":"Dutch","mejs.english":"English","mejs.estonian":"Estonian","mejs.filipino":"Filipino","mejs.finnish":"Finnish","mejs.french":"French","mejs.galician":"Galician","mejs.german":"German","mejs.greek":"Greek","mejs.haitian-creole":"Haitian Creole","mejs.hebrew":"Hebrew","mejs.hindi":"Hindi","mejs.hungarian":"Hungarian","mejs.icelandic":"Icelandic","mejs.indonesian":"Indonesian","mejs.irish":"Irish","mejs.italian":"Italian","mejs.japanese":"Japanese","mejs.korean":"Korean","mejs.latvian":"Latvian","mejs.lithuanian":"Lithuanian","mejs.macedonian":"Macedonian","mejs.malay":"Malay","mejs.maltese":"Maltese","mejs.norwegian":"Norwegian","mejs.persian":"Persian","mejs.polish":"Polish","mejs.portuguese":"Portuguese","mejs.romanian":"Romanian","mejs.russian":"Russian","mejs.serbian":"Serbian","mejs.slovak":"Slovak","mejs.slovenian":"Slovenian","mejs.spanish":"Spanish","mejs.swahili":"Swahili","mejs.swedish":"Swedish","mejs.tagalog":"Tagalog","mejs.thai":"Thai","mejs.turkish":"Turkish","mejs.ukrainian":"Ukrainian","mejs.vietnamese":"Vietnamese","mejs.welsh":"Welsh","mejs.yiddish":"Yiddish"}};
</script>
<script src="https://www.francescopepe.com/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=4.2.17" id="mediaelement-core-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/mediaelement/mediaelement-migrate.min.js?ver=6.6.1" id="mediaelement-migrate-js"></script>
<script id="mediaelement-js-extra">
var _wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/","classPrefix":"mejs-","stretching":"responsive","audioShortcodeLibrary":"mediaelement","videoShortcodeLibrary":"mediaelement"};
</script>
<script src="https://www.francescopepe.com/wp-includes/js/mediaelement/wp-mediaelement.min.js?ver=6.6.1" id="wp-mediaelement-js"></script>
<script id="wp-api-request-js-extra">
var wpApiSettings = {"root":"https:\/\/www.francescopepe.com\/en\/wp-json\/","nonce":"f30b20a687","versionString":"wp\/v2\/"};
</script>
<script src="https://www.francescopepe.com/wp-includes/js/api-request.min.js?ver=6.6.1" id="wp-api-request-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/clipboard.min.js?ver=2.0.11" id="clipboard-js"></script>
<script id="media-views-js-extra">
var _wpMediaViewsL10n = {"mediaFrameDefaultTitle":"Media","url":"URL","addMedia":"Add media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload files","uploadImagesTitle":"Upload images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Add media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Go to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","mine":"Mine","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items from your site.\nThis action cannot be undone.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n 'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk select","trashSelected":"Move to Trash","restoreSelected":"Restore from Trash","deletePermanently":"Delete permanently","errorDeleting":"Error in deleting the attachment.","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchLabel":"Search media","searchMediaLabel":"Search media","searchMediaPlaceholder":"Search media items...","mediaFound":"Number of media items found: %d","noMedia":"No media items found.","noMediaTryNewSearch":"No media items found. Try a different search.","attachmentDetails":"Attachment details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create gallery","editGalleryTitle":"Edit gallery","cancelGalleryTitle":"\u2190 Cancel gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image details","imageReplaceTitle":"Replace image","imageDetailsCancel":"Cancel edit","editImage":"Edit image","chooseImage":"Choose image","selectAndCrop":"Select and crop","skipCropping":"Skip cropping","cropImage":"Crop image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions: %1$s by %2$s pixels.","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio details","audioReplaceTitle":"Replace audio","audioAddSourceTitle":"Add audio source","audioDetailsCancel":"Cancel edit","videoDetailsTitle":"Video details","videoReplaceTitle":"Replace video","videoAddSourceTitle":"Add video source","videoDetailsCancel":"Cancel edit","videoSelectPosterImageTitle":"Select poster image","videoAddTrackTitle":"Add subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create audio playlist","editPlaylistTitle":"Edit audio playlist","cancelPlaylistTitle":"\u2190 Cancel audio playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create video playlist","editVideoPlaylistTitle":"Edit video playlist","cancelVideoPlaylistTitle":"\u2190 Cancel video playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to video Playlist","filterAttachments":"Filter media","attachmentsList":"Media list","settings":{"tabs":[],"tabUrl":"https:\/\/www.francescopepe.com\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video","application\/msword,application\/vnd.openxmlformats-officedocument.wordprocessingml.document,application\/vnd.ms-word.document.macroEnabled.12,application\/vnd.ms-word.template.macroEnabled.12,application\/vnd.oasis.opendocument.text,application\/vnd.apple.pages,application\/pdf,application\/vnd.ms-xpsdocument,application\/oxps,application\/rtf,application\/wordperfect,application\/octet-stream":"Documents","application\/vnd.apple.numbers,application\/vnd.oasis.opendocument.spreadsheet,application\/vnd.ms-excel,application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application\/vnd.ms-excel.sheet.macroEnabled.12,application\/vnd.ms-excel.sheet.binary.macroEnabled.12":"Spreadsheets","application\/x-gzip,application\/rar,application\/x-tar,application\/zip,application\/x-7z-compressed":"Archives"},"captions":true,"nonce":{"sendToEditor":"a9d643e167","setAttachmentThumbnail":"3ccaaa537a"},"post":{"id":0},"defaultProps":{"link":"none","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"oEmbedProxyUrl":"https:\/\/www.francescopepe.com\/en\/wp-json\/oembed\/1.0\/proxy","embedExts":["mp3","ogg","flac","m4a","wav","mp4","m4v","webm","ogv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","flac":"audio\/flac","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","flv":"video\/x-flv"},"contentWidth":null,"months":[{"year":"2024","month":"7","text":"July 2024"},{"year":"2024","month":"5","text":"May 2024"},{"year":"2024","month":"4","text":"April 2024"},{"year":"2020","month":"1","text":"January 2020"},{"year":"2019","month":"8","text":"August 2019"},{"year":"2019","month":"7","text":"July 2019"},{"year":"2018","month":"9","text":"September 2018"}],"mediaTrash":0,"infiniteScrolling":0}};
</script>
<script src="https://www.francescopepe.com/wp-includes/js/media-views.min.js?ver=6.6.1" id="media-views-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/media-editor.min.js?ver=6.6.1" id="media-editor-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/media-audiovideo.min.js?ver=6.6.1" id="media-audiovideo-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/comment-reply.min.js?ver=6.6.1" id="comment-reply-js" async data-wp-strategy="async"></script>
<script id="trp-dynamic-translator-js-extra">
var trp_data = {"trp_custom_ajax_url":"https:\/\/www.francescopepe.com\/wp-content\/plugins\/translatepress-multilingual\/includes\/trp-ajax.php","trp_wp_ajax_url":"https:\/\/www.francescopepe.com\/wp-admin\/admin-ajax.php","trp_language_to_query":"en_US","trp_original_language":"it_IT","trp_current_language":"en_US","trp_skip_selectors":["[data-no-translation]","[data-no-dynamic-translation]","[data-trp-translate-id-innertext]","script","style","head","trp-span","translate-press","[data-trp-translate-id]","[data-trpgettextoriginal]","[data-trp-post-slug]"],"trp_base_selectors":["data-trp-translate-id","data-trpgettextoriginal","data-trp-post-slug"],"trp_attributes_selectors":{"text":{"accessor":"outertext","attribute":false},"block":{"accessor":"innertext","attribute":false},"image_src":{"selector":"img[src]","accessor":"src","attribute":true},"submit":{"selector":"input[type='submit'],input[type='button'], input[type='reset']","accessor":"value","attribute":true},"placeholder":{"selector":"input[placeholder],textarea[placeholder]","accessor":"placeholder","attribute":true},"title":{"selector":"[title]","accessor":"title","attribute":true},"a_href":{"selector":"a[href]","accessor":"href","attribute":true},"button":{"accessor":"outertext","attribute":false},"option":{"accessor":"innertext","attribute":false},"aria_label":{"selector":"[aria-label]","accessor":"aria-label","attribute":true},"image_alt":{"selector":"img[alt]","accessor":"alt","attribute":true},"meta_desc":{"selector":"meta[name=\"description\"],meta[property=\"og:title\"],meta[property=\"og:description\"],meta[property=\"og:site_name\"],meta[property=\"og:image:alt\"],meta[name=\"twitter:title\"],meta[name=\"twitter:description\"],meta[name=\"twitter:image:alt\"],meta[name=\"DC.Title\"],meta[name=\"DC.Description\"],meta[property=\"article:section\"],meta[property=\"article:tag\"]","accessor":"content","attribute":true},"page_title":{"selector":"title","accessor":"innertext","attribute":false},"meta_desc_img":{"selector":"meta[property=\"og:image\"],meta[property=\"og:image:secure_url\"],meta[name=\"twitter:image\"]","accessor":"content","attribute":true}},"trp_attributes_accessors":["outertext","innertext","src","value","placeholder","title","href","aria-label","alt","content"],"gettranslationsnonceregular":"240e24328f","showdynamiccontentbeforetranslation":"","skip_strings_from_dynamic_translation":[],"skip_strings_from_dynamic_translation_for_substrings":{"href":["amazon-adsystem","googleads","g.doubleclick"]},"duplicate_detections_allowed":"100","trp_translate_numerals_opt":"no","trp_no_auto_translation_selectors":["[data-no-auto-translation]",".wp-block-code"]};
</script>
<script src="https://www.francescopepe.com/wp-content/plugins/translatepress-multilingual/assets/js/trp-translate-dom-changes.js?ver=2.8.1" id="trp-dynamic-translator-js"></script>
<script id="wp-block-template-skip-link-js-after">
( function() {
var skipLinkTarget = document.querySelector( 'main' ),
sibling,
skipLinkTargetID,
skipLink;
// Early exit if a skip-link target can't be located.
if ( ! skipLinkTarget ) {
return;
}
/*
* Get the site wrapper.
* The skip-link will be injected in the beginning of it.
*/
sibling = document.querySelector( '.wp-site-blocks' );
// Early exit if the root element was not found.
if ( ! sibling ) {
return;
}
// Get the skip-link target's ID, and generate one if it doesn't exist.
skipLinkTargetID = skipLinkTarget.id;
if ( ! skipLinkTargetID ) {
skipLinkTargetID = 'wp--skip-link--target';
skipLinkTarget.id = skipLinkTargetID;
}
// Create the skip link.
skipLink = document.createElement( 'a' );
skipLink.classList.add( 'skip-link', 'screen-reader-text' );
skipLink.href = '#' + skipLinkTargetID;
skipLink.innerHTML = 'Skip to content';
// Inject the skip link.
sibling.parentElement.insertBefore( skipLink, sibling );
}() );
</script>
<script id="mkaz-code-syntax-prism-js-js-extra">
var prism_settings = {"pluginUrl":"https:\/\/www.francescopepe.com\/wp-content\/plugins\/code-syntax-block\/"};
</script>
<script src="https://www.francescopepe.com/wp-content/plugins/code-syntax-block/assets/prism/prism.js?ver=1715219736" id="mkaz-code-syntax-prism-js-js"></script>
<script src="https://www.francescopepe.com/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.14.0" id="regenerator-runtime-js"></script>
<script id="surecart-components-js-extra">
var surecartComponents = {"url":"https:\/\/www.francescopepe.com\/wp-content\/plugins\/surecart\/dist\/components\/surecart\/surecart.esm.js?ver=1722000381"};
var scData = {"cdn_root":"https:\/\/surecart.com\/cdn-cgi\/image","root_url":"https:\/\/www.francescopepe.com\/en\/wp-json\/","plugin_url":"https:\/\/www.francescopepe.com\/wp-content\/plugins\/surecart","api_url":"https:\/\/api.surecart.com\/v1\/","currency":"eur","theme":"light","pages":{"dashboard":"https:\/\/www.francescopepe.com\/en\/dashboard-2\/","checkout":"https:\/\/www.francescopepe.com\/en\/checkout\/"},"page_id":"","nonce":"f30b20a687","nonce_endpoint":"https:\/\/www.francescopepe.com\/wp-admin\/admin-ajax.php?action=sc-rest-nonce","recaptcha_site_key":"","claim_url":"","admin_url":"https:\/\/www.francescopepe.com\/wp-admin\/","getting_started_url":"https:\/\/www.francescopepe.com\/wp-admin\/admin.php?page=sc-getting-started","user_permissions":{"manage_sc_shop_settings":false},"is_account_connected":"1"};
var scIcons = {"path":"https:\/\/www.francescopepe.com\/wp-content\/plugins\/surecart\/dist\/icon-assets"};
var surecartComponents = {"url":"https:\/\/www.francescopepe.com\/wp-content\/plugins\/surecart\/dist\/components\/surecart\/surecart.esm.js?ver=1722000381"};
var scData = {"cdn_root":"https:\/\/surecart.com\/cdn-cgi\/image","root_url":"https:\/\/www.francescopepe.com\/en\/wp-json\/","plugin_url":"https:\/\/www.francescopepe.com\/wp-content\/plugins\/surecart","api_url":"https:\/\/api.surecart.com\/v1\/","currency":"eur","theme":"light","pages":{"dashboard":"https:\/\/www.francescopepe.com\/en\/dashboard-2\/","checkout":"https:\/\/www.francescopepe.com\/en\/checkout\/"},"page_id":"1","nonce":"f30b20a687","nonce_endpoint":"https:\/\/www.francescopepe.com\/wp-admin\/admin-ajax.php?action=sc-rest-nonce","recaptcha_site_key":"","claim_url":"","admin_url":"https:\/\/www.francescopepe.com\/wp-admin\/","getting_started_url":"https:\/\/www.francescopepe.com\/wp-admin\/admin.php?page=sc-getting-started","user_permissions":{"manage_sc_shop_settings":false},"is_account_connected":"1"};
var scIcons = {"path":"https:\/\/www.francescopepe.com\/wp-content\/plugins\/surecart\/dist\/icon-assets"};
</script>
<script src="https://www.francescopepe.com/wp-content/plugins/surecart/dist/components/static-loader.js?ver=a63fafc54e2b993044b3-2.29.2" id="surecart-components-js"></script>
<script id="wp-consent-api-js-extra">
var consent_api = {"consent_type":"optin","waitfor_consent_hook":"","cookie_expiration":"30","cookie_prefix":"wp_consent"};
</script>
<script src="https://www.francescopepe.com/wp-content/plugins/wp-consent-api/assets/js/wp-consent-api.min.js?ver=1.0.7" id="wp-consent-api-js"></script>
<script id="cmplz-cookiebanner-js-extra">
var complianz = {"prefix":"cmplz_","user_banner_id":"1","set_cookies":[],"block_ajax_content":"","banner_version":"20","version":"7.1.0","store_consent":"","do_not_track_enabled":"","consenttype":"optin","region":"eu","geoip":"","dismiss_timeout":"","disable_cookiebanner":"","soft_cookiewall":"","dismiss_on_scroll":"","cookie_expiry":"365","url":"https:\/\/www.francescopepe.com\/en\/wp-json\/complianz\/v1\/","locale":"lang=en&locale=en_US","set_cookies_on_root":"","cookie_domain":"","current_policy_id":"30","cookie_path":"\/","categories":{"statistics":"statistics","marketing":"marketing"},"tcf_active":"","placeholdertext":"Click to accept {category} cookies and enable this content","css_file":"https:\/\/www.francescopepe.com\/wp-content\/uploads\/complianz\/css\/banner-{banner_id}-{type}.css?v=20","page_links":{"eu":{"cookie-statement":{"title":"Cookie Policy ","url":"https:\/\/www.francescopepe.com\/en\/cookie-policy-eu\/"},"privacy-statement":{"title":"Privacy Policy","url":"https:\/\/www.francescopepe.com\/en\/privacy-policy\/"}}},"tm_categories":"","forceEnableStats":"","preview":"","clean_cookies":"","aria_label":"Click to accept {category} cookies and enable this content"};
</script>
<script defer src="https://www.francescopepe.com/wp-content/plugins/complianz-gdpr/cookiebanner/js/complianz.min.js?ver=1717145349" id="cmplz-cookiebanner-js"></script>
</body>
</html>
