image duplicates - Post ID 304085

User 794657 Photo


Registered User
5 posts

I just downloaded/upgraded to 5.1 and have been trying to insert images, but every time the image duplicates/tiles and I can't see how to correct that. Any suggestions are greatly appreciated - THANKS
User 2699991 Photo


Registered User
5,136 posts
Online Now

john cox wrote:
I just downloaded/upgraded to 5.1 and have been trying to insert images, but every time the image duplicates/tiles and I can't see how to correct that. Any suggestions are greatly appreciated - THANKS


Suggestion 1/
It would be very helpful for us to know which 'framework' you are using, not only for this post but for any future ones,

Suggestion 2/
A bit more of a description about how you are trying to insert the images, (are you actually 'replacing images or putting new ones into a new container, from your resources folder, or online images
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 794657 Photo


Registered User
5 posts

Hey and thanks for replying. Not sure what you mean by framework but it's Site Designer 5.1 on Windows 11. I used one of the templates. It seems like the image is perhaps going in as a background, not just as an image/photo. I added my photos to the local resource folder and inserted from there
User 2699991 Photo


Registered User
5,136 posts
Online Now

john cox wrote:
Hey and thanks for replying. Not sure what you mean by framework but it's Site Designer 5.1 on Windows 11. I used one of the templates. It seems like the image is perhaps going in as a background, not just as an image/photo. I added my photos to the local resource folder and inserted from there


Frameworks
Foundation 6
Bootstrap
Materialize
Frameworkless

And the name of the template (I suspect you may need select the container/image ID to change it)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 794657 Photo


Registered User
5 posts

Looks like Bootstrap 4.4.1 with the Black-Forrest template - thanks!
User 2699991 Photo


Registered User
5,136 posts
Online Now

john cox wrote:
Looks like Bootstrap 4.4.1 with the Black-Forrest template - thanks!


Ok I got that template so which images are you trying to replace, ao are you trying to change the large 'hero' images ???

PS sorry for late answer I was out all day yesterday and just got back
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2699991 Photo


Registered User
5,136 posts
Online Now

PHEW
The larger images are a bit complex (except the first one, which is a background image, so just a matter of swapping that one out) the other two are background images with a normal image overlay. (go to inspector panel and you will see the parent container containing 3 children a 'picture' a 'heading' and a 'paragraph'

If you just change the background image then the 'picture' remains, you need then just simply delete it, if you dont want it, that does however cause a shift in the parent containers layout and dimensions etc, so you then beed fiddle with that until it looks like something how you want it to look.

There are a couple of fiddles to sort of get around that messy way to do it, but too fiddly to describe. I can do a video showing 'how to' if you would prefer (email link below in my signature if you want ) or I can post the link to the video on youtube if you prefer that



Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 794657 Photo


Registered User
5 posts

Thank you for all that - you are VERY HELPFUL!
I'll use that info and keep screwing with it - thanks again!
User 794657 Photo


Registered User
5 posts

I started from scratch with a new blank template and I found that the image tiling issue was because the photo was in as a background (thus the tiling). I was able to change that and create the grid-style "gallery" I wanted.

My current problem is further down the page, trying to get text on the left and an image on the right, in the same horizontal space. I added a 2-column container and got the photo into the column on the right, but I can't put text in the column on the left (only an image). What I need is to have text and an image side-by-side, like making the text wrap around an image in Word, or a 2-column table with text on one side and the photo on the other. Any advice on this and THANK YOU!
User 2699991 Photo


Registered User
5,136 posts
Online Now

john cox wrote:
I started from scratch with a new blank template and I found that the image tiling issue was because the photo was in as a background (thus the tiling). I was able to change that and create the grid-style "gallery" I wanted.

My current problem is further down the page, trying to get text on the left and an image on the right, in the same horizontal space. I added a 2-column container and got the photo into the column on the right, but I can't put text in the column on the left (only an image). What I need is to have text and an image side-by-side, like making the text wrap around an image in Word, or a 2-column table with text on one side and the photo on the other. Any advice on this and THANK YOU!




To place text and an image in the SAME container with the text wrapping around the image, place the image in the container first (1st child) then place the text/paragraph in that container as the second child.
The parent container needs to be set to position = relative

The image needs to be set to float-left (or right) the text/paragraph will then jump up and wrap itself around the image, you can then adjust the margin on the image left or right to adjust the space between the image and the text/paragraph to your preference

Alternately use the CSS Grid two cols (easy peasy once you understand how to use it.)

Alternativel (again)
To place an image left or right in a Container element without wrapping the text/paragraph set the container with it's children to "Flex" (STYLES - LAYOUT = FLEX) --------- DIRECTION = ROW,, WRAP = WRAP,,,,
(content) ALIGN = FLEX -START.......... (items) = UP TO YOU, (content) JUSTIFY = up to you
choose what you think looks the best
You can then use the children's widths/sizes to tweak their position
Adjust their settings accordingly at whatever breakpoint you need in order for the layout to look how you want it.
then you can play with the children's size-margins etc etc to make them occupy the best layout according to your preferences
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.