(V5) How do I add images to a content page? How do I make an image open in a pop-up? Print

  • 0

Images can be added to a content page to create appealing pages to describe your products, brands, new products or people. There are two ways to add images to the content pages on your website:

Upload a static image

You can upload a static image into a content page, by moving the cursor to where you want the image to appear and clicking the image toolbar icon.

From the Store Admin menu, go to Information > Pages.
Open the page that you want to edit by clicking the pencil next to the page's name. Or, if you're creating a new page, click the new page + button in the top right corner.
Put the cursor where you'd like the image to appear and click the Image Toolbar button on the editor.

An image manager popup then appears. You can use this to upload an image to your website, and then click on it to add it into your page by simply clicking on it once.

Creating a collection of images set out as a gallery
You can create a powerful gallery using our Image Gallery found in Design > Blocks > Image Gallery.

Alternatively, you can use Shortcodes inside the content of your page to easily create visual effects like galleries or buttons underneath images. Shortcodes are tags that are inserted into your content using square brackets which are then expanded into full content when the page is shown to the visitor. If you have used the WordPress system before, you are probably quite familiar with shortcodes which can be used to make light work of complicated HTML tasks and are very handy when creating things like advertising landing pages, showing a portfolio of your past work, or images from a recent event that you attended with your customers.

In Ozcart websites, a gallery can be created by a series of thumbnails tagged with popup (lightbox) images on them. The code looks like this in your content page:

[image_modal src="/catalog/image-path/image-name" /]

Where the image-path-name is a link to your image name. The shopping cart will automatically tell the browser to look in the website's images folder, so you don't need to add that. If you are adding an image that has been uploaded using the image uploader (see above section on adding an image), then your source would be src="catalog/image-path-name" (i.e. adding the word catalog/ in front of your image name).

When the customer clicks on the image they see the big one in a popup. To lay this out in columns, you can use another shortcode. This time one to show your image in columns. To have three columns, put [one_third] and [/one_third] around the image shortcodes you've just created, so it looks like this:

[one_third][image_modal src="/catalog/image-path/image-name" /][/one_third]

Repeat this for the next two images and you have a whole row of three.
Repeat this for multiple rows to make a larger gallery.
For a row of four images:

[one_quarter][image_modal src="/catalog/image-path/image-name" /][/one_quarter]

Note: All of the items in your gallery need to be joined into one line in your content or the web browser will put a paragraph break between each image and make them look out of alignment. We suggest you create them how you want them first, then go back and press backspace at the end of each line once so they are all joined up.

The end result - to create the effect in our demo shop gallery page looks like this:

[one_quarter][image_modal src="jewel1_0h8b-fw.jpg" /][/one_quarter][one_quarter][image_modal src="z1_z9qs-z2.jpg" /][/one_quarter][one_quarter][image_modal src="jewel14_ze60-ou.jpg" /][/one_quarter][one_quarter][image_modal src="jewel3_1ivl-ex.jpg" /][/one_quarter]

To insert a banner slideshow into your page

If you want to insert a banner block that you've previously created, you can do that in your content page too. You can once again take advantage of the shortcodes feature in Ozcart to do this. The shortcode you would enter is this:

[show_slideshow id="10" img_w="1200" img_h="300" /]

The id number is the ID of the banner group that you want to display and img_w and img_h refer to the width and height of the slideshow in your page. How do you find the ID for the banner group that you want? In a new browser tab, navigate to Design > Banners & Galleries > Image & Banner Groups and click the edit icon to go into the editing screen for the banner group that you want to use. Then, look at the URL bar of the page, and at the very end will be a bit that says banner_id=xx where xx is a number. That's the number that you want to insert. In the example shown, the banner ID is 10, so that's what would be entered into the shortcode.

Was this answer helpful?

« Back