Tech That Tells A Story
A marketing client designed a social campaign to be implemented in WordPress. A major design facet was the grid display of story posts, where the grid need to size appropriately for the screen size while maintaining visual ratios. In addition, the featured images for each post were from user-submitted content which did not conform, and could not be requested to conform to a known size or ratio.
As part of our solution for the full social campaign, we added a WP shortcode to our plugin to display this custom grid element on any page in a flexible fashion. To achieve the grid ratio objectives, we utilized CSS inline-block elements with percentage top-margins, which as a specification-supported quirk allow height to be set based off of element width. Media queries could then adjust the ratio to achieve grid patterns based off of screen size. Namely, a small square grid on mobile, and a pattern grid on larger screen sizes.
Note how the hover effect is still vertically centered even on a rectangular shaped element. The images are set as background images with background sizing set to cover with centered positioning to account for unpredictable image dimensions as best possible. The hover effect is a :hover pseudo-class with a hidden element to best utilize a svg icon overlay.
Another requirement was a loose coupling of verified PayPal donations to story submissions. Our plugin included PayPal PDT message parsing and validation, and stored the transaction identifiers with the story posts as additional WP metadata to prevent duplicate submissions per donation, as well as to attribute the submissions to the email addresses of the donors. The submission plugin sanitized the story submission form and allowed the secure upload of featured images.