Serious CMS problems

Design help CMS
1

I was very proud of myself when I thought I solved my problem, but it didn’t work out. I bought a template that uses CMS (I don’t need CMS, but it’s hardwired in this template). I filled in all the forms to populate it only to realize that the images in the rich text couldn’t be turned into a lightbox (which was crucial). So I had to split up all the text and images into separate CMS fields in order to add lightbox to the images, only to realize that that wouldn’t work since I would far exceed the number of fields allowed (30… I’d need like 50). So now I’m stuck. Since I only need 3 or 4 pages, my ideal would be to take the layout of the template, but turn it into a static page and then fill it out manually. Is there any way to do that? To turn a template into a static page? Or to add lightbox to images in the rich text?
Or how about multiple layouts based on the original one? Then I could have it pull things references in a different order and maybe not need to surpass 30 fields. This thing is driving me nuts.
THANKS

Here is my public share link: LINK
(how to access public share link)

2

Hold yer horses! You can use the lightbox alternative fancybox on images in rich text fields with a teeny tiny bit of code.

Try putting this in your custom code field for the page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

    <script>
    $(document).ready(function() {
    $('.w-richtext figure img').each(function() {
      $(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);
    });

    $('.w-richtext img').each(function() {
      $(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);
    })});

    $("[data-fancybox]").fancybox({
      clickContent    : false
    });</script>
2 Likes
3

Where would this go exactly? I’ve never messed with the actual code for fear of… ending up in an even worse position. And how does it work? This might be a lifesaver!

4

Click the edit page settings cog wheel (right side, in the list of pages in your project):
ertherthj

Then add the code at the bottom field:

erytjdrtyjrdtyj
erytjdrtyjrdtyj717×587 41.9 KB

5

This part loads in Jquery which is the language needed for the script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

This then loads in the styling for the fancybox:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

This loads in the magic script that does everything, written by the glorious people at Fancybox - Fancy jQuery lightbox alternative
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

Here’s the custom part I made. I’ll break it up a little bit. The (document).ready means it waits until the page is done loading before it starts. Then it starts the (function).

$(document).ready(function() {

This function selects the w-richtext class div (standard class in Webflow when you add a field), then the figure class inside it and the img inside that figure - and does it for each instance. Then it starts another function.

$('.w-richtext figure img').each(function() {

This adds styling to the image (a pointer cursor), and two attributes (“data-fancybox” and “data-src” is so the magic script from earlier knows the image and that it should do stuff when you click it, “gallery” links the images together so that you can swipe through them all from clicking one.

$(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);});

Then we do the same thing for images that are not in a figure div (sometimes happens if it’s styled a bit differently. Might not be needed for you, but I use it).

$('.w-richtext img').each(function() {
$(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);
})});

That’s the rough answer to “how does it work” :slight_smile:

6

I’m gonna give this a shot. I can’t thank you enough for taking the time!

7

Sorry, when I said “how does it work” I actually meant “how do I use it”. I’ve put the code in, but obviously I can’t turn an image into a lightbox thumnail or add items to the lightbox the way that i would with the native Lightbox function. Where do I actually manipulate it?

8

Well I don’t know how you’ve set things up without seeing the preview link, so that’s a bit hard to say for sure.

9

Sorry, here it is. Everything about the template was working except that I really needed to the pictures to enlarge when clicked. In this Frankenstein version that would mean the first persona image since separating it out as I have done past that meant running out of CMS fields as I adapted the other cases. There’s really no way to just save the layout but make it a static page? My concern is that I don’t know any code and I worry that Fancybox might require more of it…

https://preview.webflow.com/preview/nathan-chitayat?utm_medium=preview_link&utm_source=designer&utm_content=nathan-chitayat&preview=284286735554b624fb879a1cc534b519&pageId=600b35e42db2f2038b704fd4&itemId=600b35e42db2f22848705075&mode=preview

10

@Fonsume -FYI: Webflow loads a current version of jQuery (3.5.1) on every site. No need to load another.

11

This works great. Thanks!

12

Shout out to @Fonsume
Your code works for me! Thank you so much :100: