I'm trying to show a gallery of 7,000 images on my Webflow website, but I cannot find a way to import the images over in a way that is effective. I can copy the url for each individual image and paste it into Webflow, but Webflow has a 10,000 character limit on its custom code. This would mean that I'd have to create hundreds of custom code sections in one page to get them all in, as well as spend countless ours manually doing that.
Essentially, I'm trying to find a way to copy an extremely large piece of html (50,000 ish lines of
<div>
<img src="image link.png" loading="lazy">
<p class="imgipfs">Name#1</p>
</div>
into a webpage that only allows 10,000 characters of code for a custom code import. I've tried to find a way to somehow source this huge chunk of html elsewhere and import that link into the custom code section, but haven't had any luck. I hope this makes sense!
I dont know webflow - but I success similar limited project with GTM container.
As you put custom js in google tag manager, the container would load only in the user side - therefore you bypass the limit.
Related
Pardon my complete n00bness as I try to figure this out:
I run a daily cartoon/drawing website. I'm not a developer so I'm using the site builder called Pixpa which has worked well for my straightforward needs: daily update on homepage + archival galleries.
There is one thing I would like to implement that the site builder is not equipped for. I would like to have a page called "random cartoon" that, when visited, populates with a random cartoon from the archive.
I can create a basic page using the site builder and it has the option to add HTML to customize. Theoretically, I figure this means I could create this "random cartoon" page from scratch, but I don't know where to start.
One other note that may be an issue - the image files for the cartoon are not located in any one central folder/volume in the backend of the website. Pixpa does not have that function. So right now each cartoon exists on the site in a corresponding gallery and has been assigned a url such as "https://s3-img.pixpa.com/com/800/636137/1647641530-19265-guy-631-february-14-2022.jpeg"
There are almost 700 cartoons so far, with more being added each and every day, so this is a major aspect of my issue...
In summation my question is - how and where should I organize my images so that I can implement this "random cartoon" page most efficiently, and once I have completed that organization, what CSS should I use to create the functional page?
Appreciate any insights you may have. Thank you in advance!
If you're able to use JavaScript too, you could import your images, add them all to an const imageList = [], then chose a random one using a random number generator.
As Harley suggested with some Javascript you can create an array of images and then invoke the Math.random() method to obtain a random number that would grab the corresponding image in the array and display it. Maybe some CSS wizard can chime in with a pure CSS method if that's possible.
To dive a bit more in depth, for a Hackathon, a friend and I need to get an image from an HTML form and analyze it using an AI algorithm. We easily handled the HTML form part, but that hard part is sending the image to be analyzed by the algorithm.
How would we do this. Would we have to set the algorithm up on some sort of server and then post the image to it or would we have to somehow integrate the algo into the webpage so it can run there.
Also what frameworks would we need to use and is there a guide to this somewhere?
Thanks,
CantTouchThis
I can't provide you the code because it is a competition, but I can help you a bit:
First (if you are using python) make a script that downloads the photo. You have to download the page and parse html document, find your image with regex and download it.. You can use urllib2 for downloading and Beautiful Soup for parsing html file, or, use htmllib to extract all img tags (override do_img), then use urllib2 to download all the images. Make sure everything is inside a definition or method so that we can call it later in our main script.
Make sure that the images are saved in your same directory
Make the last and main script, first import the first script we have made, and the downloaded file(make sure to give the imports inside a try and except because we haven't downloaded the image yet, you will get a error), call the method or definition of the photo downloading script, then write the rest AI algorithm, tell the file name, after the algorithm executes and gave result, make sure you write a code at the end that deletes the picture, because you might in future be asked to download more images, so you can create a list of websites and use it using a for loop to change the web address in the first script.
Best of Luck!
I've recently started learning html and for my first project i'm trying to create an image gallery that takes every png file from a directory and frames them on one page.
I've managed to make a very simple gallery that displays the images in a grid pattern but i haven't been able to make it take images straight from a folder without doing it manually.
I'm probably getting ahead of myself with such a project but any help is welcomed.
Current code is on github here:
http://ronsoros.github.io/?f49ef4d23d14e2c204648514729a7d850f62cf13
Welcome to Stackoverflow and the world of web development. You're indeed getting a little ahead of yourself, but that's a great attitude.
To be able to fetch all the images from a folder automatically, you need a programming language. Javascript is one of those programming languages, but Javascript is client side.
Client side means that the code you've written is executed by the users' browser. This means that as long as the user has access to the folder with your images he/she is able to fetch all the images and display them on the webpage. Most servers, the computer your website is hosted on, take security measures to make sure that the user can't access a directory, only the contents. This means that the user cannot know how many images are in the directory.
Javascript is also very slow in doing this, as first the page needs to load; run the javascript; loop over every image in a directory; display them one by one; end the script.
So what you need is PHP, a serverside language. This will be run before the user gets the page, the server executes the code. This means that you have access to the folder containing the images and are able to loop over them, get the images and put them in HTML tags to send to the user with the page.
But PHP needs a lot more than just a .html file, it needs a .php file and your computer or server has to know about PHP and what to do with it.
If you want to learn more about PHP W3Schools has a great guide on the basics of PHP: https://www.w3schools.com/php/
But I recommend sticking with HTML and CSS right now and really try to understand how it works and why it does what it does.
Goodluck!
I run a website for my photography where I have a stories page (http://www.traumantic.com/stories.htm) that is a long list of choices that lead to a sub folder and a gallery of images for that session.
I have an index.htm file in each of those folders that displays the gallery chosen.
I am trying to develop a new format for my pages, and putting it in place means replacing dozens of index.htm files and editing each one for that new format. A boatload of work.
I have noted that a lot of news sites seems to have a method of using a single template for the main body of the page and the elements of the news story are pulled in from another source.
I figured I could do this with XML like I did with my galleries, but I am lost.
I tried creating an XML file in a couple of text folders and then reading that form an HTM file two levels up. Didn't work.
Currently when you click on a link on my stories page, it opens the index.htm file in a sub-folder.
What I want to happen is this.
Clicking on a choice on my stories page launches an html template that reads the details from the folder.
The one html template would be used for all of the different story folders below. Making it far easier to modify the look of my web site quickly.
I'd rather put a ton a of work into designing this system that doing a mass replace and edit project on hundreds of files.
I hope this makes sense to some of you and that you can guide me to some study topics that will help me learn how to do this.
I am seeking advice on places where I can see example of this process.
The simplest option is to use an iframe
https://www.w3schools.com/tags/tag_iframe.asp
<iframe src="/path/to/file.html"></iframe>
Searching "html include" will yield a few guides that have various JavaScript implementations. (e.g., https://www.w3schools.com/howto/howto_html_include.asp)
If you're able to run php, you could use include
https://www.w3schools.com/php/php_includes.asp
But at that point, you might want to consider installing some sort of template engine like twig https://twig.symfony.com/doc/2.x/intro.html
I'm using UIWebView to display data from my organization data (publicize and legal), however, for instance, I would only want to pull specific data from the html file rather than pulling the whole URL. e.g. I want to pull the "News" section of the html and I want the user to only stay in that page, not enabling them to go into other parts of the website (e.g. home page, contact us) and allowing them to view the PDF article on the HTML file.
I've asked around and read up on DOM and screen scraping, but it seem that the data pulled are stored in a database instead.
Is there any way that I can pull just the HTML "News" section with the PDF URL into my customized HTML file and that it will be updated live (maybe every 30second it will refresh and pull information from the website so that the content and list of PDF are up to date)(e.g. added in 3new article into the main website, my customize HTML file will also refresh and pull information from website and update my article list)
If anyone can point to me a specific method that allow HTML to HTML data passing (live), that will be great and I can go do more research on it. Currently very lost and confuse as it is my first time doing this. Any help/feedback will be very much appreciated :)
EDIT: For example, google map or google search. I don't want to use the whole google webpage, just taking the important thing that i want like the search result or map display.
This will involve quite a lot of learning on your part - you'll have to learn HTML / the DOM / JavaScript and iOS/UIWebVIew.
Lets leave the live refresh part for now, I'll post another answer or edit to that later on.
That's not going to easy either (check out my earlier posting today on background execution issues that will affect you, unless the update is only to take place in the foreground
iOS Run Code Once a Day)
You will have to do something like this. And note that I've never tried this, nor seen posting of people who have on here, but in theory it should work, but there will be a lot of learning as I've said, and lots of trial and error. Its a big task when you're not familiar with these things.
1) Download the html page and load it in a UIWebView, but that UIWebView is hidden so the user's can't see it.
2) When the page has loaded its dom will be accessable.
3) You can use Javascript to access the DOM and look for the parts you want.
How you inject and run the Javascript in UIWebView can be answered in a separate question (this answer will get too long if all the exact details are included).
4) Remove the parts of the dom you are not interested in. Or use use events to make only those parts you are interested in appear, jQuery can probably help here.
5) Display the UIWebView
Alternatively the HTML could be saved to a file and string parsing could be used to search for the bits you are looking for and create a new text html file from it. I think this would get very messy, better to take advantage of the fact that UIWebView will parse the HTML page and create the dom for you.