Rescalling image that isn't called specifically as an image in HTML - html

This is going to be a very novice question. I am working with a Django application and for the first time I am having to edit the HTML, something I haven't worked on in years and even when I did I was not a high level.
The current code has something like the following written:
<div class="x">
%(image)s
</div>
I have never seen this '%(image)s' syntax before and anything I google appears to refer to string substitution and things like this. The class also has a max width of 16.6667% but the image does not rescale to this width. I have tried to add in widths to the div but with no luck and I believe it may be due to the way the image is being fed through to the html.
Any insight on what an earth is happening here so I can find where the image is defined and potentially generate a smaller one at that stage would be much appreciated.

Turns out it was a string substitution being fed by a python file in another app. If you are having this issue I suggest going through all the modules in your Django app and searching the files for the image name and you should find some python file defining some html code somewhere.

Related

I can't seem to find images for my HTML website?

I'm building my first website using HTML and CSS on Visual Studio 2019, using a YouTube tutorial as well as my own small amount of knowledge. Except when I went to insert an image using:
<img src="image.jpg">
it doesn't find it.
I have also tried using the image source path thingy using:
<img src="C:/Users/Josh/Documents/HTML/BusinessWebsite/image.jpg">
but this also doesn't work. Does anybody know how to fix this?
Use the relative paths. The path is taken from where you have your html file. Like when you're moving between folders in the command line.
Well, you should have provided some more information, because your syntax seems to be perfect. There you can try out two things :
The first thing I can figure out that might have gone here would be that your image extension might not be correct, which means it might be something else than jpg(may be jpeg or png).
Use relative paths.
Example

Is there any possibility to find a section of code in that file is?

Often when I inspect the HTML code of a site have difficulty in finding out what file is part of a specific DIV.
For example if you inspect a CMS that has many files and modules I can not tell exactly where it is that div or a script JS.
If we inspect the site to find a JS code but do not know where it belongs.
Look at the picture below
http://i60.tinypic.com/2njln9f.jpg
I hope you have understood what I mean.
If it's not clear I will return with more information
Thanks in advance!
Unfortunately,
From web-inspector, it is not possible.
Because the browser only receives the combined html output.
But, You will be able to see all the javascript functions which have executed due to your actions. You can view them one by one to figure out which method has caused the mischief.

How to locate an HTML file on localhost using Google Developer Tools?

I'm building a website using Wordpress on Localhost. I'm learning the structure of the webpage by editing the HTML and CSS using Google Developer Tools. I want to know which file I'm editing and where on the hard drive it is located.
I have edited the height and width of an element inside the circle marked but when I try to save the file, it asks me for a location to save which I'm unaware of. One the left is the HTML code, how can I locate the file with that HTML code?
how can I locate the file with that HTML code?
You can’t – not really, not from within your browser, because your browser doesn’t see individual “files”, it only sees the complete HTML source code of the one resource it requested, that might have been composed of lots of different files, plus functions that generate HTML code dynamically – so that actual piece of HTML code might not even be written as such within a file.
You might be able to identify different sections of the HTML document though – and with a little knowledge of the template structure and output logic of WordPress, you should be able to find out what the relevant file to look in might most likely be.
Another thing I’d suggest, is that you get yourself an IDE that allows you to search across all files in the whole project folder – and than look for certain class names, IDs etc. on the HTML element in question or near/above it. If you search for those, you might get lucky as well. (Although a lot of times those classes/IDs might be output dynamically as well, so you won’t find them inside of a template file as such.)
Especially with little knowledge of WP template structures, it might take some trial and error to find the piece of code and file you are actually looking for.
The Google Developer Tools is not a code editor, so whilst you can try out different options I'm not aware that you can save it, and if you can, I wouldn't say it's a good idea.
Wordpress uses PHP, a language which HTML code is embedded with PHP code. For example the code <a href='<?php echo(link1);?>'>Home</a> has had the href attribute embedded with a PHP variable. If you want to find the HTML code, look at the PHP files in your Wordpress directory, index.php is the landing page code.
One thing to bear in mind is that not all the HTML code will be included in one PHP file, it is usually included from several files, and much of the content will be in the wp-content directory, keep an eye out for the PHP include or require commands.
Google developer tool is just to check, once you are done with the editing, You have to copy your css code- and paste in your css file.
To get the css file look at the below image.
Hope your question got clarified!!

Is there any way to embed any of the graphs from Github in HTML?

Is there any way to embed any of the graphs from Github (any of the 4 found at https://github.com/Vizzuality/CartoDB-SQL-API/graphs)? For example, this one showing the changes in the lines of code.
Since the structure of the page is consistent, I'm pretty sure I can scrape it, but that's a bit cheeky at best. Note that I want the image itself - not the whole page - that is contained in the div:
<div class="graphs wheader">
This question is the nearest thing I've found for this, but obviously doesn't apply for Github. Would rather not reinvent the wheel!
PS: that's not the project I'm interested in embedding, it's just that that one has enough data on it to show.
Those graphs are built dynamically via javascript (d3.js) and SVG. This makes them fairly difficult to extract. However, you might be able to recreate them; inspect the javascript resources on the given page which are used to build the graphs.

Scraping hidden HTML (when visible = false) using Hpricot (Ruby on Rails)

I've come across an issue which unfortunately I can't seem to surpass, I'm also just a newborn to Ruby on rails unfortunately hence the number of questions
I am attempting to scrape a webpage such as the following:
http://www.yellowpages.com.mt/Malta/Grocers-Mini-Markets-Retail-In-Malta-Gozo.aspx
I would like to scrape The Addresses, Phones and URL of the next Page which in this case is
http://www.yellowpages.com.mt/Malta/Grocers-Mini-Markets-Retail-In-Malta-Gozo+Ismol.aspx
I've been trying just about anything i could think of but nothing seems to work due to them being set to invisible or so.
The Address is within an h3 tag but it does not appear to be scrap-able. I've been also looking into ScRUBYt from the following url http://www.rubyrailways.com/ajax-scraping-with-scrubyt-linkedin-google-analytics-yahoo-suggestions/, but i really cant seem to find heads or tails of how to apply them in this case.
I would really appreciate any pointers as this is an obstacle which i really need to surpass in order to move forward on my assignment. Thanks in advance for any help.
In the particular example you have given, the elements are not hidden, but loaded via ajax after the page load. So basically what you need is a http client which can run javascript (web browser?) to see those address and other contents.
If you want to really automate the process and scrape the data which is got through ajax or javascript, you can try selenium. Even though it is not developed for that purpose, it serves your needs.
I don't have an answer to your specific question, but I thought I'd point to Ryan Bates' Railscast episode on screen scraping with ruby: http://railscasts.com/episodes/173-screen-scraping-with-scrapi
He uses a library called scrAPI instead of ScRUBYt, since he couldn't get ScRUBYt working. scrAPI seems to be a bit easier maybe?
I hope this helps somewhat, good luck with your assignment! :)
-John
There is a good script posted at the google group. It seems to extract address, etc. You may want to look at the code for the script page.txt.