Problems with image links.

  • 1
  • Question
  • Updated 6 years ago
I have added multiple images to a single text widget and would like to add a separate page link to each. However some of the images have somehow been grouped so that only a single link is possible. Can anyone advise on how to ungroup them and link individually?
On another page I have tried the same thing and cannot even select the images. When I click on them nothing happens.
Photo of Becky

Becky

  • 4 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Becky

The Text Widget can sometimes be tricky if elements get moved or added without spaces next to each other. How about adding your picture links using the Picture Widget? This is much easier, and you have more options for your picture, too.

Which browser and which browser version are you using when you try to select the images on your other page?
Photo of Becky

Becky

  • 4 Posts
  • 0 Reply Likes
Thanks Stefan - but is it possible to change the size of a picture widget or put multiple pictures within one widget? When I add a picture widget a single image widget takes up the full width of the page (or half if I use the column divider), but I want to add 6 images side by side in a row, each linking to a different page. Is this possible using the picture widget?

At the moment I am using Google chrome though sometimes I use internet explorer.

Cheers
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Becky

Yes, that's possible! I hear what you're saying. Don't let the Sitebuilder View deceive you. In order to place 6 pictures side by side in one row, you will first need to create 6 columns and then add one Picture Widget into each of these columns.

You need to add 5 Column Divider Widgets to get 6 columns:
  1. Presuming you have a one-column layout page, drag and drop one Column Divider Widget to your page. Now you have 2 columns. Draw the the middle line to right until the first column is about 2 thirds and the second column about 1 third of the whole width of the Widget.

  2. Now drag another two Column Divider Widgets into the existing Column Divider Widget, one into each column of the existing one. Now you have 4 columns.

  3. Now drag another Column Divider Widget into each of the first and the second of your four existing columns. Now you have six columns.

  4. Even if the columns got very narrow now, don't worry! Adjust the width of each of the 6 columns by dragging the middle lines of the widgets.

  5. Drag and drop a Picture Widget into the first column. Choose your options in the Picture Widget dialogue box (centered, linked). The margin button will allow you to set the spacing to the right where your next picture will follow.

  6. Now insert your other images with Picture WIdgets into the remaining columns and adjust their spacing by editing the margin option.

  7. In order to see what it will really look like, please preview your page.

Let me know how that goes.

If you'd still prefer to add your pictures via the Text Widget, you will need to make sure that there is at least one blank space between your pictures in order to make links added later work as desired.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
You can view the Widget Borders by clicking on the nut icon on the top right corner of the the Widget Menu.
Photo of Becky

Becky

  • 4 Posts
  • 0 Reply Likes
Hiya,
That is working pretty well, thanks, although I am trying to now put a few words of text under each image and am having problems with alignment. I have used the same system, splitting the columns and then putting a text widget into each one, but because each widget-within-a-widget is smaller than the one that it is inside, the text is displaying at different 'heights' on the page. I tried it just typing the words and spaces into a single text widget and they look fine in the cms but then when I preview the text is not positioned correctly under the images.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Becky

The text will only display at different heights if you have either
  • changed the margin-top value in the Text Widget or

  • if your 6 pictures do not have the same height.

The best solution is to create another six columns below the six picture columns, and add the text there. You can then set the margin-bottom for the first, biggest Column Divider Widget where your pictures are in to let's say 20px in order to create an even gap above your Text Widgets.

If that doesn't make sense to you, please add all your text, let me know how the text should be aligned, let my know your URL and page name, and I'll to set it up for you. You'll then be able to check it and do it yourself next time! ;-)
Photo of Becky

Becky

  • 4 Posts
  • 0 Reply Likes
Thanks - I seem to have cracked it now! Thanks a lot for your help.

Becky