Adding new images to a migrated webflow site

Design help Custom code
1

Hi -

I am trying to add new images to a website (http://backyardlivingpools.com/portfolio.html) that was created by Webflow, but since migrated to Host Gator (so no read only link). I’ve taken a hard look at the HTML code where these images are found and isolated the following as the ‘div’ that contains one image:

          <a class="lightbox w-inline-block w-lightbox" href="#"><img class="lightbox-thumb" src="images/37T.jpg">
            <script class="w-json" type="application/json">
              { "group": "Pools", "items": [{
                "_id": "571930263af861901b2e1c03",
                "cdnUrl": "https://daks2k3a4ib2z.cloudfront.net/570834ccd59e0ed91cb0e6a0/571930263af861901b2e1c03_1-Backyard-17---2013.jpg",
                "fileName": "571930263af861901b2e1c03_1-Backyard-17---2013.jpg",
                "origFileName": "1-Backyard-17---2013.jpg",
                "width": 2000,
                "height": 1286,
                "fileSize": 455929,
                "type": "image",
                "url": "images/1-Backyard-17---2013.jpg"
              }] }
            </script>
          </a>

I’ve altered the code above in Sublime Text to reflect the new images I want to display on the website, replacing the tags with the new image’s info:

          <a class="lightbox w-inline-block w-lightbox" href="#"><img class="lightbox-thumb" src="images/new photos/DSC_0007.JPG">
            <script class="w-json" type="application/json">
              { "group": "Pools", "items": [{
                "_id": "69a52240bbb0eeebd93fd4b211ab52e9",
                "cdnUrl": "https://s3.amazonaws.com/pooligmagebucket/DSC_0007.JPG",
                "fileName": "69a52240bbb0eeebd93fd4b211ab52e9_DSC_0007.JPG",
                "origFileName": "DSC_0007.JPG",
                "width": 2000,
                "height": 1559,
                "fileSize": 4299116,
                "type": "image",
                "url": "images/new photos/DSC_0007.JPG"
              }] }
            </script>
          </a>

The code works perfectly on my desktop (chrome) but breaks completely when I view the new page on my mobile (android). Essentially, when I click the new image (a gallery normally pops up), the loading symbol spins indefinitely. I hosted the new images on the Amazon server to get the new ID, etc etc but this breaks on mobile.

Any advice if my goal is to simply add new images to the portfolio page? I truly appreciate your time and help in advance.

-Spencer

2

Have you thought about adding the images to the Webflow version of the site, export it, and grab to code and resources from the exported version, then reinject in the Host Gator version?

3

Thanks @vincent for the reply! I would love to do that. I’ve been handed this site to update the pictures, with no information on their webflow account etc.

Do you happen to know what I would need to be able to do your recommended solution? I do not have access to the original webflow account the site was created on because the site was created by someone else unfortunately.

I’m very new to webflow, but know html/css so please forgive my novice questions regarding webflow!

Thanks again!

4

You can have the site transferred to you: the person who designed the site originally must have a Pro account in order for the site to be transferred. Give him the email address linked to your account and he can transfer the site. Tell him to duplicate the site before transferring it because the transfer feature isn’t sending a copy but the actual site.

Other solution is to get the credentials of the account that created the site.

MAYBE other solution is to make a new site on your account, make the lightbox from scratch with the same classe names, add the images, export, parse the code and copy what you need, inject…

5

@vincent Thanks for the detailed solution. I’m contacting the previous developer to try your recommended solution. Next will be to create it on my own account to see what differences in code are.

Thank you so much for your advice; you’re really helping me out!

1 Like