Upload Photos Expression Engine

ExpressionEngine has a very easy way to include photos in your articles. By the end of this tutorial you will be able to include and resize any photo. The below is quite easy, but you are not limited to this way by any means, there are also several other options. After looking over this tutorial, see part two » that describes more options.

In part 2 a module called Gallery Extended is mentioned. This not only allows for easy additions to the gallery and to entries, it also has a Tab in the entry publishing area that allows for multiple one click image upload/resizing using the gallery settings, and associates those images to your entry.

In the control panel click on the green arrow just below “Quick Save.” This will open up the below window to choose your photo. (Or file).

Then you can browse to the photo you want to upload. Below the file upload you can see the File Browser. This will be covered in part two, and is used to select an existing file/image (or multiple!) to include in your article instead of uploading a new one.

Third is to choose the photo and “Open” which loads it for you.
   

Now choose to either resize your image or simply embed into the article as is, have a text link to it, or resize for a thumb with a popup to full size image. In this case I am resizing it to make a popup thumb image in the article. Note the “Image Location” option. This gives you the choice of placing a file or image into any field, including custom fields.

Here you can enter the width of the resized image, (if you click on the screen and Constrain Proportions is checked, it will set the height automatically), and if one wants the smaller image to be a popup to a full size photo select “Create a Separate Copy.” Otherwise it will overwrite the full size image with the smaller one. Click “Resize Image.”
If one is simply embedding the image into the article, you would select “overwrite original image” as it would be pointless to keep the original if it isn’t to be used.

Now you can choose to link to the thumb, embed it in the article, or have it link to a full size popup. I chose popup thumbnail link, and for image location chose Body.

Congratulations!  You are done. Now either Place Image and Close Window, or just Place Image if you are uploading another.

Here I uploaded a nicer one than these boring old tutorial ones. Don’t forget to click on the thumb to see it full size!

Here is an option if one doesn’t like the default ExpressionEngine image popup. This is using the code from the gallery medium image template.

Here I am wanting to resize an image and just embed it in an entry or other location. I choose resize image, select resize original image, as I am only wanting the resized image, and made the image a lot smaller.

I then select embed in entry and choose the field I want it paced in. All done as EE automatically adds the image code, the path to the image, and the alt text.

Photos in EE part 2 »

Note:
These tutorials are for a convenience to visitors and clients and are offered at no charge. Contact me above using the contact link, or below mailbox image for your website design, consultations, programming, and software requirements.
Thank you and have a great day. 

Trusted Email Marketing
and Online Surveys

<< Back