{"id":5955,"date":"2019-02-27T16:00:25","date_gmt":"2019-02-27T23:00:25","guid":{"rendered":"https:\/\/in.nau.edu\/web\/?page_id=5955"},"modified":"2020-03-13T12:04:48","modified_gmt":"2020-03-13T19:04:48","slug":"image-and-wysiwyg","status":"publish","type":"page","link":"https:\/\/in.nau.edu\/web\/enterprise-plus\/image-and-wysiwyg\/","title":{"rendered":"Image and WYSIWYG"},"content":{"rendered":"

Image and WYSIWYG<\/h1>\n\n
\n
\n
\n \n
\n
\n Overview Tab Open<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n Example Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n How To Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n
\n \n
\n
\n Troubleshooting Tab Closed<\/span>\n <\/h4>\n <\/div>\n <\/a>\n <\/li>\n <\/ul>\n \n
\n \n
\n
Overview Accordion Open<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
The Image and WYSIWYG (What You See Is What You Get) shortcode was added to easily match text along side imagery. Multiple Image and WYSIWYG blocks can be put together to highlight multiple types of content.<\/p>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n
\n \n
\n
Example Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
$\"\"$ <\/div>
\n
Northern Arizona University<\/a> provides exceptional education opportunities in Arizona and beyond.<\/p>\n<\/div><\/div>\n
$\"\"$ <\/div>
\n
For nearly 120 years, NAU has delivered a student-centered experience through rigorous academic programs…<\/p>\n<\/div><\/div>\n
$\"\"$ <\/div>
\n
NAU: the ideal university for academic excellence, personal growth, professional success, and world-class adventure.<\/p>\n<\/div><\/div>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n
\n \n
\n
How To Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
To add an Image and WYSIWYG to your page, you can select the shortcode form the toolbar. Two options will appear, that allow you to choose where the image will appear, either left or right of the text.<\/p>\n
$\"\"$ <\/p>\n
Once you select an option you will have the media library pop-up. You will want to choose a high resolution image, meeting the 2400px width requirement, as this shortcode changes sizes depending on what device it’s being viewed on. When you have selected the image you want to use, select “Use this image” red button in the bottom right corner.<\/p>\n
A shortcode with an image ID should appear in your editor.<\/p>\n[ img-opposite-wysiwyg image-align=”POSITION<\/strong>” image-post-id=”ID#<\/strong>“]\n
CONTENT<\/strong>
\n[ \/img-opposite-wysiwyg]\n<\/p>
Position<\/strong> will be automatically populated based on what you choose from the initial dropdown. ID#<\/strong> will be automatically populated base on the image you chose. Content<\/strong> is where your text would go.<\/p>\n
The following code snippet<\/h5>\n[ img-opposite-wysiwyg image-align=”right” image-post-id=”3606″]\nFor nearly 120 years, NAU has delivered a student-centered experience through rigorous academic programs…
\n[ \/img-opposite-wysiwyg]\n
<\/p>\n
Will create:<\/h5>\n
$\"\"$ <\/div>
\n
For nearly 120 years, NAU has delivered a student-centered experience through rigorous academic programs…<\/p>\n<\/div><\/div>\n
*This shortcode can be used with the background color box.<\/p>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n \n
\n \n
\n
Troubleshooting Accordion Closed<\/span><\/h4>\n <\/span>\n <\/div>\n <\/a>\n
\n \n\n\n
Why does my image look distorted? Image should be 2400px wide<\/a> they will resize as needed to show the best picture, if the image is not large enough it will look blurry or stretched.<\/strong><\/p>\n
Why is my image long vertically? The image will expand vertically if you have too much text in the shortcode. Try adding a link that will take the user to a page with more information.<\/strong><\/p>\n
For any additional questions or concerns, submit a support request<\/a>, or give us a call 928-523-9267<\/a>.<\/p>\n\n\n <\/body><\/html>\n\n <\/div>\n<\/div>\n\n <\/div>\n\n\n
\n
\n\n
\n
\n
Academic unit site support<\/h3>\n <\/div>\n
\n
\n