Add a mug shot to story in Newscycle#
Make sure the image is at least 200 pixels wide. It can still work if smaller, but it may look pixelated. Portrait-oriented or square images work best. Horizontal/landscape images should be cropped square or to portrait-like dimensions.
Multiple mugshots should be cropped or resized to the same dimensions.
If the image is large (more than 800 pixels wide), crop it down to at least 500 pixels wide. Save it with a unique name (not something like "mugshot.jpg").
When edits are done, upload the image via FTP to:
/DAY-NL-Assets/news2019
(If you don"t have FTP access to Newsycle, email image to Joe R. or Carlos)
If image is called "IMAGE-NAME.JPG", path to the image will be: /Assets/news2019/IMAGE-NAME.JPG, which you'll see is the image source in the code below.
The alt tag should be the name of the person in the image or some other short description of the image, such as “Video still of robbery suspect”.
Then paste this code into the HTML code box in Newscycle, immediately before the first
tag, as shown below.
NEW: We now have several classes to use for different sized images, as follows:
* inline-img-cont-sm - use for images 200 to 250 pixels wide;
* inline-img-cont-med - use for images 320 pixels wide;
* inline-img-cont-lg - use for images 400 pixels wide
So, for a 320-pixel wide graphic or photo, you"d use:
<div class="pull-right inline-img-cont-med">
<img class="img-responsive" src="/Assets/news2019/IMAGE-NAME.JPG" alt="Motor Vehicle Theft Rate in Connecticut and U.S." />
<div class="photo-info-cont"><span class="photocapt">Motor Vehicle Theft Rate in Connecticut and U.S.</span>
<span class="photocred">THIS IS THE CREDIT</span></div>
</div>
For images that have/need a photo credit:
<div class="pull-right inline-img-cont-med">
<img class="img-responsive" src="/Assets/news2019/IMAGE-NAME.JPG" alt="NAME OR SHORT CAPTION" />
<div class="photo-info-cont">
<span class="photocapt">THIS IS THE CAPTION TEXT.</span>
<span class="photocred">THIS IS THE CREDIT</span>
</div>
</div>
For images that DON"T NEED/HAVE a photo credit:
<div class="pull-right inline-img-cont-med">
<img class="img-responsive" src="/Assets/news2019/IMAGE-NAME.JPG" alt="NAME OR SHORT CAPTION" />
<div class="photo-info-cont">
<span class="photocapt">THIS IS THE CAPTION TEXT.</span>
</div>
</div>
Open the HTML editor on a story in Newscycle
Paste the mugshot code immediately before the opening paragraph tag.