Not sure if this is in the correct forum (apologies of not).
I am new to site designer and am using bs4.
I added a carousel to my page.
It works fine with the sample template images, and smooth transitions between them.
When I add my own image - which is more portrait - I expected it to scale to fit the size of the carousel, maintaining aspect ratio.
It does not.
The image is shown large and so transitioning from one image to another is a jarring experience as the carousel re-sizes itself.
Anyone know how to prevent this?
I just want to set the carousel to a specific size, and have it scale to fit the images inside it maintaining the image aspect.

Looking at the source it seems to always set specific dimensions for the image within the picture element - I have no idea how to force it to change that, SD seems to be managing the img element within the picture element itself.
My image:
<img alt="First slide" width="792" height="931" src="./img/imagery1_cropped_antenna.jpg?id=38&amp;cache=1639671764019">
Second image (placeholder image that comes with carousel)
<img alt="Second slide" width="900" height="500" src="https://via.placeholder.com/900x500.png?text=Your+Image+2">

The Bootstrap carousel prefers to have all the images in the same size and aspect ratio. I have seen people creating a background on which they paste the images. If this is done in an image editing program, the images can be made to have the same size/aspect ratio.

If it's one of the two CoffeeCup carousel components for Bootstrap 4 that comes with Site Designer, perhaps the following will be of use. I typed this before Inger's post appeared, but decided not to ditch it in case the component itself proves confusing.

1. I set the size and position of the carousel by the settings of the main container (class: carousel-slide).
2. I have put in Resources a number of images with similar aspect ratios but not necessarily the one used by the component's specimen.
3. In the Inspector panel, Elements Tree, I enter in the search bar at the top (without inverted commas) 'slide-img' so that all the other elements in the tree are temporarily hidden.
4. I select in turn each of the elements now showing in the tree, and do the following.
(a) I go to the Element panel and click on where it says 'Picture Online Image' and in the drop-down that appears I select 'Local Image' which opens the Project Resources box.
(b) I select the picture I want.
5. Although 4(b) doesn't change the picture on the Site Designer canvas, selecting Preview or 'Preview on ...' should show it working with the pictures. They will show with the width set by item 1 above, and the height in accordance with the aspect ratio of the pictures. The component's sample image does not appear.

Frank

Well it looks like Frank beat me to it

nuts

I don't actually use bootstrap, I use Foundation
However,

If I was to be doing it in foundation I would first do it as Inger and Frank say and set the images as "background" images
then
I would set it as "contain"
then I would set the container holding the background image to a set width and a set height
then
I would change the way the slides animate to a fade in / fade out rather than slide in / slide out

that gives a reasonably better visual experience than messing about with too many settings
(foundation "orbit" also has an attribute that one could use that adjusts the orbit thingy automatically)

I realise all that is for a different framework, but maybe one could adapt the process to make it work in Bootstrap

I kept this also in case and it took a while to type this in the pitch black with only the light ftom the screen to show the way

okay understood.

Do you know if you can place a carousel inside an accordion?
I can't seem to get the carousel as a child of an accordion container?

Once again if it was foundation no problem
What seems to be the problem? As in what's happening when you try

Here is a little something you can try

hop along to the tab at the top left "Actions" open and select "preferences"

look for the bit "select outline" here you can choose to make the outline a different colour (I make it something completely different to any colours that I maybe using in my project,, then if you want you can increase the outline size / border style as you want (I use 3px solid)

in that widow there are other things you may wish to xhange


This helps me see clearer better the element that is either selected or hovered over on the canvas.

I can then also see where the thing I want nested is going to land easier when I drag it onto the canvas, when the element I want to be the parent I can let go with the button Boom there it goes inside no problem
another way
check out the "Help" tab top right
select the tab 'keyboard shortcuts

use a keyboard shortcut to move the container up or down until it is in the container you want to nest it into

with the element you want to move selected, 'collapse all" button

I am on a PC so if you use one of those apple thingies the shortcut method maybe different.

I would and do short introductory videos on using Site Designer,(foundation), and there even maybe a CC video about how to do that too/

W

then using your keyboard

Here is a carousel inside an accordion. Open the 2nd panel.
https://www.dropbox.com/s/48d38gj7zt7lr … n.rsd?dl=0

Thank you.
I managed to get the carousel inside the accordion.
It was a bit odd - I could not move the accordion inside the collapsible container of the accordion, no matter what I tried.
Until I added a paragraph element, it was empty, but as soon as something else was in the accordion container I could then move the carousel into it.
I tried cut/paste, and moving using the element tree of inspector. Only worked for me when something else was inside the accordion container.