There are three major types of title/cover layouts for magazine articles:

half/half (what you see here; under the MAGAZINE ARTICLE HALF HALF 2023 template. cover image can be made bigger by setting the column widths to 2/5-3/5, 1/3-2/3 or 1/4-3/4. width <=1/4 for hed not recommended.)
full cover (cover photo appears first, spanning the full width of the page — hed, dek etc. appears below; under the MAGAZINE ARTICLE FULL COVER 2023 template. generally recommended for incredibly high-quality or otherwise impactful image with standalone value)
print-format (basically identical to the default print article in terms of layout, hed then dek then cover photo; under the MAGAZINE ARTICLE PRINT FORMAT 2023. for the more run-of-the-mill stories/essays where emphasis on the cover image doesn’t accomplish much)

Daily Trojan Magazine

Anatomy of a magazine article

The magazine logo and hed are in a single div with id “magazin-post-hed”. Logo is in Heading 4 (#magazin-post-hed h4 is set to font Luke) and hed is in Heading 1 (” ” set to Gastromond).

For full-cover layouts, the entire Grid Row containing the cover image has id “magazin-post-hdr”. This overrides the grid row’s default max-width to set width to 90% (100% on mobile devices minus margins).

This is a dek.

By JONATHAN PARK

Writer headshots are assigned id “mag-post-hdshot”. This shrinks the photo to height/width 120px and crops it to a circle (border-radius 50%).

When choosing the headshot: Upon selecting the image in the Media Library, under Attachment Display Settings select “Medium (300 x 300)”. This ensures a higher-quality image than the default Thumbnail version.

August 10, 2023

(Lyndzi Ramos / Daily Trojan)

HIDDEN ON MOBILE

Article text has id “magazin-post-content”. divs assigned this id will have a dropcap, as shown below. When creating additional text blocks for article text, e.g. when split by images, do not assign this id to said new text blocks — unless if beginning a new section of the article.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et enim risus. Ut a bibendum neque. Ut nibh elit, vehicula ac maximus vel, pharetra at turpis. Donec et arcu ut tortor vulputate scelerisque a id velit. Curabitur rhoncus mauris in elit ornare ullamcorper. Vivamus dapibus consequat odio, a pulvinar magna aliquet at. Maecenas egestas, metus a maximus ultrices, elit mi venenatis lorem, eu blandit dolor urna mollis ex. Donec dignissim odio sed arcu laoreet vehicula. Etiam et viverra neque. Nullam dui purus, scelerisque a euismod sed, ullamcorper eu tellus. Nunc placerat tincidunt lacus vitae tristique. Mauris sollicitudin nisl sed lectus laoreet mattis.

Nam eget congue arcu. Mauris vel tincidunt justo, eget bibendum nibh. Sed accumsan ligula erat. Praesent pharetra tellus vitae suscipit sagittis. Morbi eleifend imperdiet iaculis. In tristique nisl at massa tristique, vehicula finibus metus laoreet. Nullam sodales suscipit eros ut pharetra. Duis bibendum dictum metus, non aliquet dui efficitur vitae. Ut turpis nulla, scelerisque ac nunc sed, bibendum commodo leo. Nulla massa ante, tincidunt et mattis sit amet, aliquet vel nisi.

Aliquam condimentum felis ac neque pretium, ut suscipit urna sagittis. Duis dapibus quam id felis condimentum mollis. Cras porta magna quis finibus tincidunt. Maecenas eu nisi diam. Nam ac sollicitudin justo. Sed egestas enim at nisi vehicula porta. Ut venenatis eget augue ac dapibus. Ut efficitur, ante non congue malesuada, tellus ipsum accumsan dui, tempus dignissim leo justo nec nunc. Ut tempus varius leo, vel blandit magna. Praesent ornare feugiat ligula non vehicula. Suspendisse et laoreet orci. Curabitur interdum ex nec arcu porta posuere. Nullam nec nulla id erat varius sagittis non id dolor. Maecenas non eros sem.

Sed maximus ac tellus vitae congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet purus quis turpis vulputate cursus vitae eu est. Aenean nec efficitur libero, at fringilla ante. Etiam viverra iaculis vehicula. Curabitur maximus lacus sit amet bibendum egestas. Nullam mollis justo quis quam elementum aliquam. Duis venenatis, mi non semper aliquam, quam dui facilisis turpis, maximus gravida tortor libero in metus. Nullam sodales massa sit amet augue feugiat varius. Pellentesque ut euismod velit. Quisque rhoncus sem nec pulvinar luctus. Integer eu dui urna. Ut dapibus vel mauris quis blandit. Vestibulum consectetur sem bibendum, iaculis lacus ut, tincidunt arcu.

Etiam volutpat neque vitae risus varius commodo. Nullam lacinia dapibus ornare. Curabitur ac lorem urna. Vivamus lectus mi, facilisis ac eleifend sed, efficitur quis nisl. Duis tincidunt tortor non massa commodo, a consectetur odio sollicitudin. Aenean vel ligula eu erat fermentum rutrum. Vestibulum accumsan libero elit, eget lacinia est rhoncus in. Proin ullamcorper eros nec felis aliquet dignissim.

There are three major types of title/cover layouts for magazine articles:

half/half (what you see here; under the MAGAZINE ARTICLE HALF HALF 2023 template. cover image can be made bigger by setting the column widths to 2/5-3/5, 1/3-2/3 or 1/4-3/4. width <=1/4 for hed not recommended.)

full cover (cover photo appears first, spanning the full width of the page — hed, dek etc. appears below; under the MAGAZINE ARTICLE FULL COVER 2023 template. generally recommended for incredibly high-quality or otherwise impactful image with standalone value)

print-format (basically identical to the default print article in terms of layout, hed then dek then cover photo; under the MAGAZINE ARTICLE PRINT FORMAT 2023. for the more run-of-the-mill stories/essays where emphasis on the cover image doesn’t accomplish much)

Daily Trojan Magazine

Anatomy of a magazine article

The magazine logo and hed are in a single div with id “magazin-post-hed”. Logo is in Heading 4 (#magazin-post-hed h4 is set to font Luke) and hed is in Heading 1 (” ” set to Gastromond).

For full-cover layouts, the entire Grid Row containing the cover image has id “magazin-post-hdr”. This overrides the grid row’s default max-width to set width to 90% (100% on mobile devices minus margins).

By JONATHAN PARK

Writer headshots are assigned id “mag-post-hdshot”. This shrinks the photo to height/width 120px and crops it to a circle (border-radius 50%).

When choosing the headshot: Upon selecting the image in the Media Library, under Attachment Display Settings select “Medium (300 x 300)”. This ensures a higher-quality image than the default Thumbnail version.

(Lyndzi Ramos / Daily Trojan)

HIDDEN ON MOBILE

Article text has id “magazin-post-content”. divs assigned this id will have a dropcap, as shown below. When creating additional text blocks for article text, e.g. when split by images, do not assign this id to said new text blocks — unless if beginning a new section of the article.

Trending Posts

NBA ratings are down. So what?

USC sued for harassment, discrimination in athletics department

University challenges RTPC unionization

All roads lead to Rome

Nolan Jack is bringing folk to LA

Got a story idea?

SUBMIT A TIP >>

ADVERTISEMENTS

Looking to advertise with us? Visit dailytrojan.com/ads.

Bookmarks