So i've recently picked up Sublime and it's the best editor I've ever had, hands down. That said, I'm trying to write a custom snippet for an HTML page framework, but can't seem to get it to insert properly in Sublime. It isn't kicking back any errors, and Sublime recognizes that it exists, but when I try to insert it, it doesn't do anyting....am I missing something in the snippet code here?
I used the documentation here while I was writing it.
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>${1:WebsiteName}</title>
<meta charset="utf-8" >
<meta http-equiv="default-style" content="pref" >
<!--disables caching of the site-->
<meta http-equiv="pragma" content="no-cache" >
<!--other sites cannot display this page in a frame-->
<meta http-equiv="window-target" content="_top" >
<!--must be completed for SEO-->
<meta name="keywords" content="${3:keywords...}" >
<!--must be completed for SEO-->
<meta name="description" content="${4:description...}" >
<meta name="author" content="${5:your_name}" >
<!--allows bots to index website-->
<meta name="robots" content="index, follow" >
<meta name="copyright" content="${6:copyright}" >
<!--sets the revisit frequency for search bots-->
<meta name="revisit-after" content="14 days">
<!--prevents dup entries in open directory project DMOZ-->
<meta name="googlebot" content="noodp">
<!--used for age appropriateness, values: {general} {mature} {restricted} {14 years} {safe for kids}-->
<meta name="rating" content="general">
<meta name="reply-to" content="${7:webmasteremail#yoursite.com}">
<!--use the content of this to indicate the developer who created the page-->
<meta name="web_author" content="${8:your_name}">
<!--controls caching permissions, values: {Public} {Private} {no-cache} {no-Store}-->
<meta name="Cache-control" content="Public">
<!--cookie data should be dynamically handled by PHP if needed-->
<!-- <meta name="Set-Cookie" content="" -->
<meta name="host" content="Internet Connection Inc">
<meta name="host-admin" content="${9:webmaster_name}">
<meta name="contactName" content="${10:customer_name}">
<meta name="contactOrganization" content="${11:business_name}">
<meta name="contactStreetAddress1" content="${12:business_address}">
<meta name="contactZipcode" content="${13:business_zipcode}">
<meta name="contactCity" content="${14:business_city}">
<meta name="contactCountry" content="${15:business_country}">
<meta name="contactPhoneNumber" content="${16:business_phone}">
<meta name="contactFaxNumber" content="${17:business_fax}">
<meta name="contactNetworkAddress" content="${18:business_email}">
<meta name="linkage" content="${19:website_url_absolute}">
<link id="pref" rel="stylesheet" type="text/css" href="${20:CSS_Location}" >
<!--[if lte IE 6]>
<link rel="stylesheet" href="${21:CSS_Location}">
<!--[endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html15.js"></script>
<!--[endif]-->
</head>
<body>
<?php include("${22:Header_location"); ?>
<!--main HTML content goes here-->
<?php include("${23:Footer_location"); ?>
</body>
</html>
]]></content>
<tabTrigger>htf</tabTrigger>
<scope>text.html</scope>
<description></description>
</snippet>
Part 22 and 23 are not ended correctly, number 2 is missing and number 7 is strange:
content="${7:webmasteremail#yoursite.com}"
Which should be:
content="${7:webmasteremail}#yoursite.com"
This should work for you (notice that I've changed some names and made them all uppercase, but the functionality is the same):
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>${1:WEBSITENAME}</title>
<meta charset="utf-8" >
<meta http-equiv="default-style" content="pref" >
<!--disables caching of the site-->
<meta http-equiv="pragma" content="no-cache" >
<!--other sites cannot display this page in a frame-->
<meta http-equiv="window-target" content="${2:WINDOW_NAME}" >
<!--must be completed for SEO-->
<meta name="keywords" content="${3:KEYWORDS}" >
<!--must be completed for SEO-->
<meta name="description" content="${4:DESCRIPTION}" >
<meta name="author" content="${5:YOUR_NAME}" >
<!--allows bots to index website-->
<meta name="robots" content="index, follow" >
<meta name="copyright" content="${6:COPYRIGHT}" >
<!--sets the revisit frequency for search bots-->
<meta name="revisit-after" content="14 days">
<!--prevents dup entries in open directory project DMOZ-->
<meta name="googlebot" content="noodp">
<!--used for age appropriateness, values: {general} {mature} {restricted} {14 years} {safe for kids}-->
<meta name="rating" content="general">
<meta name="reply-to" content="${7:WEBMASTEREMAIL}#yoursite.com">
<!--use the content of this to indicate the developer who created the page-->
<meta name="web_author" content="${8:YOUR_NAME}">
<!--controls caching permissions, values: {Public} {Private} {no-cache} {no-Store}-->
<meta name="Cache-control" content="Public">
<!--cookie data should be dynamically handled by PHP if needed-->
<!-- <meta name="Set-Cookie" content="" -->
<meta name="host" content="Internet Connection Inc">
<meta name="host-admin" content="${9:WEBMASTER_NAME}">
<meta name="contactName" content="${10:CUSTOMER_NAME}">
<meta name="contactOrganization" content="${11:BUSINESS_NAME}">
<meta name="contactStreetAddress1" content="${12:BUSINESS_ADDRESS}">
<meta name="contactZipcode" content="${13:BUSINESS_ZIPCODE}">
<meta name="contactCity" content="${14:BUSINESS_CITY}">
<meta name="contactCountry" content="${15:BUSINESS_COUNTRY}">
<meta name="contactPhoneNumber" content="${16:BUSINESS_PHONE}">
<meta name="contactFaxNumber" content="${17:BUSINESS_FAX}">
<meta name="contactNetworkAddress" content="${18:BUSINESS_EMAIL}">
<meta name="linkage" content="${19:WEBSITE_URL_ABSOLUTE}">
<link id="pref" rel="stylesheet" type="text/css" href="${20:CSS_LOCATION}" >
<!--[if lte IE 6]>
<link rel="stylesheet" href="${21:CSS_LOCATION2}">
<!--[endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html15.js"></script>
<!--[endif]-->
</head>
<body>
<?php include("${22:HEADER_LOCATION}"); ?>
<!--main HTML content goes here-->
<?php include("${23:FOOTER_LOCATION}"); ?>
</body>
</html>
]]></content>
<tabTrigger>htf</tabTrigger>
<scope>text.html</scope>
<description></description>
</snippet>
Related
I'm working on a .NET and Angular webapp, with ngx-sharebuttons ShareButtonModule. When I want to get a link of the post or share it via WhatsApp, the meta tags are not being updated properly. I am setting up default meta tags in index.html:
index.html
<html lang="pl">
<head>
<meta charset="utf-8">
<title>DDM - Daily Dose Of Memes</title>
<base href="/">
<meta name="description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<!-- <meta name="keywords" content="Memy, hard, obrazki, filmiki, czarny humor"> -->
<meta name="keywords" content>
<meta name="url" content="https://ddmemes.com.pl">
<meta name="title" content="DDM - Daily Dose Of Memes">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" href="./assets/favicon.ico">
<!-- og meta tags for link share -->
<meta property="og:title" content="DDM - Daily Dose Of Memes"/>
<meta property="og:url" content="https://ddmemes.com.pl"/>
<meta property="og:image" content="https://res.cloudinary.com/duj1ftjtp/image/upload/v1659954431/LogoImage.png"/>
<meta property="og:description" content="Memy na miarę Twoich możliwości. Ty też możesz dać z siebie 30%! Zbiór obrazków, gifów i filmików dla sympatyków czarnego humoru.">
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#000000">
</head>
<body>
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>
Later, when the user wants to share a post's component, it appears that the meta attributes are not being updated properly. First, I am setting the data via share-buttons modal:
meme-card.component.html
<share-buttons theme="modern-dark"
[include]="['copy', 'facebook', 'messenger', 'reddit', 'telegram', 'twitter', 'whatsapp']"
[showIcon]="true"
[showText]="true"
[autoSetMeta]="false"
image="{{meme?.url}}"
url="https://ddmemes.com.pl/meme/{{meme.id}}/{{convertText(meme.title)}}"
description="{{meme?.title}}"
title="{{meme?.title}}"
class="pt-3">
</share-buttons>
Also, I am updating the meta tags themselves in ngOnInit via below code:
meme-card.component.ts
changeMetaTags() {
this.meta?.updateTag(
{ property: 'og:title', content: this.meme?.title },
);
this.meta?.addTag(
{ name: 'title', content: this.meme?.title}
);
this.meta?.updateTag(
{ name: 'description', content: this.meme?.title },
);
this.meta?.updateTag(
{ property: 'og:image', content: this.meme?.url },
);
}
Although everything appears to be updated properly upon inspecting a page, when I send the link to somebody or upon checking in https://www.heymeta.com/, it appears that the data still remains default, equal to the one given in index.html. The only thing that seems to be updated is url.
Is there something I'm missing here? I'd appreciate any help.
Cheers
I would like to change the basic hmtl structure in VS code that is loaded with [! + tab] or [ctrl + space]
What I have when I press [! tab]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
What I would like to set it to for example :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<title>Document</title>
</head>
<body>
</body>
</html>
I tried looking into the html snippets parameters but didn't find anything.
To overwrite existing emmets in VS Code:
Create a snippets.json file, add this JSON structure and save it somewhere on your hard disk.
{
"html": {
"snippets": {
"!": "{<!DOCTYPE html>}+html[lang='fr']>(head>meta:utf+meta:vp+title{${2:Document}}+link[rel='stylesheet' type='text/css' media='screen' href='main.css'])+body"
}
},
"css": {
"snippets": {}
}
}
Open the VS Code settings (Code → Preferences → Settings) and search for “Emmet Extensions Path”.
Click “Add Item”, enter the path to the folder where you’ve saved the snippets.json file you’ve created earlier, and press “OK”.
Now try ! + TAB ;)
To learn more about how custom snippets work, check this article
I am working on a project in which i have to scrape images related to a keyword from a image site. When i search for any keyword on imgur(My choice for the image site), the results are shown as small thumbnails which when clicked open the main article with various images on it. My program for now makes a list of various links in the thumbnails and opens them one by one to download all images in it.
My problem is that when i inspect image element on the article it shows that the image is in class ".image-placeholder" but when i download the html by request method it does not show any such class available.
One of the examples is that when i request response object of article https://imgur.com/gallery/rfEAUDW.
I get below html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width,initial-scale=1" name="viewport"/>
<meta content="funny, image, gif, gifs, memes, jokes, image upload, upload image, lol, humor, vote, comment, share, imgur, imgur.com, wallpaper" name="keywords">
<meta content="Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with funny jokes, trending memes, entertaining gifs, inspiring stories, viral videos, and so much more." name="description">
<meta content="Copyright 2020 Imgur, Inc." name="copyright"/>
<link href="https://s.imgur.com/images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"/>
<link href="https://s.imgur.com/images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png"/>
<link href="https://s.imgur.com/images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"/>
<link href="https://s.imgur.com/images/favicon-152.png" rel="apple-touch-icon-precomposed"/>
<meta content="#2cd63c" name="msapplication-TileColor"/>
<meta content="https://s.imgur.com/images/favicon-144.png" name="msapplication-TileImage"/>
<link href="https://m.imgur.com/" media="only screen and (max-width: 640px)" rel="alternate"/>
<meta content="834554521765408b9effdc758b69c5ee" name="p:domain_verify">
<meta content="Imgur" property="og:site_name">
<meta content="12331492" property="fb:admins"/>
<meta content="12301369" property="fb:admins"/>
<meta content="127621437303857" property="fb:app_id"/>
<meta content="imgur://imgur.com/?from=fbreferral" property="al:android:url"/>
<meta content="Imgur" property="al:android:app_name"/>
<meta content="com.imgur.mobile" property="al:android:package"/>
<meta content="imgur://imgur.com/?from=fbreferral" property="al:ios:url"/>
<meta content="639881495" property="al:ios:app_store_id"/>
<meta content="Imgur" property="al:ios:app_name"/>
<meta content="https://imgur.com/" property="al:web:url"/>
<meta content="#imgur" name="twitter:site"/>
<meta content="imgur.com" name="twitter:domain"/>
<meta content="com.imgur.mobile" name="twitter:app:id:googleplay"/>
<meta content="Imgur" property="author"/>
<meta content="Imgur" property="article:author"/>
<meta content="https://www.facebook.com/imgur" property="article:publisher"/>
<title>
Drawing Model (for you all naruto fans) - Imgur
</title>
<meta content="https://imgur.com/gallery/rfEAUDW" data-react-helmet="true" property="og:url"/>
<meta content="https://i.imgur.com/rfEAUDWh.jpg" data-react-helmet="true" name="twitter:image"/>
<link href="https://api.imgur.com/oembed.json?url=https://imgur.com/gallery/rfEAUDW" rel="alternate" title="Drawing Model (for you all naruto fans) - Imgur" type="application/json+oembed"/>
<link href="https://api.imgur.com/oembed.xml?url=https://imgur.com/gallery/rfEAUDW" rel="alternate" title="Drawing Model (for you all naruto fans) - Imgur" type="application/xml+oembed"/>
<meta content="funny" data-react-helmet="true" property="article:tag"/>
<meta content="" data-react-helmet="true" property="article:tag"/>
<meta content="" data-react-helmet="true" property="article:tag"/>
<meta content="" data-react-helmet="true" property="article:tag"/>
<meta content="" data-react-helmet="true" property="article:tag"/>
<meta href="https://imgur.com/gallery/rfEAUDW" rel="canonical"/>
<meta content="none" name="robots"/>
<meta content="600" data-react-helmet="true" property="og:image:width"/>
<meta content="315" data-react-helmet="true" property="og:image:height"/>
<meta content="https://i.imgur.com/rfEAUDW.jpg?fb" data-react-helmet="true" property="og:image"/>
<meta content="article" data-react-helmet="true" property="og:type"/>
<meta content="summary_large_image" data-react-helmet="true" name="twitter:card"/>
<script>
dataLayer=[];var pbjs=pbjs||{};pbjs.que=pbjs.que||[]
</script>
<script>
!function(e,t,a,n,g){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var m=t.getElementsByTagName(a)[0],r=t.createElement(a);r.async=!0,r.src="//www.googletagmanager.com/gtm.js?id=GTM-M6N38SF",m.parentNode.insertBefore(r,m)}(window,document,"script","dataLayer")
</script>
<link href="https://s.imgur.com/desktop-assets/css/styles.ebc99cf807f6b7c8c39c.css" rel="stylesheet"/>
</meta>
</meta>
</meta>
</meta>
</head>
<body>
<noscript>
<iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-M6N38SF" style="display:none;visibility:hidden" width="0">
</iframe>
</noscript>
<noscript>
If you're seeing this message, that means
<strong>
JavaScript has been disabled on your browser
</strong>
, please
<strong>
enable JS
</strong>
to make Imgur work.
</noscript>
<div id="root">
</div>
<script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-6671908-15">
</script>
<script>
function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-6671908-15",{send_page_view:!1})
</script>
<script class="abp" src="https://s.imgur.com/min/px.js?ch=1">
</script>
<script class="abp" src="https://s.imgur.com/min/px.js?ch=2">
</script>
<script src="https://s.imgur.com/desktop-assets/js/main.2e34f379cd8d1a3ca8b1.js">
</script>
</body>
</html>
Thanks in advance for all your help.
My code is:
import requests
from bs4 import BeautifulSoup
from pathlib import Path
import os
#UserInput for phrase to search.
phrase = input('Enter text to search: ')
finalphrase = phrase.replace(" ", "+")
print('Searching for ' + finalphrase + '.....')
#makes soup of the search page and collect all results as galleryElem
site = 'https://imgur.com'
res = requests.get(site + '/search?q=' + phrase)
soup = BeautifulSoup(res.text, 'html.parser')
galleryElem = soup.select('.image-list-link')
#For each thumbnail will open it and download its content
for n in range(len(galleryElem)):
imageLink = galleryElem[n].get('href')
res1 = requests.get(site+imageLink)
soup1 = BeautifulSoup(res1.text, 'html.parser')
imageElem = soup.select('.image-placeholder')
for m in range(len(imageElem)):
image = imageElem[m].get('src')
img = open(os.path.join(finalphrase, number, os.path.basename(image), 'wb'))
number += 1
for a in image.iter_content(100000):
img.write(a)
img.close()
You didn't use selenium. You used requests and bs4. If you have used selenium, you wouldn't have met this problem, because selenium executes javascript for you, while requests doesn't. And the website seems to load images with javascript.
An example with selenium can be found here.
You can check documentations of selenium for more information.
I read a lot of posts about this but none of the solutions seems to work in my case. I learned a lot of stuff reading all these but my problem is still there.
I always get this error message :
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
But in my source code there is :
<meta property="og:image" content="http://www.shootmeagain.com/photo/Y2013/3769/saintvitus-oslo_30-03-2013_17.jpg" />
All my header is here :
<!DOCTYPE html><html xmlns:og="http://ogp.me/ns#"><head><title>PHOTOS : Saint Vitus à Oslo (Rockefeller) le 30-03-2013 | Shoot Me Again Webzine.</title>
<meta charset="UTF-8">
<link rel=canonical href='http://www.shootmeagain.com/photos/3769_saintvitus_oslo_30-03-2013'>
<meta property="og:description" content="PHOTOS : Saint Vitus à Oslo (Rockefeller) le 30-03-2013 | Shoot Me Again Webzine." />
<meta property="og:title" content="PHOTOS : Saint Vitus à Oslo (Rockefeller) le 30-03-2013 | Shoot Me Again Webzine." />
<meta property="og:url" content="http://www.shootmeagain.com/photos/3769_saintvitus_oslo_30-03-2013" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.shootmeagain.com/photo/Y2013/3769/saintvitus-oslo_30-03-2013_17.jpg" />
<meta property='fb:admins' content='erikshootmeagain' />
<meta property='fb:app_id' content='146373435406736' />
<link rel=stylesheet href='http://www.shootmeagain.com/layout.css' type='text/css'>
<link rel=stylesheet href='http://www.shootmeagain.com/layout600.css' type='text/css'>
<link rel=stylesheet href='http://www.shootmeagain.com/layout900.css' type='text/css'>
<link rel=stylesheet href='http://www.shootmeagain.com/layout1200.css' type='text/css'>
<link rel=stylesheet href='http://www.shootmeagain.com/layout1600.css' type='text/css'>
<link rel=stylesheet href='http://www.shootmeagain.com/layout1900.css' type='text/css'>
<link rel=stylesheet href='http://www.shootmeagain.com/layoutheight.css' type='text/css'>
<link rel=stylesheet href='http://www.shootmeagain.com/js/jquery-ui-1.11.3.custom/jquery-ui.css' type='text/css'>
<link rel=stylesheet href='http://www.shootmeagain.com/js/jquery-ui-1.11.3.custom/jquery-ui.theme.css' type='text/css'>
<link rel="shortcut icon" href="http://www.shootmeagain.com/images/favicon.ico">
<link rel="icon" type="image/gif" href="http://www.shootmeagain.com/images/animated_favicon1.gif">
<meta name='keywords' content='webzine, chroniques, photos, interview, concours, mp3, video, hardcore, rock, emo, screamo, metal, punk, garage'>
<meta name='author' content='ChamO'>
<meta name='publisher' content='ChamO'>
<meta name='viewport' content='width=device-width'>
<meta http-equiv="content-language" content="fr">
<link href='http://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
<script language="javascript" type="text/javascript" src="http://www.shootmeagain.com/js/jquery-1.11.2.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.shootmeagain.com/js/jquery-ui-1.11.3.custom/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="http://www.shootmeagain.com/js/editPost.js"></script>
</head>
Here is an URL for example : http://www.shootmeagain.com/photos/3769_saintvitus_oslo_30-03-2013
Does anybody have an idea ?
Thanks a lot !
Erik
You can fix this issue by adding the og:image width, height, alt and secure_url properties on separate lines:
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="description_of_site">
<meta property="og:image:secure_url" content="https://your_domain/my_og_image.png">
That should pass.
FB also complains if the fb:app_id is missing too, but you can leave that out.
Why I'm getting this error in one of my jspx layouts
So after digging a little I found the reason
Here is my test template to reproduce it
<html
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:tiles="http://tiles.apache.org/tags-tiles"
xmlns:spring="http://www.springframework.org/tags"
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util"
xmlns:fb="http://www.facebook.com/2008/fbml" >
<jsp:output doctype-root-element="HTML" doctype-system="about:legacy-compat" />
<jsp:directive.page contentType="text/html;charset=UTF-8" />
<jsp:directive.page pageEncoding="UTF-8" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<spring:url context="" value="resources/js/test.js" var="testX_js" />
<script src="${test_js}" type="text/javascript" charset="utf-8" ><!-- //required for FF3 and Opera --></script>
<spring:message code="application_name" var="app_name" htmlEscape="false"/>
<title><spring:message code="welcome_h3" arguments="${app_name}" /></title>
</head>
<body>
<span>TEST</span>
</body>
</html>
Now look when the js file is included "testX_js"
<spring:url context="" value="resources/js/slideshow.js" var="testX_js" />
<script src="${test_js}" type="text/javascript" charset="utf-8" ><!-- //required for FF3 and Opera --></script>
The name testX_js does not match test_js and this was the cause of an error.
I had to make that typo when including new script
So folks make sure that the variable with the url to your script is not empty
Cheers