Support » Plugin: Media Library Assistant » Adding 'Schema.org' Mark-up

  • Resolved Mike Matenkosky

    (@hikinmike)


    Hi David!

    I’ve been adding the ‘Schema.org’ mark-up on my galleries. Here is what I have right now:

    <div itemscope itemtype="http://schema.org/ImageGallery" id="gallery-[+id+]-[+instance+]" class="gallery gallery-[+id+]">
    
    	<div class="gallery-row gallery-clear">
    
    		<figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject" class="gallery-item col-[+columns+]">
    			<div class="gallery-icon">[+link+]</div>
    			<figcaption itemprop="caption" class="gallery-caption">[+caption+]</figcaption>
    		</figure>
    
    	</div><!-- Row Close -->
    
    </div><!-- .gallery -->

    I’m having a hard time trying to add [+link+] to my custom ‘Mark-up Template’:

    <a itemprop="contentURL" href="/gallery-link-page/"><img itemprop="thumbnailUrl" width="300" height="200" src="images/thubnail-1.jpg" alt="Name of Gallery" /></a>

    Any ideas?

    https://wordpress.org/plugins/media-library-assistant/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author David Lingren

    (@dglingren)

    Good to hear from you again, and thanks for this question. I want to make sure I understand what you’re asking for. As I understand it, you want to replace the default [+link+] value with something like the example you give at the end of your post; is that right?

    Assuming that’s the idea, you need to replace three values that are different for each gallery and/or item:

    1. “/gallery-link-page/” – is this a link to the page in which the [mla_gallery] appears?
    2. “images/thumbnail-1.jpg” – this looks like the thumbnail image for the attachment; right?
    3. “Name of Gallery” – is this the title of the page in which the [mla_gallery] appears?

    If the link and name are for a page/post that’s different from the “current” page/post, i.e., the one that contains the [mla_gallery] shortcode, then you need some way to specify which page/post you want to link to. How would that work?

    In the current MLA version you can get access to some information about the attachment’s “parent” page/post, but there’s no access to information about the post/page on which the shortcode appears. That’s an interesting idea for a future enhancement.

    In the interim, you can probably solve the problem by adding some code to the filters provided by [mla_gallery]. Let me know if that would work for you.

    If I can get a bit more information I can be more helpful. Let me know the answers to the above questions and I’ll work on it. Thanks!

    Yes, but I’m not concerned about the last one. I just copied my “Scema Template” as a reference.

    “/gallery-link-page/” – is this a link to the page in which the [mla_gallery] appears?
    “images/thumbnail-1.jpg” – this looks like the thumbnail image for the attachment; right?
    “Name of Gallery” – is this the title of the page in which the [mla_gallery] appears?

    This will be the “standard” gallery page. As an example: http://sandbox.imagesinthebackcountry.com/portfolio/portfolio-landscape/yosemite-portfolio/. I still have admin access if need be.

    If the link and name are for a page/post that’s different from the “current” page/post, i.e., the one that contains the [mla_gallery] shortcode, then you need some way to specify which page/post you want to link to. How would that work?

    It isn’t a pressing thing. I’m in the process of re-designing my photography site. The new theme/template adds ‘Schema.org’, at least some of it, so I thought I’d try and add it. Also trying to figure out ‘rewrites’ too, but that’s for another day/post. 🙂

    Plugin Author David Lingren

    (@dglingren)

    I had a look at your site and the example page you gave above. Essentially, all you want to do is add the itemprop="contenturl" and itemprop="thumbnailurl" attributes to your link and image tags.

    There are two ways to do that. First you could add mla_link_attributes='itemprop="contentURL"' and mla_image_attributes='itemprop="thumbnailUrl"' to your [mla_gallery] shortcodes. That’s great for changing the links on a case-by-case basis but it’s painful to modify all the shortcodes on your site.

    Since you are already using a custom Markup Template for your site, the second way is probably better for you. You can change the “Item:” markup section, replacing the [+link+] portion with something like the following:

    <a itemprop="contentURL" class="img-hyperlink" href="[+link_url+]"><img itemprop="thumbnailUrl" width="[+thumbnail_width+]" height="[+thumbnail_height+]" class="attachment-thumbnail" alt="[+title+]" src="[+thumbnail_url+]"></a>

    Putting that in context, your “Item:” section would look like:

    <figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject" class="gallery-item col-[+columns+]">
    	<div class="gallery-icon"><a itemprop="contentURL" class="img-hyperlink" href="[+link_url+]"><img itemprop="thumbnailUrl" width="[+thumbnail_width+]" height="[+thumbnail_height+]" class="attachment-thumbnail" alt="[+title+]" src="[+thumbnail_url+]"></a></div>
    	<figcaption itemprop="caption" class="gallery-caption">[+caption+]</figcaption>
    </figure>

    I think that will give you the template you need to add schema attributes to your [mla_gallery] shortcodes. I am marking this topic resolved, but let me know if you have any problems or further questions. Thanks for your interest and for the question.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding 'Schema.org' Mark-up’ is closed to new replies.