Semantics and styles, better structure: No h2, figures, figcaptions, a wrap

[whatsnewsisyphus]

The current structure of portfolio items have some issues as described below. I would suggest something along the lines of `

<figure class="vp-portfolio__item">

    <div class="vp-portfolio__item-img-wrap">

        <img class="vp-portfolio__item-img"/>

    </div>

    <div class="vp-portfolio__item-overlay vp-portfolio__item-align-center">

            <figcaption class="vp-portfolio__item-meta">

            </figcaption>

    </div>

</figure>

`

The h2 is going to throw off a lot of people for various reasons:

• Bad for semantic markup and SEO
• Is a heavily stylized element that will commonly be to large for grid usage and break the grid (See the screenshot of what happens with base astra ) *maybe add below here and have an option to remove it with ' Wrap lines on titles, might break even grids ' .vp-portfolio__item-meta-title { white-space: nowrap; }

Having the title be wrapped in a separate a/link element

• Bad for semantic markup and SEO
• Creates two of the same link each element
• When you add data-srcset for responsive lightbox, it will also double that, ultimately causing a bit of bloat

Solution above is easier to parse on the back and creates better html in the end.

[nk-o]

I'll check this, thank you.

[whatsnewsisyphus]

Not sure if this is optimal, but an [example] ( http://photoswipe.com/documentation/seo.html) (you would wrap the a around the image and caption) On Wed, Jan 2, 2019, 8:05 AM Nikita notifications@github.com wrote:

I'll check this, thank you.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nk-o/visual-portfolio/issues/89#issuecomment-450858529, or mute the thread https://github.com/notifications/unsubscribe-auth/AAbwdNtSFzErql9Jxy5uqUreTcCF356bks5u_K6CgaJpZM4ZjegZ .

[nk-o]

I'm not sure that h2 tag could be removed, just because a lot of people already use the plugin and it may break a lot of portfolio styles on user's sites. nowrap is also is not a solution. In local build already added Grid layout, so you can use it instead of Masonry, so all rows will look good.

figure and figcaption already added in local build and will be available in plugin update.

[whatsnewsisyphus]

Can you add a filter that would allow changing the h2 without modifying plugin files? It could also be done through vp settings with an option for default caption element.

On Thu, Feb 28, 2019, 5:12 AM Nikita notifications@github.com wrote:

I'm not sure that h2 tag could be removed, just because a lot of people already use the plugin and it may break a lot of portfolio styles on user's sites. nowrap is also is not a solution. In local build already added Grid layout, so you can use it instead of Masonry, so all rows will look good.

figure and figcaption already added in local build and will be available in plugin update.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nk-o/visual-portfolio/issues/89#issuecomment-468215524, or mute the thread https://github.com/notifications/unsubscribe-auth/AAbwdHh4Opp0OHYQj6BaNXrd2FlEbykyks5vR6uNgaJpZM4ZjegZ .