Fred tutorials?

Support Extras
12

So this is the tricky part. Unfortunately, pthumbs doesn’t work with FRED yet. So you have two options:

  1. Use the FRED image editor when you select the image you want. You can right-click the image and select Resize and Rotate or click this symbol Screen Shot 2563-03-27 at 18.25.52

I normally save the image as a new file and just append the file name with slider-

  1. Redevelop how your slider works.

This is the tricky part, the way you’ve currently built your slider means each image has to be selected using the FRED image modal. However, you can create a Slider container element that holds a dropzone and a slide element that can be dropped into that zone. The benefit of this is, each slide element has it’s own options which will give you better control and allow you to use pthumbs, but it also means you have to find a new way of presenting your slides during editing as the dropzone will become inaccessible.

Try this

  1. Create slider-container element with dropzone
<div id="carouselExampleControls" class="carousel slide"> <!-- remove data-ride="carousel" -->
    
  <div class="carousel-inner" data-fred-dropzone="slider" data-fred-min-height-"250px">
    
  </div>

  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
  1. Create a slide element with your options
 <div class="carousel-item {{is_active? "active"}}">
    <img class="d-block w-100" src="[[phpthumbof? &input=`{{img}}` &options=`&w={{width}}&h={{height}}&q={{quality}}&zc={{zoom_crop}}&aoe=0&far=0`]]" alt="{{alt}}">
 </div>


{
    "remote":true,
    "settings": [
    {
        "type": "toggle",
        "name": "is_active",
        "label": "Is first slide?",
        "value": false
    },
    {
        "type": "image",
        "name": "img",
        "label": "Image",
        "mediaSource": "",
        "showPreview": true,
        "value": "https://via.placeholder.com/300x150"
    },
    {
        "type": "text",
        "name": "alt",
        "label": "Alt description",
        "value": "Enter a description for this item"
    },
    {
        "type": "slider",
        "name": "width",
        "label": "Width of image",
        "min": 0,
        "max": 1900,
        "step": 1,
        "value": 1440
    },
    {
        "type": "slider",
        "name": "height",
        "label": "Height of image",
        "min": 0,
        "max": 1080,
        "step": 1,
        "value": 960
    },
    {
        "type": "slider",
        "name": "quality",
        "label": "Image Quality",
        "min": 1,
        "max": 100,
        "step": 1,
        "value": 85
    },
    {
        "type": "select",
        "name": "zoom_crop",
        "label": "Zoom crop location",
        "value": "c",
        "options": {
            "C": "Center",
            "T": "Top",
            "L": "Left",
            "B": "Bottom",
            "R": "Right",
            "TL": "Top left",
            "TR": "Top Right",
            "BL": "Bottom left",
            "BR": "Bottom right"
        }
    }
]
}
  1. Drop the slider-container on the page first, then drop in your slides. However, here is where you run into rendering issues. What I typically do is stack the images using CSS and only instigate the slider when fred is not active. So to achieve this do something like this:
.carousel-inner {
        height:400px;
    }
    
    .fred--active .carousel-item {
        flex-basis: 50%;
        display: block; // this is required to show the image as Bootstrap displays none on all .carousel-items that dont have an active class
        max-height:385px;
    }
    .fred--active .carousel-inner {
        display:flex;
        flex-direction:row;
        flex-wrap: wrap;
        overflow-y: scroll;
    }

And then manually call your slider with something like:

if(!$('html').hasClass('fred--active')) {
    $('.carousel').carousel()
}

That should get you started. Good luck :smiley: