How to extract the img src value of an <img ... /> tag from a string in velocity - velocity

I am getting an RSS feed that contains img tags and in my backend velocity script, I want to extract the img src.
So, the RSS feed includes at a paragraph with an img tag like this:
<p>
<img alt="" src="//path1/path2/path3/imagename.jpg?x=1499453513435" style="margin: 5px; width: 313px; height: 400px; float: left;" />
Some text goes here...
</p>
The above is an example of the description element of the RSS feed.
I am trying to extract the img src.
I have tried something like:
#set($index1 = $!content.description.indexOf("<[^>]*>"))
#set($index2 = $!content.description.indexOf("/>"))
#set($index2 = $index2 + 2)
#set($imgsrc="$!content.description.substring($index1, $index2))

Here is what I ended using to successfully extract the image path (including the image name) of the img src value:
#set($index1 = $!content.description.indexOf("src="))
#set($index1 = $index1 + 5)
#set($index2 = $!content.description.indexOf("?x="))
#set($index2 = $index2)
#set($imgsrc=$!content.description.substring($index1, $index2))
I first explored
#set($index1 = $!content.description.indexOf("src="))
#set($index1 = $index1 + 5)
#set($index2 = $!content.description.indexOf("?x="))
#set($index2 = $index2)
#set($imgsrc=$!content.description.substring($index1, $index2))
and it worked, but I changed to the alternative after considering that the image extension may not necessarily be .jpg

Related

How to optimize the size of instagram images in a stream

I want to optimize the size of the images sent by the Instagram feed of a module on my prestashop shop.
How can I request images in smaller sizes, like 134x134px or 150x150px ...
My origin picture is :
https://scontent-cdt1-1.cdninstagram.com/vp/2c273bea214e232de2a2d6ded00cfd57/5D306C5B/t51.2885-15/sh0.08/e35/c135.0.809.809/s640x640/52890210_803725976651019_6529311483719815543_n.jpg?_nc_ht=scontent-cdt1-1.cdninstagram.com
But i will just, this picture is resized in HTML or CSS from 640x640 to 135x135.
Serving a scaled image could save 91.4KiB (95% reduction).
The imagecopyresampled() PHP function is perfect for this task, here is an example:
<?php
$filename = './test-instagram-orig.jpg';
$dest_filename = './test-instagram-resized.jpg';
$new_width = 150;
$new_height = 150;
$my_instagram_image = file_put_contents($filename, file_get_contents('https://scontent-sjc3-1.cdninstagram.com/vp/9844eb2fd4f4012141feef47d2eb97b2/5D389B06/t51.2885-15/sh0.08/e35/s640x640/10249289_1618492008409419_392402572_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com'));
list($width, $height) = getimagesize($filename);
$image_p = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
imagejpeg($image_p, $dest_filename, 100);
imagedestroy($image_p);
echo '<img src="'.$filename.'" alt="" /> <img src="'.$dest_filename.'" alt="" />';
Voila! Of course you should integrate the following code into your module and make the appropriate changes.

Numbers in map marker in Folium

i want to display some geo locations on map, but i want the map-pin icon to display numbers instead of the default map pin.
Is there any way to do that?
I checked in font awesome icons but it didn't work.
Below is my code:
import folium
m = folium.Map(
location=[45.3288, -121.6625],
zoom_start=12,
#tiles='Mapbox Bright'
)
folium.Marker([45.3288, -121.6625], popup='<i>Mt. Hood Meadows</i>').add_to(m)
folium.Marker([45.3311, -121.7113], popup='<b>Timberline Lodge</b>',icon=folium.Icon(color='red')).add_to(m)
m
What i want is instead of this default map marker i want to include numbers in my marker instead of info-sign
Something like this:
i couldn't find the answer anywhere. Any leads on this?
display number 1 to 9 inside map marker pin
I was attempting something similar on a recent project and this is what I came up with. Might work for you.
It plots a DivCon marker with html and then a transparent circle marker in the same location.
import folium
from folium.features import DivIcon
m = folium.Map(
location=[45.3288, -121.6625],
zoom_start=12,
#tiles='Mapbox Bright'
)
p1 = [45.3288, -121.6625]
folium.Marker(p1, icon=DivIcon(
icon_size=(150,36),
icon_anchor=(7,20),
html='<div style="font-size: 18pt; color : black">1</div>',
)).add_to(m)
m.add_child(folium.CircleMarker(p1, radius=15))
p2 = [45.3311, -121.7113]
folium.Marker(p2, icon=DivIcon(
icon_size=(150,36),
icon_anchor=(7,20),
html='<div style="font-size: 18pt; color : black">2</div>',
)).add_to(m)
m.add_child(folium.CircleMarker(p2, radius=15))
Adapting the previous answer by #bob I found a solution that fit my needs. I put it below in case it is useful for anyone:
import folium
from folium.features import DivIcon
def number_DivIcon(color,number):
""" Create a 'numbered' icon
"""
icon = DivIcon(
icon_size=(150,36),
icon_anchor=(14,40),
# html='<div style="font-size: 18pt; align:center, color : black">' + '{:02d}'.format(num+1) + '</div>',
html="""<span class="fa-stack " style="font-size: 12pt" >>
<!-- The icon that will wrap the number -->
<span class="fa fa-circle-o fa-stack-2x" style="color : {:s}"></span>
<!-- a strong element with the custom content, in this case a number -->
<strong class="fa-stack-1x">
{:02d}
</strong>
</span>""".format(color,number)
)
return icon
col_hex = ['#440154',
'#481a6c',
'#472f7d',
'#414487',
'#39568c',
'#31688e',
'#2a788e',
'#23888e',
'#1f988b',
'#22a884',
'#35b779',
'#54c568',
'#7ad151',
'#a5db36',
'#d2e21b']
num = 0
loc = (43.613, 3.888)
fm = folium.Map(location=loc, tiles="Stamen Terrain")
folium.Marker(
location=loc,
popup="Delivery " + '{:02d}'.format(num+1),
icon=folium.Icon(color='white',icon_color='white'),
markerColor=col_hex[num],
).add_to(fm)
folium.Marker(
location=loc,
popup="Delivery " + '{:02d}'.format(num+1),
icon= number_DivIcon(col_hex[num],num+1)
).add_to(fm)
fm
I need these numbers (1,2) to be dynamic, meaning, I have a for loop, I want index value to be printed in the HTML line
for point in range(0, len(coordinates_st)):
# showing number
folium.Marker(location=[72.89, -124.59+2], icon=DivIcon(
icon_size=(150, 36),
icon_anchor=(7, 20),
html='<div style="font-size: 18pt; color : black">r{point}</div>',
)).add_to(map_st)

Page Control while HTML to PDF Conversion using Select PDF

I am trying to convert large HTML file to PDF. but just want to set first page and following page number.
I have used following code
converter = New HtmlToPdf()
Dim file As String = "C:\TEMP\Document5.pdf"
converter.Options.PdfPageSize = PdfPageSize.A4
converter.Options.PdfPageOrientation = PdfPageOrientation.Portrait
converter.Options.MarginTop = 20
converter.Options.MarginBottom = 20
converter.Options.MarginLeft = 10
converter.Options.MarginRight = 10
converter.Options.DisplayFooter = True
Dim doc As PdfDocument = converter.ConvertHtmlString(htmlString)
converter.Footer.TotalPagesOffset =2
converter.Footer.FirstPageNumber = 2
doc.Save(file)
' close pdf document
doc.Close()
but this part not working,
converter.Footer.TotalPagesOffset =2
converter.Footer.FirstPageNumber = 2
and Is there any what to know total pages?
Here's how I handle my page numbering using SelectPDF and ASP.NET MVC Razor.
for (int x = 0; x < PDF.Pages.Count; x++) {
if (x > 0 && x != PDF.Pages.Count - 1) { // will not number first/last page
PdfPage page = PDF.Pages[x];
PdfTemplate customFooter = PDF.AddTemplate(page.PageSize.Width, 33f);
page.DisplayFooter = true;
PdfHtmlElement customHtml = new PdfHtmlElement(domain + "/template/_pagenumber?pageNum=" + x.ToString() + "&totalPages=" + PDF.Pages.Count.ToString());
customFooter.Add(customHtml);
page.CustomFooter = customFooter;
}
}
And here's what my _pagenumber.cshtml file looks like...
<div style="margin-right:48px;margin-left:48px;height:46px;position:relative;top:-4px;z-index:999;">
<div class="row">
<div class="col-xs-6">
<small>Company info goes here</small>
</div>
<div class="col-xs-6 text-right">
<small><strong>Page #(Request.QueryString["pageNum"]) of #(Request.QueryString["totalPages"])</strong></small>
</div>
</div>
</div>

Use full image size for page

can I design (for ex: 300x400 px) card in html and convert it to same size pdf using wkhtmltopdf?
I have html like:
<html><head></head><body><div style="width:364px; height:562px">
<img src="http://172.26.1.236/UserImage/jpeg.jpg" alt="my image" width="364px" height="562px"></div></body></html>
my code is:
var pi = new ProcessStartInfo(#"C:\Program Files\wkhtmltopdf\wkhtmltopdf.exe");
pi.CreateNoWindow = true;
pi.UseShellExecute = false;
pi.WorkingDirectory = #"c:\wkhtmltopdf\";
pi.Arguments = "--page-width 364pt --page-height 562pt --dpi 300 C:\\Users\\Admin\\Desktop\\Test.html C:\\Users\\Admin\\Desktop\\Test.pdf";
I want image should cover full page. how to achieve this?

Is there a working sample of the Google custom search rest API?

I need to create a screen which automates Google search.
I know JavaScript and I'm trying to get GSE works.
I have a search engine and an API key.
The problem is Google's documentation is cyclic i.e. pages point to each other.
There is no working sample from where I can start my research.
Please help if you know of a working sample.
The documents I have read are:
cselement-devguide
introduction
I know this is an old question, but here is what I did to make the API results formatted like the Google Site Search used to give since they are ending the paid accounts and will have ads now. The API way has an option to pay still for over 100 searches per day, so going with that but had to format the results still, and used the existing one to build the css to do similar styling also.
Search form going to this page is just a simple:
<form action="search-results.htm" id="cse-search-box">
<div>
<input class="" name="q" type="text">
<input class="" type="submit">
</div>
</form>
and then the search results page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>JSON/Atom Custom Search API Example</title>
<!--<link href="default.css" rel="stylesheet" type="text/css">-->
<link href="google.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="gsc-result-info" id="resInfo-0"></div>
<hr/>
<div id="googleContent"></div>
<script>
//Handler for response from google.
function hndlr(response) {
if (response.items == null) {
//Sometimes there is a strange thing with the results where it says there are 34 results/4 pages, but when you click through to 3 then there is only 30, so page 4 is invalid now.
//So if we get to the invalid one, send them back a page.
window.location.replace("searchresults.htm?start=" + (start - 10) + "&q=" + query);
return;
}
//Search results load time
document.getElementById("resInfo-0").innerHTML = "About " + response.searchInformation.formattedTotalResults + " results (" + response.searchInformation.formattedSearchTime + " seconds)";
//Clear the div first, CMS is inserting a space for some reason.
document.getElementById("googleContent").innerHTML = "";
//Loop through each item in search results
for (var i = 0; i < response.items.length; i++) {
var item = response.items[i];
var content = "";
content += "<div class='gs-webResult gs-result'>" +
"<table class='gsc-table-result'><tbody><tr>";
//Thumbnail image
if (item.pagemap.cse_thumbnail != null)
content += "<td class='gsc-table-cell-thumbnail gsc-thumbnail'><div class='gs-image-box gs-web-image-box gs-web-image-box-portrait'><a class='gs-image' href='" + item.link + "'>" +
"<img class='gs-image' class = 'gs-image-box gs-web-image-box gs-web-image-box-portrait' src='" + item.pagemap.cse_thumbnail[0].src + "'></a></td>";
//Link
content += "<td><a class='gs-title' href='" + item.link + "'>" + item.htmlTitle + "</a><br/>";
//File format for PDF, etc.
if (item.fileFormat != null)
content += "<div class='gs-fileFormat'><span class='gs-fileFormat'>File Format: </span><span class='gs-fileFormatType'>" + item.fileFormat + "</span></div>";
//description text and URL text.
content += item.htmlSnippet.replace('<br>','') + "<br/><div class='gs-bidi-start-align gs-visibleUrl gs-visibleUrl-long' dir='ltr' style='word-break:break-all;'>" + item.htmlFormattedUrl +"</div>" +
"<br/></td></tr></tbody></table></div>";
document.getElementById("googleContent").innerHTML += content;
}
//Page Controls
var totalPages = Math.ceil(response.searchInformation.totalResults / 10);
console.log(totalPages);
var currentPage = Math.floor(start / 10 + 1);
console.log(currentPage);
var pageControls = "<div class='gsc-results'><div class='gsc-cursor-box gs-bidi-start-align' dir='ltr'><div class='gsc-cursor'>";
//Page change controls, 10 max.
for (var x = 1; x <= totalPages && x<=10; x++) {
pageControls += "<div class='gsc-cursor-page";
if (x === currentPage)
pageControls += " gsc-cursor-current-page";
var pageLinkStart = x * 10 - 9;
pageControls+="'><a href='search-results.htm?start="+pageLinkStart+"&q="+query+"'>"+x+"</a></div>";
}
pageControls += "</div></div></div>";
document.getElementById("googleContent").innerHTML += pageControls;
}
//Get search text from query string.
var query = document.URL.substr(document.URL.indexOf("q=") + 2);
var start = document.URL.substr(document.URL.indexOf("start=") + 6, 2);
if (start === "1&" || document.URL.indexOf("start=") === -1)
start = 1;
//Load the script src dynamically to load script with query to call.
// DOM: Create the script element
var jsElm = document.createElement("script");
// set the type attribute
jsElm.type = "application/javascript";
// make the script element load file
jsElm.src = "https://www.googleapis.com/customsearch/v1?key=yourApikeyhere&cx=yoursearchengineidhere&start="+start+"&q=" +query +"&callback=hndlr";
// finally insert the element to the body element in order to load the script
document.body.appendChild(jsElm);
</script>
</body>
</html>