i need two things:
a great resource that goes into detail about all the various template variables....i finally found a resource that lists all of the variables on springmerchant...but it doesnt speak about what they do and/or how they do it.
secondly, this is for switching the bigcommerce-standard cloudzoom feature for something like a flexslider slideshow; therefore, i would love some insight into product images and what variables i can use....i know there is a variable that will output a specific products' tinyimages/thumbnails dynamically based on unknown method...i would like to know if there is a variable that does this except with full-size images.
what i am trying to accomplish:
something similar to coton-colors product-slider http://coton-colors.com/black-chevron-dinner-plate
Why not just grab the data that is already part of the product page? The tiny thumbnails have data attached to them pointing to the full res images(you should be able to find those variables, too). You can just use a script to create an array based on each full size image, then pass the values into your slider.
For the best list of variables and where the can be used, take a look at https://developer.bigcommerce.com/themes/snippets and https://developer.bigcommerce.com/themes/panels
By clicking on each panel or snippet they show you the variables that can be used.
Best of luck!
Related
OBJECTIVE
I am scraping a website. This is an example of a product page I am having trouble with.
When one clicks on one of the variations on the right, all (or most, depending on the product) of the images on the left change. All that I need to do is determine which photos in the gallery belong to which of the variations from the source code.
WHAT I MANAGED TO FIND OUT
The image list that contains all images is located in a div of class name "sly_carousel". When a click takes place, their style="display:" is either set to none or removed.
PROBLEM
I can't find where the rules that determine which images are shown/hidden on the left when an image on the right representing a variation is clicked on are located so that I can then tell which image belongs to which variation.
WHAT I HAVE TRIED
I inspected the code to the very best of my ability using Chrome's inspector. I found nothing either in the source or inside the little CSS window that also appears.
PAGE LINK
https://www.feiradamadrugadasp.com.br/corretivo-liquido-natural-beauty-jasmyne-1/p/194164/
A kind friend taught me it was actually done via a post request. Thanks anyhow!
I was checking a website where there was a list of people with different nationality
I inspected the elements because I wanted to download the nationality image for each person
the problem was that the image is not inside an IMG tag where I can just open the src attribute and get the link. I used something like getcomputedstyle(element).backgroundImage... and I got the link that I want, but now I'm facing a different problem which is the image I'm trying to download contains all the flags for every country around the world, and somehow only 1 flag is getting shown for each user in the website
how is that possible? I have never seen anything like this, could someone clarify this process to me too?
because I want to get the flag for each user, also I'm interested in the technique used
I uploaded the link to https://ibb.co/VxjK66B
Thank you
The technique calls "sprite". A map of images in one pig peace. By using it like background-image we can manipulate with background-position to move image in a small area. The size of a block - one flag size in this case. Each country has different background-position values.
You can read more about sprites here:
https://www.w3schools.com/css/css_image_sprites.asp
I want my blog to be more interesting by making it different every time a reader reads a post. For example, I want to tell a story using a quote from a famous person, a picture, and a situation from the real life. Say, I have 2 relevant quotes, 3 pictures, and 10 situations to use. I don’t want to use them all together, instead, I want every item to be randomly selected during the page load, this will give me 2×3×10 = 60 different variants of the page. If I had a database-backed site, I would select them parts from a DB, but I like the Middleman much and the page must be static.
What would you recommend?
JQuery might be the lightest weight easy solution here. You could use JavaScript to randomly choose each element and place them on the screen.
If you wanted to make sure the person had a unique message each time, you could record the selected combination in a client side cookie so on subsequent visits, your code checks the cookie to make sure that the combination is different than the previous x number of visits.
Depending on how long those 10 stories are, I would say maybe the quotes and the stories could be downloaded as a compressed JavaScript file that contains the list in a JSON. When you set the img src attribute using JQuery, it should pull the required image down from the server.
It would be a small project for me to show you all the details here but hopefully I've given you enough information to help you get started. You may have to use Google to fill in for examples of random numbers in JavaScript, using cookies with JQuery, replace image using JQuery.
I would like to create a "FlipView" of ListViews in Windows8 using JS and HTML. That is, I would like a control that would display a ListView and when the user swips or scrolls, it would display the contents of a different ListView. Is this possible? If so, how? Thanks for helping a Windows8 noob!
My attempt to put a listview under flipview, was not successful. css classes used by both controls overlap (e.g. win-item). I found that items in the nested list view occupied the whole available space like flip view item. This behavior was happening because the win-container hosting the nested list view item, was sized like that. I could not set its (win-container) size explicitly to smaller size even after overriding it in css file.
It does not look like that list view will work nested under a flip view for css/html. If any one else has had success with this, do share your comments and code.
if anyone had tried it in c# using FlipView and nested GridView/ListView and had success, do mark a answer with code (will be interesting to know).
I am currently developing application in Apex and I am lost. I have requirement that on hoovering over name/surname column in employee table it should bring image of employee. Image should not be stored in database it should rather by a pointer to... well FTP ? What is best practice to store images for DB but not in DB?
I understand that it is complex problem that have many steps therefore any help would be greatly appreciated.
As Jeffrey says (and i'd react in a comment, but then i started typing...), you will have to decide on how and where you'll store your images. Blob columns are already out of the picture, so they'll have to be put on a filesystem somewhere. This could be your apex_images folder for example, or a folder anywhere else on the server. You can always check by setting up an img tag on a page in your application, setting the src attribute to the image location.
Another consideration would be just how you are going to link the images to an employee, and how the images are to be maintained.
What will their filenames be? By ID? By employee name?
I've been in this situation too, and it was a such an enormous hassle too. I received a folder with images in it, all numbered up. Until some anomalies popped up of course: there were people with an identical number, because they had only been using part of a unique key. And many and more incorrectly named pictures: z.jpg, x.jpg, zzz.jpg, bob.jpg, mary.jpg.
If going for names, how? And how to deal with special symbols in names, such as accents: é,à,ç,.... Important of course, since you might not be able to link images to an employee because their name contains a special character but he image file doesn't.
And what about long names, or middle names? Maria De La Santagosa-Gurça Totally random name, but you catch my drift. That might be someone's real name, although the usually used name would be Maria Santagosa, which really isn't too far fetched.
Let's suppose you will give images a unique key value, such as a generated ID field of your employee record.
Perhaps the image can be made, the name can be copied and pasted in a column of the employee record.
I suppose the most important question would be: who will be maintaining the pictures?
If, say, Human Resources will be doing this, you'll have to carefully explain those steps: create an employee, copy the ID field (which honestly is totally meaningless to them - and rightfully so), and name the jpg EXACTLY that way.
Yet another consideration is filetype, and whether they'll get mixed up (again: who will maintain?).
And how about size? Will it be thumbnails or large size? Will the browser resize them? Probably the size of your database and amout of images are of consideration, and the load on your systems. If large pictures are not required, it'd be non-performant to actually drag those large images over the lines every time.
Believe me when i say that images not matching up to employees will be common, and that you should be aware of this. In my opinion, that is simply the case of the filesystem being easier tampered on that it would be on a database record.
Maybe consider the reasons for not choosing database storage again. Again, in my opinion, a profile picture is just as much a piece of structured data as is the employee name, and has more of a place in the database than on a filesystem. Maintaining the picture of an employee doesn't even have to be hard. HR would probably have a maintenance application where they can view and edit all details of an employee. Displaying the image would be trivial, and providing an update and delete method just as much.
I'm not going to step into the detail of providing a floating image. First decide on storage location and the details, then take the next step of setting up img tags and see how that works. Then set up a single img tag, and use javascript to dynamically alter the src of the tag. Floating a selection would be next.