Re: How to I keep my product images from zooming?

maybmockingbird · ‎06-07-2023

So I do most of my marketing through Twitter and because Square sucks and has to make everything complicated, you have to manually embed a Twitter Summary Card for it to show preview pictures on Twitter. The issue with that is, you need to copy the image address to paste into the HTML of the embedded code for it to actually show up. I've had this site for years and all of my marketing material has this site address so I can't change it to something better at the moment.

With the product images on Square's store for the individual listings, it does an auto-zoom whenever you hover over the image, locking it out of the ability to right-click and copy the image address. Without those, I just have blank links with no preview images and it looks super unprofessional. Any ideas on how to work around this? I saw some people say drop the pixel size but all that did was make the image grainy and it still zoomed.

BernadetteA · ‎06-10-2023

Hi @maybmockingbird 👋 Welcome to the Seller Community

I'm familiar with the auto zoom, but it should not prevent you from getting the correct URL for the image. 🤔

Can you post a link to the page with one of the images you are trying to work with so we can get a better look?

Thanks in advance!

maybmockingbird · ‎06-12-2023

Every time I hover over the picture to right click and get the "copy image address" it zooms in and the only options are "back, reload page, save page as, and print". I don't have this issue on any of the images outside of the store page/item pages. I am able to copy the image address on every other page but almost all of my item pages do an auto-zoom. The first three items on the top row all auto-zoom, the middle and right-hand ones in the second row auto-zoom but the first one (for Of Prodigals and Pomegranates) only auto-zooms sometimes. Both items on the bottom row do not auto-zoom. It's incredibly strange and there's no rhyme or reason to it.

http://disturbancesbyalycia.weebly.com/store/c2/Books_and_Zines.html

BernadetteA · ‎06-12-2023

Okay, this is definitely odd... when I view the item page here, I can right click (quickly) on the image and I get the option to copy the URL or open the image in a new window. I can duplicate what you describe if I come in from the left side of the image (!) but when I mouse in from the right, I get the correct options. 🤔

At any rate, here's a couple things you can try:

1. Mouse on the image and very quickly, right click. You should see these options:

2. Use the image from the previous page here as it is the same file. If you do not see the option to copy the URL using either method, you can use the open image in new tab option, then right click on the image that opens in the new tab like here.

Please let me know if this helps, or if you are still having trouble getting the link.

maybmockingbird · ‎06-12-2023

So I have attempted the quick right click thing and it doesn't work, even if I refresh the page while the cursor is on the image. If I right click and reload the page that way, I can occasionally get it to load. The second option doesn't work, either, I don't get the open image in new tab link at all, nor do I get the "copy image address" options. Even though I am able to copy the image link, the summary card and link preview both show up with a blank image. The link, description, and image title I put in the embed code show up just fine but the image preview is always blank.

BernadetteA · ‎06-14-2023

Can you post a screenshot of what you see when you right click on an image from this page? It should look like this:

Can you also post the Twitter code you are using? If the image is not showing up it could be that the code is not properly formatted.

maybmockingbird · ‎06-14-2023

As I said, the image addresses used on the main store pages are not showing the photo properly either. For example, I used the image address from the Of Prodigals and Pomegranates image on the main store page - the Buy My Wares page - and pasted that in the Twitter code on the OP+P item listing page proper, then attempted to post it to Twitter to see if it showed up per your suggestion.

It did not work. It pulls up all of the information except for the image, and I tried doing that with every item listing I have. I don't know if it's because it's now trying to pull an image from a page that is not connected to the one with the embedded code or what the issue is, that's why I was trying to get them directly from the individual listings so they're on the same source page as the embedded code, but the images keep zooming whenever I try. I have zero issues with this code on any of the other pages across all four of my Weebly sites and have been using this code for years, it's just the store/item pages that are having issues.

This is the site with the Twitter code and instructions that came with it. So far, I've not had any trouble using it.

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary

BernadetteA · ‎06-14-2023

Thanks for the extra info @maybmockingbird

You do not need to use the URL directly on the item description page, as the image address is the same for any of the pages on the site. I think I see what may be the problem, though.

The image URL is adding ?width=640 to the end of the URL. Can you edit the code so that the last section is:

💡 Don't forget to re-publish the site before checking Twitter.

If that doesn't work, perhaps @Whitemonkey1 can assist! We have an archived post from the old Weebly community you can find here. He posted a link to his blog with how-to instructions. I'm pretty sure it's the same process you are using, but I did notice the image URL in his example post ended with .jpg instead of the width.

Whitemonkey1 · ‎06-14-2023

Hi @BernadetteA

Thanks for the shout out. I don't have store experience but yeah I am still using that code. Its a pain.

Twitter did away with the preview and u now have to paste the page url into Twitter directly to see if u have done the code right.

But for some reason, its all getting weird.

My devices Tablet and Smart phone, both android, show ever changing image urls. The .jpg or .jpeg is ok but before the image had a _orig tagged on the end. Now, for some reason, it changes to _1, and on one post I can't get the image to show on twitter despite numerous attempts.

I can't help with the zooming though.

Sorry I am not much help.

maybmockingbird · ‎06-14-2023

Thanks everyone, I'll give that a try tomorrow and let you all know! I hate that this is such a pain to use and I don't know why it's happening just with the item listing pages, gotta love technology

maybmockingbird · ‎06-17-2023

Hi everyone, I just tried it on several of my listings - the removing the width640 section of the URL - and it still doesn't work, it's not even showing up with a preview anymore, it's just posting the link. Even the one on my homepage is no longer working. There HAS to be some way to get this to work, it's 2023, we should be able to have our site links work and look professional.

Whitemonkey1 · ‎06-17-2023

Hi @maybmockingbird and @BernadetteA

Am looking at ur site.

Completely unrelated, u need to make ur site HTTPS, not http as it is just now. The S stands for security. People won't use ur site much if its only http.

Before uploading the images to weebly, it is best practice to change the image url to something Google can read. Like "ceramic-vase-flowers" not keep it as a bunch of random generic numbers created by your camera or phone.

This is possible a reason the image url when opened in a new tab has ?width =640 on the end of it. Perhaps that's how the image file name is???

Please change the image file name then reupload it, click publish and then open image in new tab and see what the image url is.

maybmockingbird · ‎06-20-2023

As I previously stated, I did try it with removing the ?width=640 from all of them and it did not help. I will try to change the names of the images and re-upload as well but none of the codes have the ?width=640 anymore so that is not the issue.

How do I change the site to an HTTPS? You're the only person who has ever mentioned that being a factor of people not using their website, the common person has no idea that's even a thing.

Whitemonkey1 · ‎06-20-2023

Am sure the common person has an idea and that alot of people have blogs. http websites are actually off.

Heres the full reason if u dt believe:

https://www.cloudflare.com/en-gb/learning/ssl/why-is-http-not-secure/

And I would deffo never buy off a http only site. Just saying

BernadetteA · ‎06-17-2023

Did you use the snippet I posted @maybmockingbird ? I just noticed that the community page here auto redacted some information, and definitely could be the reason for the error you see. Let me see if I can correct it.

Whitemonkey1 · ‎06-17-2023

@BernadetteA I went on to the Web page and opened the image in a new tab..

I also noticed on mine, the word EDITOR gets added into the image url when opening in new tab. Never did that before. As open from the editor as I blocked the keys on the live site to open the image. Maybe I need to delete that.

maybmockingbird · ‎06-20-2023

So I think that's a seller community forum thing, they give an error when posting any HTML code in the posts so I think that's a thing to protect people from posting things that may be harmful. It's not in any of my actual image address links, I did double check that, but good catch!

BernadetteA · ‎06-17-2023

Okay, I found the Embed Code element for the item OF PRODIGALS AND POMEGRANATES (PHYSICAL ZINE - 18+ ONLY)

The code was still showing the ?width =640 at the end of the URL. I removed that, but cannot publish the site for you. Can you please republish, then check the card for this specific item?

maybmockingbird · ‎06-20-2023

I wonder why it keeps adding that because I manually went in and removed that ?width=640 from all of those links AND published the site after I did it, so they shouldn't be there. How odd.

maybmockingbird · ‎06-17-2023

Hi,

I hate Square. I had no problems with any of this on any of my Weebly sites until Square showed up but here we are. I am an author and I use Twitter as the main source of my promotions and I can't get my summary cards for my site to work. I've been using the same code for years and never had an issue with it, but now only a handful of my pages are actually showing the previews on Twitter.

A big issue is the item listings, every single one of them has an auto-zoom on the photos so I can't copy the image address, and even if I try using the same image from the main store page, those show up with broken image previews - but the summary card does still work.

However, now even my homepage is no longer showing up with a summary card - even though it was a few weeks ago, and I have added and re-added the proper code several times and it's not fixing it. I have even added the proper code to the Header in the SEO page and it works but now it's throwing random images in from the page, but only on SOME of the pages, not all.

<meta name="twitter:card" content="summary"></meta>

I really need some help with this as I am at my wit's end, I've spent close to five hours over the last few weeks trying to rectify this and nothing is working. The site is: disturbancesbyalycia.weebly.com

The pages that do work:

Disturbances

Buy My Wares

The Church of the Blacklight - Item Listing

Books + Works (but it picks the wrong image, at least the summary card shows up)

Pages that do not have/need summary cards:

Updates + Socials

About Me

Pages that do NOT work:

All of the other item listings

Home Page

I cannot figure out what the issue is with some pages and not with others. Help is appreciated. This is the code I've been using:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/1433[Redacted]95258ff_z.jpg" />

Whitemonkey1 · ‎06-18-2023

Hi.

I've had trouble since Twitter deleted CARDS VALIDATION THING. and I only have Weebly.

I can suggest u remove the word REDACTOR from the image URL u referenced in previous message.