Thread

Hi
Working on a site in 1.6.9 which I need to combine data from two fields in the output on the page.  or maybe someone has a better way?  Im trying to automate a way for my client to insert an image and have it pop up in a lightbox.  In one field you upload the smaller image with the additional “</a>” at the end and then in the other custom field you would enter the linked larger image with the rel=“lightbox” at the end to make the lightbox work. 

How can I do that and combine the two fields?  or is there an easier way so we dont have to go thru so many steps?

thanks

I could be misunderstanding what you’re trying to do - are you saying you’re doing the link target setting in the entry screen and not in the template? And so you have a small image and a large image field separately? If the latter is the case, you may find it saves you a step to use the ImageSizer plugin to generate the smaller image directly from the larger image, assuming the relative proportions of the smaller image are at least similar to the larger version.  That would be one less step on the entry screen, and you could use conditionals or other mechanisms in the template itself to apply your lightbox linking.  I don’t expect you should have to do it in the entry screen itself - big risk of errors on entry if someone less knowledgable (a client administrator or something) were doing data entry - so the more you can do inn the template, the better.

Hope that’s at least a little helpful. If you describe in a little bit more detail what you’re doing, I might have a different suggestion for you.

Cheers,
John

Hi the image reseizer is a good idea.  I will look into that.  as far as making it work, I thought that all the image placement and linking (and the associated lightbox info) would need to be done in the publish screen since it will be for regular updates of content with images? 

There is a way to do that in the template control that easier?  how would you do that thru conditionals?

just to make sure I explained it right -

Field A that has the small image + Field B that has the large image as a link and the code for the lightbox

equals

tag that processes the whole thing together so when the small image shows up on the page it is clickable and opens up a lightbox window

You can achieve this in various ways. I prefer to give the editor as little rope to hang themselves as possible, or rather as little room to break the site and layout as possible.

To do this I would create 2 custom fields, one for the main image and one for the thumbnail image. I would set an upload location and would define the thumbnail size, the reason is you can then force the thumbnail to be that size by declaring it in your html and preventing the layout breaking if the user uploads an incorrect size, etc.

Then, EE allows you to populate the file to a template either using a single tag, which will display a full image tag and not be what you’re after, or you can use a tag pair, and use the parts of the file properties you want.

Okay, so assuming our 2 custom image fields are main_image and thumbnail_image and we want to create html that will render like this:

<a href="/image_uploads/image_1.jpg" rel="lightbox">/image_uploads/thumbnail_1.jpg</a>

We could simply replace the filenames with our filename property using the tag pairs as follows:

<a href="/image_uploads/{main_image}{filename}.{extension}{/main_image}" rel="lightbox">/image_uploads/{thumbnail_image}{filename}.{extension}{/thumbnail_image}</a>

And you’re done.

You can read about file tag pairs here.

I agree that its definitely best to give as little rope for the client to create problems.  While I did do some of the things you described, I didnt tie it together the way you say,

I gave it a try.  I amended your code with this but its not showing the small or large pictures -

<a href="/images/uploads/recentsuccesses/{picturelg}{filename}.{extension}{/picturelg}" rel="lightbox">/images/uploads/recentsuccesses/{picture}{filename}.{extension}{/picture}</a>

I also tried the full url to the image directory in the code but it still isnt finding the images.  the lightbox code is working, but it doesn’t pull up a picture.

Of you are not uploading images correctly into your channel then this obviously won’t populate the correct file attribute details. Work your way through the steps to create the file upload. Make sure that after upload, you can see the image on the server in the correct folder. If not, check folder permissions, upload folder settings, etc.

Once you are uploading correctly, this will work. This code must also be within a channel entries tag - I took it for granted that you were doing that.

everything should be in the right folders, Ive been uploading images for a long time to it before and everything worked fine.

arent channel entry tags just for EE 2.0 ?

Im still using 1.6. 

when I use the the channel entry

{exp:channel:entries channel="recent_successes"  orderby="date" limit="600"}

I get an error -

The following tag has a syntax error:

{exp:channel:entries}

Please correct the syntax in your template.

If this is so, is there any way to do it in EE 1.6?

Correct, use a weblog entries tag. Replace channel with weblog.

You’ve posted this in code share, it should be technical support.

ok, so back to weblog entry like I had before.  but it is possible.  Ill create new entries and try it fresh.  could you tell me which group/forum can help with this?

It would be easier to help if you posted your code here. And checked that your images were in fact uploading to the correct folder.

thanks

{exp:weblog:entries weblog="recent_successes"  orderby="date" limit="600" }
          <td width="1"></td>
          <td width="17" class="blueheaders" span> </td>
        </tr>
        
        <tr>
          <td> </td>
          <td rowspan="3" valign="top" ><a href="/images/uploads/recentsuccesses/{picturelg}{filename}.{extension}{/picturelg}" rel="lightbox">/images/uploads/recentsuccesses/{picture}{filename}.{extension}{/picture}</a>   </td>
          <td valign="top" > </td>
          <td valign="top" ><span class="blueheaders">{successdate}</span> <span class="whitetextreg">{title}</span><span class="whitetextreg">{project}</span></td>
        </tr>
        <tr>
          <td> </td>
          <td valign="top" > </td>
          <td valign="top" ></td>
          <td ></td>
        </tr>
    
{/exp:weblog:entries}

Do you have a live url to show an image currently uploaded?

this is a test large and small that I uploaded

http://yasharlachayal.org/images/uploads/recentsuccesses/phpdxpquPAM_thumb.jpg

http://yasharlachayal.org/images/uploads/recentsuccesses/081510_06.jpg

This is the new page I am trying to get this to work on -

http://yasharlachayal.org/index.php?/successes/popuppictures/

Does this code reside on a page within the recent_successes weblog? If not, try adding a dynamic=“off” to your weblog tag.

Also can I see what the output html is populating? Is it putting anything in place of the image tags? And if you use a single tag, does that populate the correct info?

the page it is supposed to be populating is

http://yasharlachayal.org/index.php?/successes/popuppictures/

it is going to take the place of

http://yasharlachayal.org/index.php?/successes/other_projects/

not sure what you mean by “anything in place of the image tags”

as you see on the existing page the thumbnails populated fine before I added in this new tag…