Posted by JoMaye on

Hi all,

I've got a bit of a brain block. Does anyone have any thoughts on the best wasy to create a page which looks similar to this: https://issuu.com/kingstoncarersnetwork that we can use as an archive for our old newsletters?

Issuu has now limited the number we can store and I love having all the old ones preserved as part of history and you'd be surprised how ofter I go to look at something from 2016!

I'd like a grid of pictures with each one linking to the document which would open in another tab. I just can't think of the easiest way to do it!

Thanks,

Jo

www.kingstoncarers.org.uk

Posted by Joe Oldak on

Hi Jo,

I've had a think about your PDF downloading, and this is the best I could come up with which would be not-too-difficult to create. It's a bit of faff to set up but seems to wok pretty well.

PDF Downloads Example

(I used some PDFs from your assets library)

The thumbnail icons are made automatically. You can't click on the thumbnail unfortunately, but you can click the link below to get the full PDF.

Pros

  • Not too difficult to create a grid of all downloads.
  • Looks quite pleasing - certainly better than a load of plain text links!

Cons

  • It relies on knowing a few 'secrets' of the way Voice works.
  • All the thumbnails/links will be on one page with no pagination.
  • You have to manually add each PDF and create the download link for it. (takes a couple of minutes per PDF)

How I Did It

It relies on two tricks:

  1. If you add a PDF to the Images (not Documents) section of the assets library Voice will treat it as an image and automatically show a thumbnail image of the first page when viewed in grids.
  2. You can construct a link which accesses the original document to view the PDF.

Other than that it's a regular Carousel, Accordion, or Grid includelet, showing a grid of images with text underneath, where the text is a link to the PDF.

So, the steps are a bit like this:

  1. Create a folder called Newsletters in your Images folder in the Assets Library. (You don't need to do this but it keeps things tidy)
  2. Upload your PDFs one by one into this folder giving them consistent names, like "Spring 2021" or whatever. I added "Spring 2021 Newsletter" etc as the description.
  3. When you've done a few of those, head back to the Content tab and create a new page.
  4. Save the page (don't publish) then go to the Layout tab. Add a Carousel, Accordion, or Grid includelet into the Content slot.
  5. Select Grid 4 Wide (Mobile 2) and No to Grid Gallery. (The popups would just show a larger image which is no use here)
  6. For each PDF, click on Add Content Block and in the popup select the newsletter as the image, don't give it a title. (and don't close the popup yet!)
  7. In the WYSIWYG click the chain icon to create a link, and pick the same newsletter in the Images folder, it'll create a link with a suitable title. And here's Hack Two: add ?attr=image_orig to the end of the URL. This makes the link open the original PDF not a thumbnail. I also set the link to open in a new window, but this is optional.
  8. Now you can save/close the popups, and repeat from Step 6 for each PDF you want to add.
  9. Once done, preview the page, save and publish, etc etc.

I'm happy to demo this at the next Voice User Group meeting if that would be useful.

Have fun with it!

Joe

Posted by Joe Oldak on

Actually by putting the image into the Description (wysiwyg) field of the content block, then making the image itself a link to the original PDF (remeber to add ?attr=image_orig to the link url!), you get clickable images.

The last newsletter in the grid is an example of this.

You could still add some text under each image if you wanted to.

Cheers

Joe