Retrieve an image from a website using Ruby and Nokogiri - html

I am trying to get an image from this website using Ruby.
https://steamcommunity.com/market/listings/730/M4A1-S%20%7C%20Cyrex%20(Minimal%20Wear)
So far, I have successful code to get the name of the item listed on the website:
html = Nokogiri::HTML.parse(open('https://steamcommunity.com/market/listings/730/'+url2))
title = html.css('title').text
titles = title.sub(/^Steam Community Market :: Listings for / , '')
Which results in "M4A1-S | Cyrex (Minimal Wear)"
(The "url2" comes from an input box on the html page that I made)
The image on the Steam Website has a class of "market_listing_largeimage".
Is there a way to also use Nokogiri to get the image src so that I can then input it into Html?

The image does not have that class; the div that the image is wrapped in does. That said,
html.at_css('.market_listing_largeimage img')['src']

Related

Parsing html with changing div id

I'm trying to parse the following HTML in order to get to the link that I marked below by using jsoup:
In order to do so, I did the following:
Document doc = Jsoup.parse( url );
Elements links = doc.select(".list-item-wrapper").select(".list-item")----> HERE IM STUCK
I would have continued by using:
doc.select(".list-item-wrapper").select(".list-item").select(#SEARCH_RESULT_RECORDID_dedupmrg914683993).select()....
But the problem is that _dedupmrg914683993 is changed between every page.
I also tried:
doc.select(".list-item-wrapper").select(".list-item").select(.list-item-primary-content result-item-primary-content layout-row).select()....
But I got 0 results.
How can I parse it so I could get eventually to the link inside <img class="main-img fan-img-1"...>?
Thank you
You can search for string match on any attribute, if your id always start with SEARCH_RESULT_RECORDID string you can look for it using the following syntax
doc.select(".list-item-wrapper").select(".list-item").select('[id^=SEARCH_RESULT_RECORDID]').select()....
I assuming that selectors are using jquery scheme

Angular 5 - add tooltip to string, possibly with Angular Material 2 mat-tooltip

I would like to dynamically add tooltips to some text. Ideally I would like to do so with the built-in tooltips shipped with Angular Material 2, but also a custom solution will do.
As an example, in the sentence the dog is barking, I would like to add to the word dog a tooltip displaying german shepherd.
The text is currently shown like this: <p>{{ stringFromSecureServer }}</p>.
So far I've tried with a custom pipe (addTooltip) with which I find and replace text:
transform(value: string): any {
value = value.replace('dog', '<span matTooltip="german shepherd">dog</span>');
value = this.sanitizer.bypassSecurityTrustScript(result);
return value;
}
If then I inject in the page the text with <p [innerHTML]="stringFromSecureServer | addTooltip"></p>, the text is actually modified, but matTooltip (Angular Material 2 component) is converted to mattooltip and it won't work.
Assuming that the problem was somehow linket to AM2, I've tried with a custom Directive, based on the excellent guide by Netanel Basal.
While the custom [tooltip] Directive is working with statically typed DOM elements (e.g. <span tooltip="test">test</span>), this still does not work when I find and replace the text as shown above.
Is there a way to achieve what I'm trying to do?
PS
As far as I can tell, I should not have XSS issues because all the strings that I need to work on are NOT user generated. All strings are served by the server through an https connection (Let's Encrypt auto renewed cert)

adding imageurl to image element dynamically wont work

so iam trying to add a image i have saved on my project in image folder. But it dosent work
DirectCast(Customer.Items(0).FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
DirectCast(Customer.Items(0).FindControl("imageControl"), Image).DataBind()
customer is the repeater html element the image element is in. I cant call the image element direct in the server code because the image element is inside a repeater element. So i have to use findcontrol method which works good. When i debugg the code i can se that it finds the right image element the problem is when i set the imageurl nothing seems to happen in the ui but i dont understand why can anybody help me please :)
<div>
<asp:Image ID="imageControl" Width="100%" Height="70%" runat="server"/>
</div>
To me it looks like you are not trying access controls within repeater in correct manner , it should be like :
If image is in header :
DirectCast(Customer.Controls[0].Controls[0].FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
If image is in footer
DirectCast(Customer.Controls[Customer.Controls.Count - 1].Controls[0].FindControl("imageControl"), Image).ImageUrl = "~/images/IMG_1287.JPG"
Please have a look at this post for more details.
PS : Are you using vb ? cause i have used C# syntax, if yes change accordingly.

Python 2.7 Copy and paste hyperlinked text

I am using Python 2.7, Webdriver and Chrome. Manually, I can mouse swipe across text containing a hyperlink on a web page and copy it to the clipboard. How do I do this automatically? I have no issue finding the element containing the hyperlink. I am not trying to find the hyperlink. I am trying to paste it into a web page text box which does not process https://www.python.org/ ">Link within an "a" tag but processes it correctly when pasted from elsewhere i.e. "Link" with embedded href.
Even after OP clarifications, it's still hard to understand the exact issue, so I'll try to cover all possible options :)
Suppose we have an anchor element, like Link
We can find this element in such ways
element = driver.find_element_by_xpath('//a[text()="Link"]')
element = driver.find_element_by_xpath('//a[#href=" python.org "]')
depending on what information we currently know about the element and what exactly we want to scrap.
Also, we can use index of anchor element element = driver.find_elements_by_tag_name('a')[0]
1) To get value of href attribute:
value = element.get_attribute('href')
Output: https://python.org
2) To get value of text node:
value = element.text
Output: "Link"
3) To get complete HTML code of element:
value = element.get_attribute('outerHTML')
Output: Link

Edit CSS Using Razor/Sitecore

We have a component that contains a background image. Our front-end guy needs it to be loaded through CSS (i.e. background: url(/*path here*/)...). The following is a possible solution we came up with:
#string src = // Get image path from Sitecore().Field("Picture");
<div style="background: url(#src) left top no-repeat;"> ... </div>
However, there are two problems with this approach:
It makes it very difficult for the content editor to swap out the image. They will have to manually change it through edit item.
It feels like a hack/workaround.
So the question is as follows: Is there a way to edit the CSS of an element through Razor/Sitecore? Specifically, the background: field.
I had a similar case and I used :
<footer class="layout_footer" style="background-color: #Model.BackgroundColor">
on view rendering (cshtml file)
And on the model we have :
public string BackgroundColor
{
get
{
Sitecore.Data.Fields.ImageField imgField =((Sitecore.Data.Fields.ImageField)item.Fields["BackgroundImage"]);
return Sitecore.Resources.Media.MediaManager.GetMediaUrl(imgField.MediaItem);
}
}
For editing this field in page editor you can use Sitecore Field Editor from a command : http://blog.istern.dk/2012/05/21/running-sitecore-field-editor-from-a-command/
Check for edit mode, and display in edit mode a editable field. Also create a Custom Experience Button from the Field Editor Button Type. You can also display. See User friendly developing with the Sitecore Experience Editor
#string src = // Get image path from Sitecore().Field("Picture");
<div style="background: url(#src) left top no-repeat;">
#if (IsInEditingMode)
{
<h3>Backgroiund Picture: #Editable(m => m.Picture)</h3>
}
</div>
There is no Sitecore extension method which will do this out of the box (i.e. #Html.Sitecore().Field("fieldName") will not work here as it would render the entire image tag (also a load of other non-image markup in page editor mode) as you probably know.
The method that #sitecore climber mentions is useful for controller renderings (or view renderings with a custom RenderingModel). If you want to stick with simple view renderings (i.e. not create a RenderingModel) then you could create a Html extension method which can be re-used on any view rendering. This could be something like the following:
public string ImageFieldSrc(this SitecoreHelper sitecoreHelper, string fieldName, Item item = null)
{
if (item == null) {
item = sitecoreHelper.CurrentItem;
}
var imageField = new ImageField(item.Fields[fieldName]);
var mediaItem = imageField.MediaItem;
var mediaUrl = MediaManager.GetMediaUrl(mediaItem);
mediaUrl = HashingUtils.ProtectAssetUrl(mediaUrl); //if you want to use media request protection (adding the hash onto the end of the URL, use this line
return mediaUrl;
}
It's worth noting that if you are using Sitecore 7.5 or above there is a feature to protect media URLs with a hash to prevent malicious DoS type attacks described in this blog post by Adam Najmanowicz.
In summary; if you are using Sitecore 7.5+ and you use media hashing then you will need to call HashingUtils.ProtectAssetUrl on the media URL if it is to respect size parameters.