I am looking to try and pull the images from my society6 shop into a PHP page. Currently I am using the following code which is provided by Society 6, which seems to only pull one image.
Can anyone point me in the right direction to pull all the images surrounded by a link with the Javascript or ideally with PHP so I can embed them
<script type="text/javascript"><!--
s6_user = "ThriftandThistle";
s6_format = "300x250";
//--></script>
<script type="text/>
http://society6.com/js/show_banner.js
Related
I have a website that I am designing and I want to use a folder in a google drive to store the images. The issue is that I can't seem to find how to get the URL for these images. The actual use of this needs to be that anyone with permissions for the google folder can drop in an image and it will show up when you load the page.
I have the php looping figured out and I am just short the path for the <img src="" >.
At the moment even just getting one image statically from google drive would be a start.
If I understand what you are aiming for, it's pretty much hosting the images from the Google Drive. Looked around the community and found some stuff that I think is what you're looking for or at the very least, can help you have an idea on how to do it.
First, is from this answer. You just have to use this URL format:
https://drive.google.com/uc?export=view&id=<fileId>
-- providing the file ID. There is a note though, Note: this link seems to be subject to quotas. So not ideal for public/massive sharing. But this proves that you can retrieve the files (in your case, images) from the file drive.
Second, is the top answer from the same post as above. Simply states that it is very much possible, provided that you put the files in a public folder, then retrieve it using the following URL:
https://googledrive.com/host/<folderID>/<filename>
Lastly, is to follow the tutorial video. It's similar to the second answer where the image should also be shared publicly (haven't really tried to tweak around, try it out maybe it can also work if it's only shared selected users), get the shared link and use gdurl.com which will turn the shared link and turn it into a hosted link which will be a direct link to the image.
Here is a simple example:
Problem: The image url that you get from sharing a google drive image will be something like this
Simple Solution:
(**a) https://drive.google.com/file/d/{this part will contain the image ID that we need}/view?usp=sharing
But to use image we need url something like this
(**b) https://drive.google.com/uc?id={this part will contain the image ID that we need}
So the simple thing we can do is manually copying that part of the image ID from (**a) url and pasting in the (**b) url.
Automating using JavaScript:
let sharableLink = (**a); //paste the google drive image sharing link here
let baseUrl = "https://drive.google.com/uc?id=";
let imageId = sharableLink.substr(32, 33); //this will extract the image ID from the shared image link
let url = baseUrl.concat(imageId); //this will put the extracted image id to end of base Url
Here 32 and 33 are the starting and ending position of the image ID to be extracted from the shared image link.
AddOn:
You can create a simple HTML to get the converted image Url from the sharable link.
HTML:
sample.html
<!DOCTYPE html>
<html>
<head>
<body>
</div>
<!-- container for url and button to load it -->
<div class="thumbnail-container">
<input
type="text"
id="edt-thumbnail-url"
name="thumbnail-url"
placeholder="Thumbnail Url">
<div>
<button class="btn btn-load-thumbnail" id="btn-load-thumbnail">Upload Thumbnail</button>
</div>
</div>
<!-- script that runs the code for conversion -->
<script src="/sample.js"></script>
</body>
<head>
</html>
now create a javascript file and paste this
sample.js
const productThumbnailUrl = document.getElementById("edt-thumbnail-url");
const btnUploadThumbnail = document.getElementById("btn-load-thumbnail");
btnUploadThumbnail.addEventListener("click", (e) => {
e.preventDefault();
let str = productThumbnailUrl.value;
let baseUrl = "https://drive.google.com/uc?id=";
let imageId = str.substr(32, 33);
let url = baseUrl.concat(imageId);
productThumbnailUrl.value = url; //this will put the converted url in the edit text box
console.log(url);
});
I need to read a text file on a server and display its content in a blog post on Blogger. The text file is a result of a simple download counter and contains a number. The problem is the Blogger does not support PHP codes in a post. My current solution is to use OBJECT tag to call PHP script that displays the text file content with ECHO. It works. But the result is displayed inside a small frame and I can't apply CSS style to it or align it properly with the existing text. Is there another way? I understand it can be done with AJAX call but my scripting knowledge is basic and I wouldn't know where to begin. Help would be appreciated.
To display the result in the blog I used this code:
<p>File test.zip downloaded
<object type="text/plain"
data="http://example.com/statistics.php?dname=test"
width="30" height="30"></object> times</p>
EDIT: I have tried to follow #Toni suggestion but it only leads to more questions. Looks like Ajax call is way beyond my current level of knowledge. Sorry and thank you again.
Here is what I'm currently trying. I have moved the text that goes with the counter inside PHP file so the script now returns a string like "file has been downloaded 8 times" instead of just number "8". Also instead of OBJECT tag I'm using IFRAME.
<iframe src="http://example.com/mystats.php?dname=test"
frameborder="0" border="0" cells pacing="0" height="30"></iframe>
The iframe seems to be easier to style. If I can't figure out how to find which CSS is applied to a blog post and how to apply it to iframe, I can at the minimum mimic the style by using similar font.
You can use javascript with your blogger web-site.
Using javascript on your web-page, you can invoke a GET request to your PHP code and get the data you want, to display it on your web-page.
Below, there are links, to help you with this task:
How to invoke GET request in vanilla JavaScript
Invoking GET with jQuery
Use JavaScript to alter text dynamically
I made it work with JavaScript! Here is how. Server side PHP script reads and echoes a text file inside document.write().
<?php
$varcontent = #file_get_contents('yourtextfile.txt');
echo 'document.write("'.$varcontent.'")';
?>
The resulting string looks like this:
document.write("your text file content here")
Inside the Blogger post add the JavaScript code with the PHP script file as a source:
<script type="text/javascript"
src="http://example.com/yourfile.php">
</script>
Done! The content of your text file is displayed and styled with your current CSS.
I hope there's someone out there that can help. I am trying to use jQuery Backstretch to apply a different background image for each specific page within Bootstrap/Wordpress. e.g:
Home - bg image a
About - bg image b
News - bg image c
and so on...
I've managed to use the standard Backstretch script to display a single image for all pages, but I am totally lost (even after searching) on how to apply the the above.
My code so far:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://myurl.co.uk/wp-content/themes/wpbootstra/bootstrap/js/jquery.backstretch.min.js"></script>
<script>
$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg.jpeg");
</script>
I have used this in my footer.php.
Does anyone have a solution?
You could try:
<?php
if(is_page(42))
{
echo '<script>$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg.jpeg");</script>';
}
else if(is_page(41))
{
echo '<script>$.backstretch("http://myurl.co.uk/wp-content/themes/wpbootstrap/bootstrap/img/test_bg_b.jpeg");</script>';
}
?>
The number 42, 41 being the id of the page. Sp text_bg_b.jpeg will only display on the About us page (assuming its id is 41).
I think there is no need for using backstretch: Just add this css styles inline to your body or main container:
background: url(PATHTOYOURIMAGE) center center no-repeat;
background-size: cover;
You should consider using a custom field for giving the path to your image. I think the easiest way is to install Advanced Custom Fields and to add a field called bg_image to every site with the image url in it. Then you can replace PATHTOYOURIMAGE with
<?php the_field('bg_image'); ?>
It is another way but I think you should give it a try.
I have google custom search, by default the search box has got background image, I can remove that image, But not able to replace with my image. so Is there a way to do this.
Adding this to my CSS worked for me:
.cse input.gsc-input, input.gsc-input {background-image:none !important;}
Yes! You can do this!
Please find particular id or css for that and then use CSS according to that id or CSS and make sure you add !important at end it will works for you.
To remove the Google Custom search watermark you need to run a java-query infinite looped code it can't be done by adding a one time running code since every time you will click the search input field he code will rerun from the server side and the watermark will reappear.
the exact code you need to do is listed below but to achieve the desired result you must import Jquery liberary file from link jquery.com download/ and link it to your page
to link it to your page do so.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
the actual code to hide watermark is.
<script>
$(document).ready(function() {
setInterval( function()
{
$("#gsc-i-id1").css("background-image","none")
},1/*Time*/);
});
</script>
because the ID of the search box is " gsc-i-id1 " so the code will work even if you click and unclick the field.
Please adjust the time of the function to your preference for better performance better keep it less than 100 mile seconds
check the live performance of code by clicking the link below.
http://jsfiddle.net/atulc007/tHQAD/1/
You have to customize GCSE which is given in your code. To explain in detail, you have to select this url in your code - "http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en". Then paste and search this url in your browser. You will get the sorce code of that java script. In that find an image .gif link and replace with your image and save it as .js file and replace the link and upload. Hope you will enjoy :)
I make a simple html page and set it on facebook fan page tab but the tab which shows on fan page is shows a scroll bar buti already set to auto resize and the height of this html page is large i want to hide the scroll bar and show the complete page
The best solution I found, which works for me is:
You need to setup the Facebook app canvas settings, Canvas height to Fluid.

Then, add some javascript in the page header:
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoResize();
</script>
Finally, force our body and html tag to avoid scroll bars in css.
body, html {
overflow:hidden;
}
This has worked for me to remove all the scroll bars. It's working on the 18th of October 2011, but because Facebook keep changing their code, it may change in the future.
A full article about Facebook iframe is available on my blog: http://gpiot.com/facebook-page-tab-hide-scroll-bars-from-iframe/
Thanks to all of you.
Here is the answer of my question; I posted it here so that if any body find this question in future will also get the answer and his/her time is not wasted. I get the solution by adding the following code just before the </body> tag of my index page
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
Once again, thanks to all.
This solution works for me
http://aarosant.com/2011/03/14/adjust-the-size-of-facebook-iframe-tabs/
GO TO the App Setting -> Advanced setting -> canvas page there you can change width and height to fixed from fluid