How to insert an image in a page

aebolzan · 2016-05-17 04:17:34

In my current CE4 site, my pages include an image above or besides a text. I was trying to use one of the trays to include an image, not text, but I found no way to do that. (something like what was done in http://backlight.barbeephoto.com/about/) . Should this be done manually?...and how? (I thought that the "upload facility"used for the masthead was also available for the trays, but not.

Agustin

tomowensphoto · 2016-05-17 04:33:20

Hi Agustin,
I have an image in a tray on my test site
This is what I placed in the Tray copy area
<img alt="Tom Owens by Chris Myhill" src="http://tomowens.openpoint.co.uk/test/backlight/designer?c=page&a=image&p1=2" style= "width:200px;" class="float-left" />
I uploaded the image through the Backlight utility. The URL is copied and pasted from the utility.
Hope this might help?
TomO

Last edited by tomowensphoto (2016-05-17 04:34:31)

aebolzan · 2016-05-17 05:14:20

Yes, it worked!....thanks!....but to tell you the truth I was expecting something more simple from Backlight....in fact, if one wants to insert an image in the Identity plate of the masthead, there is an easy way to do it.....maybe Matt will add such feature in a next release?...or it was not planned at all?.....

Agustin

rod barbee · 2016-05-17 05:27:21

Keep in mind, when you insert an image in the tray, that image will not be visible on mobile devices until you tap on the icon to reveal the tray. So if you want an image to be on a page no matter if on a desktop, laptop, or mobile device, put it in the page copy

Right now, if you want to insert inline images into page copy, it's all html.

You can apply classes to the images for alignment purposes too.
http://ttg-tips-and-tricks.barbeephoto. … lock-text/

And if you want an image to the right or left of a column of text but don't want text to float around it, you can use the Responsive Grid Framework. When the page hits the mobile break point the columns will stack on each other. This keeps the image on the page of the mobile device.

You can see my Responsive Grid Framework layout for Backlight here: http://backlight.barbeephoto.com/responsive-grid.php

aebolzan · 2016-05-17 05:51:41

well, it seems that I don't understand the concept of "tray" quite well. I thought that tray=column, as before in CE4, but not..right?. So if I want to include images beside the texts in the different pages, it would be advisable to put them in the page copy, not outside......and manually...right again?

Agustin

rod barbee · 2016-05-17 06:35:16

So if I want to include images beside the texts in the different pages, it would be advisable to put them in the page copy, not outside......and manually...right again?

Correct.
To see what happens with the trays, just resize your browser window, making it narrower and narrower. You'll see the trays disappear and an icon appear at the upper right or upper left, depending on which side you have your trays.

coyotepixel · 2016-07-03 06:03:42

Not knowing anything about html, I read the instructions above. I uploaded an image through Backlight utility, I copied the url and inserted it into the line between the " " :

and inserted it into the copy area. I get a small blue line when I go to my site>about. Did I leave something out or not insert the url in the right place of the html?

http://coyotepixel.net/about/

rod barbee · 2016-07-03 06:26:40

the url you have for the image looks slightly different in structure that a url I use for an uploaded image.

For instance, mine looks like this:

http://backlight-rb-test.barbeephoto.com/backlight/designer?c=page&a=image&p1=5"

and if I click on it in the page source, I go directly to the picture.

Yours looks like this:

http://coyotepixel.net/backlight/designer/?a=view_image&p1=1

Notice the slash after designer in your url? Maybe double check that in Backlight > Designer > Templages >Uploaded Images

coyotepixel · 2016-07-03 07:27:43

Thanks, Rod. I see the slash. I had gone to Uploaded Images and clicked on the Title named Jim and copied that url. Here's how it looks:

http://coyotepixel.net/backlight/design … image&p1=1

Here is the url for Uploaded images:

http://coyotepixel.net/backlight/design … ist_images

The slash is there in both the list and image url. Should I remove the slash? Or use the structure that you use?

I know nothing about html. I notice that your url has "page" in it and mine has "view" written in it. Does that also make a difference? I was following the instructions above that Tom gave above: "The URL is copied and pasted from the utility."

Is there a different way to insert the image into the copy area?

coyotepixel · 2016-07-03 07:36:39

Oh oh, I just scrolled down the View Image page and found the url at the bottom under my image. I hadn't gone that far and had copied the wrong URL.

coyotepixel · 2016-07-03 07:40:50

Seems to work now.

coyotepixel · 2016-07-03 07:47:04

PS, using this: <img alt="Jim" src="http://coyotepixel.net/backlight/designer?c=page&a=image&p1=1" style= "width:400px;" class="float-left" />

Can I change the "float-left" to float-right or float-center when needed? And is the "Jim" the Title name in the Images list? I inserted it there w/o knowing whether I should or not.

rod barbee · 2016-07-03 08:41:35

you should be using the alignleft, alignright, or aligncenter classes. float-left is not a class included with Backlight.
And yes, you can change it at any time by just editing the page copy and changing it.

the img alt is optional. It's good to have it though
http://www.w3schools.com/tags/att_img_alt.asp

Samoreen · 2016-07-11 00:03:47

No easier way of inserting an image in a page? Really? I'm disappointed. Backlight was supposed to make things easier. Inserting an image in a page was really easy even with CE3. I have not purchased Backlight to spend time dealing with HTML code and CSS style sheets.

What is the "Backlight utility" mentioned above?

Thanks in advance.

Last edited by Samoreen (2016-07-11 00:12:53)

Samoreen · 2016-07-11 01:10:47

Samoreen wrote:

What is the "Backlight utility" mentioned above?

Could it be the "Designer | Templates | Uploaded Images" command?

rod barbee · 2016-07-11 01:33:52

Could it be the "Designer | Templates | Uploaded Images" command?

yes. give it a try.

reinharw · 2017-05-05 08:05:16

I'm having the same difficulty as coyotepixel of inserting an image in the copy section of a page. I'm confident it is something with the URL I'm using that is causing the problem. I'm copying the URL listed on view image under the upload images page. Here is what I'm seeing/copying: http://www.williphotos.com/Backlight_Te … image&p1=8

Here is what I'm pasting into my copy dialog box: <img alt="Kirsten" src=”http://www.williphotos.com/Backlight_TestSite/backlight/designer/?c=page&a=image&p1=8” width=”300″ class=”alignright“>

The alternate title appears but only a box with an x inbox where the picture should be.

Where am I going wrong?

rod barbee · 2017-05-05 09:38:37

Frankly, I find it easier to manually upload images to a folder specified for the purpose and use those for any page images.
There's also another reason I do this rather than using the Backlight upload feature for things like page images: the Backlight uploader strips the metadata and file name from the image. I'd rather not have images on the site that have mo copyright info, for example. Or my file name for that matter.
The only images I upload with the uploader are things like masthead/logo images, favicon, and apple touch icons.

I have a folder in the root of my site named "img". The image URL is then simple: /img/image-name.jpg

reinharw · 2017-05-05 12:04:27

Rod - I took your suggestion, which I liked, but when I pasted in the photo URL and associated other code in the copy box, what I got on the page was this: img < src=”http://www.williphotos.com/img/0712_K_Reinhart_212.jpg” on the page. If I clicked on it, it brings up my photo. So, I'm closer but I'm still doing something wrong. Any ideas?

rod barbee · 2017-05-05 13:15:54

Probably just a syntax error. How about a link to the page?

The code should look like this:

<img src="http://www.williphotos.com/img/0712_K_Reinhart_212.jpg" alt="alt text" width="300" class="alignleft">

Ben · 2017-05-05 16:10:53

Beware of the curly braces around:

”http://www.williphotos.com/img/0712_K_Reinhart_212.jpg”

This part should read:

"http://www.williphotos.com/img/0712_K_Reinhart_212.jpg"

reinharw · 2017-05-05 22:38:57

Ben - you have a keen eye. You were right. It was my curly braces that was giving me grief. Problem solved. Thank you to you and Rod.

Community @ The Turning Gate

#1 2016-05-17 04:17:34

How to insert an image in a page

#2 2016-05-17 04:33:20

Re: How to insert an image in a page

#3 2016-05-17 05:14:20

Re: How to insert an image in a page

#4 2016-05-17 05:27:21

Re: How to insert an image in a page

#5 2016-05-17 05:51:41

Re: How to insert an image in a page

#6 2016-05-17 06:35:16

Re: How to insert an image in a page

#7 2016-07-03 06:03:42

Re: How to insert an image in a page

#8 2016-07-03 06:26:40

Re: How to insert an image in a page

#9 2016-07-03 07:27:43

Re: How to insert an image in a page

#10 2016-07-03 07:36:39

Re: How to insert an image in a page

#11 2016-07-03 07:40:50

Re: How to insert an image in a page

#12 2016-07-03 07:47:04

Re: How to insert an image in a page

#13 2016-07-03 08:41:35

Re: How to insert an image in a page

#14 2016-07-11 00:03:47

Re: How to insert an image in a page

#15 2016-07-11 01:10:47

Re: How to insert an image in a page

#16 2016-07-11 01:33:52

Re: How to insert an image in a page

#17 2017-05-05 08:05:16

Re: How to insert an image in a page

#18 2017-05-05 09:38:37

Re: How to insert an image in a page

#19 2017-05-05 12:04:27

Re: How to insert an image in a page

#20 2017-05-05 13:15:54

Re: How to insert an image in a page

#21 2017-05-05 16:10:53

Re: How to insert an image in a page

#22 2017-05-05 22:38:57

Re: How to insert an image in a page

Board footer