Embedded Files
Carousels, Image - Silverchair (updated 3/10/2020 for responsive images)
Creating Image Carousel Slides
Creating Image Carousel Slides
In Photoshop:
In Photoshop:
The image needs to be 870 px X 327 px. You can set these dimensions as a preset ratio in photoshop to ensure the image will be the correct size. (Let Erinn know if you need help setting this up).
The slide image should be RGB, pixel dimensions
870 x 327 at 72 dpi and saved as a .jpg, .png, or .gif.
In SiteMaster:
In SiteMaster:
1) Choose the Journal at the top of the page, then 2) choose Page Editor under the Editing & Layout tab in the left column, and then 3) click the + next to "In-line Box".
4) Scroll down to the bottom of the list under "In-line Box". The files are named with the journal name and the carousel # (example below in red box)
5) Open one of the carousel files.
6) First upload the new slides (you can upload all at once):
To upload the image(s):
In the Design view, (don't select anything on the screen but click on the picture icon in the second row of tools). This will open the Image Manager.
7) Select the journal in the left column, and then the folder "Slides". In the top toolbar, click Upload.
8) Select files to add (note that "Add" just enters another space for file selection). Scroll all the way to the bottom and click "Upload". (You can Upload carousel slides for the other journals at the same time by repeating, but select the appropriate journal.)
9) Now close the Image Manager with the X in the top right corner.
10. You must edit each carousel file individually. They are numbered 1--5, and that is the order they appear. If you need to rearrange the order its easiest to copy the code from the files into an outside editor and then paste the contents into the apprpriate order. Switch to the "HTML" view to update:
This is the code, notes for what you need to update are in BOLD:
<div class="slide-outer-wrap slide">
<div class="slide-inner-wrap">
<img src="/ImageLibrary/JEM/Slides/ENTER-THE-SLIDE-NAME-HERE.PNG" alt="">
<div class="slide-content">
<p>Add this if the slide needs a HEADING/TITLE, otherwise delete this line completly</p>
<h1><a href="https://this-is-where-the-URL-goes">THIS IS WHERE THE CAPTION TEXT GOES</a></h1>
</div>
</div>
</div>
11) Switch back to the "Design" view and make sure the image and text look ok (It can be hard to read the text and this won't look like it will on the site).
12) Click on "Publish Changes" and then pick when to publish from the options given. It can take up to 20 minutes for the changes to appear on the site...
To "Delete" Slides:
To "Delete" Slides:
If you don't need all 5 slides, the main "config-file" for the site has to be edited in SiteBuilder. Ask Rob to alter the line that contains (carousel1, carousel2, carousel3, carousel4, carousel5) to the appropriate number needed. then that file needs to be published to live and the site will update to display the correct number of images in a few minutes.
(1/1/20: Below are LSA instrux for editing in HW JCORE)
5. Click Nodequeue
6. Click HW Feature: Image Carousel:
7. That will take you back to the individual list of slides. If you are done hit save, if you have to replace another slide, click on edit and repeat:
Deleting:
Get to the list by following 1&2 above.
3. Click Remove next to the slide you want to delete:
4. Click Save after you remove it:
5. Now it should have the “The queue has been updated” green banner across the top:
6. Success.
Page updated
Report abuse