I'm having an odd problem with colorbox. The first image refuses to load on the first cycle of the slideshow. On subsequent cycles it loads fine.
page link: http://www.moongraf.com/ddf/weddings.html
click on the photo gallery link in the text
Image size for testing is under 8k so its not an image size issue. Slideshow speed is 4000, relatively slow.
I have another page upladed that works fine using the same links to css/js files in the head content: http://www.moongraf.com/ddf/eventsOLD.html
I must be missing something but I can't find anything that looks wrong. Any help would be appreciated.
EDIT: I found the answer. Dreamweaver was rewriting my code and deleting the link to jquery.min.js. Nice.
Related
We are running TinyMCE version 5.4.1 with various options including:
paste_data_images: true
powerpaste_allow_local_image: true
When we drag & drop (or paste) in smaller images (400px X 400px) everything seems to work fine. The Base64 encoding is saved to the database and the image is rendered from all browsers, Chrome, Firefox and Safari.
However, when we paste in a larger image (1920px x 1081px) the image is only saved and rendered correctly in Chrome and Firefox. In Safari the Base64 encoding is saved with all lowercase characters. Therefore it doesn't render when attempting to view it. Has anyone else experienced this?
I have searched here as well as on the TinyMCE website but don't see anything mentioning this behavior. We will eventually attempt to move away from this Base64 implementation as it's no longer recommended but it's what we have for the time being so I'm just trying to address this issue.
When the page loads, its' elements can do so in parallel. But when the browser sees the base64 image, it blocks the page from loading until this image is rendered. Thus, inserting large images into the page as base64 is certainly not a good practice - it may slow down page loads and worsen the UX.
To fix this problem and maybe several other issues, utilizing the automatic_uploads option is highly recommended. It will upload pasted images on the server instead of converting them to base64. Here is the example of the PHP upload handler that will upload images and give their URLs back to TinyMCE.
Concerning the issue with Safari, some minimal reproducible example would be very useful.
I should also mention that PowerPaste is a premium feature that will not work with TinyMCE opensource. If you are using the paid version of TinyMCE, you can create a support ticket.
Shopify: Product pictures on our collection pages keep changing sizes
Three gurus have been unable to help with a problem our nonprofit store is having. We would be forever grateful if you can.
Pictures on our collection pages keep changing sizes.
We have this problem on Chrome, Safari, and IE. I am on a PC. A colleague here who had never been on the site also had the same problem on multiple browsers on a PC. I spoke with a guru today, who was on a Mac, and he had the same experience. Yes, I refreshed my cache, and that did not help (as we recognized when people who had never been on the site had the same problem).
We are using a modified version of the Supply theme. I cannot imagine any edits to the theme causing this problem.
Please see this collection page of our store, which is in development:
https://gfh2.myshopify.com/collections/defenders-of-wildlife
(Yes, I know there is no home page. Long story)
Of course, the product pictures should all be the same width. But they are not, and they change from time to time and between browsers.
Sometimes all the pictures are very small, such as you see in this screen grab:
https://cdn.shopify.com/s/files/1/2326/7959/files/small_pics_1.PNG?6100116406257966738
Sometimes just a few of the pictures appear at the very small size, such as you see in this screen grab:
https://cdn.shopify.com/s/files/1/2326/7959/files/small_pics_7.PNG?6100116406257966738
If you click to the product pages, the pictures are all the correct size there.
Sometimes some of the pictures appear somewhat smaller than they should (in the range of 70% to 90%, and at least three such smaller sizes, such as you see here:
https://cdn.shopify.com/s/files/1/2326/7959/files/small_pics_6.PNG?6100116406257966738
Sometimes, if I click a product image on the collection page to go to the product, and then click the Back button to return to the collection page, and do that several times, then the image on the collection page appears at the correct size or at the 70% or 85% size. One time this evening it took three round-trips to do that. Another time it took seven round-trips.
The problem also happens with other collections, such as [Stack Overflow limites how many links I can provide, so just change the collection link provided above to
/first-book
When I first loaded that page, just now, all the pics were small. Please see
https://cdn.shopify.com/s/files/1/2326/7959/files/small_pics_11.PNG?16317572828225077891
I clicked the first one to go to the product page, then Back to the collection page, and made three round trips, and then that one image appeared at the correct size on the collection page. Please see
https://cdn.shopify.com/s/files/1/2326/7959/files/small_pics_10.PNG?16317572828225077891
I looked at another browser (actions above were in Chrome; I looked at IE), and all the pics there remained small. Refreshing the page 10 times did not help.
Went back to Chrome. Clicked the second picture and clicked back, several round trips. Then the pic on the collection page got larger, but the first pic reverted to small.
Thank you very much!
Shopify serves images to your pages, by resizing the image file on the server. The intention is to improve page load times, while insuring correct styling for various screen sizes and layouts. Less image files to produce, as well.
To do this, the Shopify server will need more info than just the file name, but the size information as well.
It uses an {image url filter} to include the size data with the image file name.
This is one of your image urls.
https://cdn.shopify.com/s/files/1/2326/7959/files/small_pics_1.PNG?6100116406257966738
The following is an example of an image url that includes the image size. Note the '720x720' between the image name (boat-shoes) and the image format (.jpeg).
https://cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes_720x720.jpeg?v=1459175177
The help section for image url filters states: 'If you don't include an image size, the filter returns a small (100x100) image.' This may explain your issue. Here is the URL of the help section I've referenced.
https://help.shopify.com/en/themes/liquid/filters/url-filters#size-parameters
(If you're used to graphically sizing an image, and then seeing the image at that size on the page, then this would be understandably counter intuitive.)
There are other possibilities. I would need to see the theme code for a more definitive answer. Contact me if I can help.
Unfortunately for me, Meta Slider WP plugin does not support lazy load, but it's perfect for what I need -- well almost. Here's why:
I have a ton of images (per slider) that will be displayed in multiple sliders using this WP Meta Slider plugin. All sliders will use the Flex Slider option, not the other options they have available. And, as you can imagine, the page load time is awful.
I looked up lazy load and came across this site:
http://www.appelsiini.net/projects/lazyload
It seems to be the perfect solution for what I need, but where do I need to input the snippet of coding in Meta Slider files to get this plugin to stop loading all the images at one time? What's happening is when a visitor comes to the site, this plugin loads every single image you have uploaded to it at that first-time page load which is causing the page to load awfully slow.
Additional info:
The images are pngs, 120x220 and under 50kb. I have found that converting them into jpgs instead of gifs compresses the file size to be between 12kb and 15kb, but anything lower, the images begin to lose color quality and the image color quality is extremely important.
END OF ADDITIONAL INFO
Anyway, my image database is growing and I need the images to only load upon the visitor scrolling up or down to reduce the page load time as much as possible so visitors will not be turned off and leave the site.
Thanks!
Oh, here's the plugin, I'm using:
wordpress.org/plugins/ml-slider/
I was about to ask a question about a JSFiddle, and I noticed that the images (which I've got on Imgur) don't show up. If I load the image directly in the browser, and then reload the fiddle the picture shows up, but if you haven't already loaded the pictures they won't display. Is there a way I can fix this? Or do I just need to host the pictures on a different site?
Here's the link to the fiddle:
http://jsfiddle.net/r4crr/3/
And here's a bit of dumb code from the fiddle that it appears is actually irrelevant.
<div id="makeJSFshowPics">
<img src="http://i.imgur.com/7ftvzYB.png" alt="High Interest"><img src="http://i.imgur.com/u8i9Coo.png" alt="Okay I guess"><img src="http://i.imgur.com/v66NbIR.png" alt="Do Not Want">
Opened up Chrome's network panel and noticed that those urls were getting 403 - Forbidden from imgur. Not sure why. So I opened the imgur url in a new tab, then went back to jsfiddle and hit run. Bingo, the image showed up. Had to do this for all of the images, which is not great. Looks like other people have run into this problem but there wasn't any solution to it.
For whatever reason, imgur is blocking the images from jsfiddle (and jsbin). Perhaps there were abuses coming in, I am not sure as to the why. The images are blocked based on the referrer. It would be possible to implement a bypass where the images were proloaded in an iframe which spoofed the referrer. That seems a little over the top though. It would work for the same reason that you can see the images in the fiddle after you visit the imgur url for the image, because it is cached.
I've been trying to figure this one out for about a week now and just
can't come up with a good solution. So, I figured I would see if anyone could help me out. Here's one of the links that I'm trying to scrape:
http://content.lib.washington.edu/cdm4/item_viewer.php?CISOROOT=/alaskawcanada&CISOPTR=491&CISOBOX=1&REC=4
I right-clicked to copy image location.
This is the link that is copied:
(Can't paste this as a link because I'm new)
http:// content (dot) lib (dot) washington (dot) edu/cgi-bin/getimage.exe?CISOROOT=/alaskawcanada&CISOPTR=491&DMSCALE=100.00000&DMWIDTH=802&DMHEIGHT=657.890625&DMX=0&DMY=0&DMTEXT=%20NA3050%20%09AWC0644%20AWC0388%20AWC0074%20AWC0575&REC=4&DMTHUMB=0&DMROTATE=0
There is no clear image URL being displayed. Obviously that's
because the image is hidden behind some type of script. Through trial and
error I found that I can put ".jpg" after the "CISOPTR=491" and then the link becomes an Image URL. The problem is that this is not the high-resolution version of the image. To get to the
high-resolution version I have to change the URL even more. I found a lot of articles #Stackoverflow.com to mention trying to build a script using curl and PHP, I have even tried a few of them with no luck. "491" is the image number and I can change that number to find other images in the same directory. So, scraping a sequence of numbers should be pretty easy. But I'm still a noob at scraping and this one is kicking my butt. Here's what I've tried.
Get remote image using cURL then resample
also tried this.
http://psung.blogspot.com/2008/06/using-wget-or-curl-to-download-web.html
I also have Outwit Hub, and Site Sucker, but they don't recognize the URL as an image file and fo they just pass right ove it. I used SiteSucker overnight and it download 40,000 files and only 60 were jpegs, none of which were the ones I wanted.
The other thing I keep running into, is the files I have been able to download manually, the filename is always either getfile.exe or showfile.exe and then if I manually add ".jpg" as the extension I can view the image locally.
How can I reached the original high-res image file, and automate the download process so that I can scrape a couple hundred of these images?
I right-clicked to copy image location. This is the link that is
copied:
You noticed the title has ".exe" in there. Look at the stuff in the query string:
DMSCALE=100.00000
DMWIDTH=802
DMHEIGHT=657.890625
DMX=0
DMY=0
DMTEXT=%20NA3050%20%09AWC0644%20AWC0388%20AWC0074%20AWC0575
REC=4
DMTHUMB=0
DMROTATE=0
Strongly implies the original source of this image is in a database or something and it is being passed thru a server-side filter (not sure if that is what you meant by "some kind of script"). Ie, this is dynamically generated content, not static, and the same caveats apply as would to dynamic text content: you have to figure out what instructions to provide the server to get it to cough up what you want. Which you pretty much have in front of you...if SiteSucker or whatever won't deal with it properly, scrape the address yourself using an HTML parser.