Webapp supplied images

[leonardnz]

I am trying to call up images supplied via web app fields to use in ShadowBox. I can find no logic to replace the href direct image path reference with the {tag} name. How to I call back these images for display?

[Liam Dilley · Accepted solution]

Hey.

Web app you have made a custom field type image I guess. (If not you should have )

To get the full image as is with a link wraped in it by the system in list layouts is - {tag_yourcustomimagename}

To just get the image with no link - {tag_yourcustomimagename_nolink}

Raw url of the image to do what you like with such as lightboxes etc - {tag_yourcustomimagename_value}

This:

http://helpx.adobe.com/business-catalyst/kb/modules-quick-reference.html

And this:

http://helpx.adobe.com/business-catalyst/kb/tags---quick-reference.html

Should be pinned tabs in your browser and something you use and look at all the time

[leonardnz]

Thanks Liam. Just so I'm clear, does this mean that <a href="/images/imagename.jpg"...> becomes <a href="{tag_photo 1_value}"...>

[Liam Dilley]

Yep, so in terms n terms of a lightbox you could do a few options such as...

1. Two custom image fields, one for the thumbnail, one for the large and using _value form up your link and image source for that to work using what every lightbox you like using

2. Using what is outlined here:

http://forums.adobe.com/docs/DOC-2145

You can have just the large image and your thumbnail generated using this.

[leonardnz]

Hi Liam,

I have followed every line & tried every combination I can think of, but I simply cannot get the syntax right to find the image file.

I have switched to using prettyPhoto & it works great with hard coded paths, their images, or mine. But it is when I try & replace the path with a tag, it can't find the image...

I'm not worried about thumbnails or dimensions or anything else, I just need to understand the exact syntax required to bring up a webapp submitted image.

I have this line I'm working on, that I thought should work from everything I've read:

<a href="{tag_photo 1_nolink}" rel="prettyPhoto" title="This is the description"><img alt="" src="{tag_photo 1_path}" width="60" height="60" /></a>

I am assuming _nolink and _path don't need to be replaced with anything, so why can't it find my photo 1, either thumbnail or main image?

[Liam Dilley]

Where are you reading?

You just needed to follow what I said 🙂

_path is for products I,ages only. Your in a web app here.

_value is what I I mentioned.

You also have _nolink in a href which will render the full <img......

Don't try reading off in anything else, just follow the right tags etc ^^

[leonardnz]

Hi Liam,

I apologise, but I am new to BC, new to CSS & new to HTML. I am following precisely what you say, as I know no better anyway. I slavishly went through the document you pointed me to (http://forums.adobe.com/docs/DOC-2145), trying everything, until I arrived at the bottom - hence the code I showed you. So far I have experimented with this for 28 hours...

Sometimes, especially for newbies like me, it is easiest if you can simply tell me where my code is wrong...

All I am trying to do is replace a fixed path link for an image reference with a web app link.

I asked in my second question: "does this mean that <a href="/images/imagename.jpg"...> becomes <a href="{tag_photo 1_value}"...>"

to which you responded yes, then went on to give me options.

Well, I can't make this original supposition work, so perhaps I didn't give you enough of the line.

Can you tell me if this syntax is correct, or if not, what it should be? (as it doesn't work...)

(and, just to be clear, this is exactly the code I am putting in, I am not replacing "value" with anything else)

<a href="{tag_photo 1_value}" rel="prettyPhoto" title="photo 1"><img alt="" src="{tag_photo 1_value}" width="60" height="60" /></a>

[Liam Dilley]

Hey Leonard, totally understand but You gave an example, I said yes _value, then you post it not working and you were using _path. Which you must have read from somewhere else In the doc link it mentions for products, different from web apps.

This:
<a href="{tag_photo 1_value}" rel="prettyPhoto" title="photo 1"><img alt="" src="{tag_photo 1_value}" width="60" height="60" /></a>
You have created a problem.

Your linking the same file as the small file so that image will be jus tthat 60 by 60 image.

If your doing this you need two fields, one for the small image, one for the large image.

{tag_photo1large_value} for the link href and the tag_photo 1_value for your thumbnail image.

OR

As mentioned you use one large image and with the thumbnail code in the doc link you can generate the smaller image based on the large one.

[leonardnz]

Thanks Liam,

I have tried _value, many times...

From what you have said, the code I posted last should work, apart from the small / large image issue... Well, it doesn't, as I said. It can't find the image path for either. I have just replaced the small image with a fixed path & that works, but it still can't find the main image. So, if the slideshow works with fixed links, but breaks when I replace them with tags, there must be something wrong with the syntax...? Tearing my hair out here...!

[Liam Dilley]

Is the custom field you created on the web app of type Image? As in when you make the web app item it has the browse button to locate the image and add the image?

When you firebug or view source of the rendered page is that value being rendered or is a tag still shown? If the tag then it is not the right tag.

If the images are coming out and the lightbox is not working then you may have a javascript error.

Posting a link will help.

[leonardnz]

the custom field is of type image. When I view the content displayed directly from the form here:

http://jpeg.businesscatalyst.com/tifprofiles/the-image-factory

Where I am incorporating the three images into shadowbox towards the top oif the page, they appear (even though shadowbox itself isn't installed).

Where I have just put the tag on the page, I just get the image filename reference.

Here is where I am trying to pull the images through, although thereis only one image & the thumbnail is a fixed link (as previously discussed):

http://jpeg.businesscatalyst.com/profiletest.html

[Liam Dilley]

Javascript erros Leon.

First goal with anything - ensure your code is sound.

Your have a syntax error when calling jQuery because your calling it twice and one of those is incorect:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

        <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

Malformed Syntax, no close tag, for a script, script within a script and calling an older jquery after you already linked a newer version in the jquery api.

Actually I just found a 3rd call to a jquery that is not found:

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

Also script calls that do not exist

Real mess, you tried to use a template or copied the code from other sources?

You need to go through these and fix these up.

[leonardnz]

Many thanks Liam, much appreciated. At least I know I wasn't going mad with the tags!

Being a newbie to HTML & CSS, I haven't even attempted Javascript yet. The template I'm using is actually cobbled together from two separate templates, then built on by me.

I will get to work clearing up the javascript & let you know when I have it up & running.

Thanks again!

[leonardnz]

Thanks Liam, it was a missing couple of backslashes in the paths... I know now to be much more careful!