• Greetings,

    I’m trying to create a page where if you tag an image in your media library you’d be able to click the tag in your tag cloud and show all images that share that same tag. I’ve scoured the interwebs and can’t seem to find anything that’ll do this.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Thread Starter harshclimate

    (@harshclimate)

    Thanks, Steve! I was actually hoping to not use a plugin. I’ve been building my theme for quite some time and would like full control over what I’m doing with it.

    In my archive page, I was able to grab all the categories used on the site (which is a pretty basic function) but I would assume that grabbing the tags used should be just as easy but I’m not seeing it out there. Perhaps my google skills aren’t what they should be?

    But assuming I can display all the tags I tag images with, how would those even get displayed in an un-ordered list? Then you click that term and it shows all the images associated with that term.

    Moderator bcworkz

    (@bcworkz)

    I sort of understand what you want to accomplish, but am not clear on where. The media list table “library” or the media modal used when adding media to a post? I don’t know much about the modal. Since it’s JavaScript driven, there’s likely a way, but I’m pretty weak with JavaScript. On the list table, you should at least be able to add filtered views similar to those that filter posts by status or author.

    It might be easier to build your own page than try to work with the list table class or JavaScript. But integrating such a page into other WP functionality might be a challenge.

    Which ever way you approach, you first need to get all taxonomy terms. You can use get_terms() for this. Once a term is selected, use WP_Query to get all image attachment posts with that term assigned. For each attachment, you can get all data related to the associated image.

    Thread Starter harshclimate

    (@harshclimate)

    Heya, BC! Long time no see!

    Well, you know in the backend of WP you can navigate to the media library, from there, you can select the image and assign a tag to that image. I know that you can pull data from the image description or caption. But I can’t see a way to extract that data.

    Can I show you my page right quick so I can better illustrate what I wanna do?

    My archives page

    When you go there, you’ll see the thumbnails on the right side. Those are the “featured” images for the respective posts. What I would like to do is, on the left, you’ll see the tag listing – When you click a tag, I would like every image associated with that tag to show up on the right where the featured images are.

    • This reply was modified 7 years, 2 months ago by harshclimate.
    Moderator bcworkz

    (@bcworkz)

    Heya back at ya! Despite the lack of an initial greeting, I do remember you, unlike our last interaction. I didn’t realize it had been a long time. That loop question seems like it was only a couple weeks ago, not nearly a dozen weeks o.O

    Thanks for the example, that’s helpful. For that to all work, you would need a custom page template and either a custom sidebar template or widget.

    The list of posts from the main query should still be in the global $wp_query object when your widget or sidebar code runs, unless some other code failed to reset their secondary query properly. You can loop through the list and accumulate the tags of each post, disregarding duplicates, or removing them afterwards. From the accumulated, distinct tags you can output a tag list with links to our custom page that includes the specific tag as a query arg.

    Even better, but more complicated, would be to send an Ajax request when any tag is clicked. The returned data is used to re-display featured images and re-generate a new tag list.

    When either the Ajax request or custom page request is received, the passed tag term is used to make a query for all posts having the assigned tag and having a featured image assigned. The result is used to generate a list of images that are displayed in the main content area.

    A new tag list is generated from the new list of posts/images. The cycle can be repeated for as long as the user has patience.

    I’m unsure of your coding skill level. Even the best make rookie mistakes once in a while. I imagine my description could sound hopelessly complicated. There are a lot of pieces to this puzzle, but if you focus on one part at a time, it’s all attainable. It just might take a while. There is some opportunity for simplification. You can always embellish further after the initial functionality is achieved.

    Consider not using the sidebar or widget for now. Just make a tag link function that you can place on any template. The links go to a single page that uses a custom template. The custom template queries for posts as I mentioned aboe. Do not reset this query until after the tags link function is run because it needs to get the post list from this query, not the main page query used to get to this page.

    Thread Starter harshclimate

    (@harshclimate)

    My coding skills are non-existent. I am able to use other people’s code ?? If I have their skeleton model, I can pretty much make it do what ever I need to do. But that’s mostly based on looks. My HTML and CSS skills are awesome, but php… forget it!

    I can obviously get by to build a theme from scratch in wordpress, but I do have issues trying to organize my thoughts to get something like yanking attachment images from a tag.

    I had a dream last night that I somehow need to grab the ingredients of the_content() in order to locate the attached images in a post. So when I get home tonight I’ll have to try and get that figured out.

    My “logic” tells me that I won’t be able to do it. But I will not give up!

    I’ll post more later when I have a look at that. If I can’t do it, can I pick your brain further?

    Thread Starter harshclimate

    (@harshclimate)

    Found this bit of info from WP Stackexchange:

    $query_images_args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'posts_per_page' => -1,
        'tax_query' => array(
            array(
                'taxonomy' => 'attachment_category',
                'field'    => 'slug',
                'terms'    => 'SLUG OF YOUR TERM',
            ),
        ),
    );
    $query_images = new WP_Query( $query_images_args );

    A potential issue is that under the array asking for 'terms' => 'SLUG OF YOUR TERM' is being too specific. It would have to be dependent on what tag the user clicks.

    • This reply was modified 7 years, 2 months ago by harshclimate.
    Moderator bcworkz

    (@bcworkz)

    With only cut and paste coding skills, your vision could be a big ask. But you seem to have a lot of perseverance, so you may just be able to pull it all together anyway. You’re on the right track. WP_Query is at the heart of getting anything post related.

    BTW, while getting image data out of content could work, it’s horribly inefficient. You generally would want to get image data from related attachment posts. The problem with attachments though is they are only attached to the post in which they were first used. Posts with reused images do not have associated attachments. To get at reused images, you really do have to parse post content.

    Back to WP_Query. Unless you are dealing with direct user input of terms, you are generally better off working with IDs instead of term slugs. The tax_query argument supports all kinds of criteria. Look through WP_Query docs to learn how to query for taxonomy term IDs instead of term slugs.

    Another problem with using found code is you cannot know how closely it applies to your installation. For example, there is no ‘attachment_category’ by default in WP. Unless you or a plugin created it, it’s not going to work. The taxonomy for default tags is ‘post_tag’.

    As you recognized, you need to somehow dynamically get tag IDs from the image clicked. The way to do that is build the IDs into the link href when you output the images. The link would lead to that custom page I talked about. That page would have something like the query you found, adjusted as mentioned above.

    Maybe this page is called “Related Images”, its slug is related-images. The link’s href might be something like example.com/related-images/?post_tag=123 if 123 is the tag ID of the image to which this link is associated. On this page template with your new found WP_Query, the passed ID is available from $_GET['post_tag']. Making a custom page template is the key to getting this code to work the way you want. Once you have a template, add a new page that uses it. When you request this page, your code will run.

    We can worry about how to generate links to this page later. You should focus on only one part of this at a time or you will drive yourself insane! For now you could just hardcode such a link on a plain HTML page as a stand in until you get this query and page template working.

    With that code, adjusted as described, you end up with $query_images as a query object containing a list of attachment posts. You can run a normal custom query loop that’s normally used for posts to get to each attachment post in turn. With the attachment post, you can get the related img element with wp_get_attachment_image(). Besides the attachment post ID, the function accepts a size argument and an argument for what attributes to include in the img tag, such as class and ID and alt values.

    Simply echo out the returned value. When you do that for every attachment in the query, you’ll have all the images with the particular tag ID all on one page.

    Don’t try to cobble something together all at once and hope it works. Debugging code assembled like that is difficult to debug. Only do a little at a time, testing frequently. You can usually check the value of any variable with print_r( $variable_to_check ); When you check an object like $query_images this way, you will get a lot of output. It helps if you output this inside of <pre> </pre> tags so the output is organized. Otherwise the whitespace is stripped and it all runs together.

    A lot of the output will have little meaning to you. What you are looking for is an array of attachment post data. There should be one for every image that has the particular tag assigned. If you don’t get that, check your query arguments. In particular $_GET['post_tag'] and $query_images_args.

    That should keep you busy for a while ?? I hope you get a little rush of achievement after successfully completing even a minor bit of code. If you find that rewarding, you’ll do OK. If that’s the case, I can sincerely wish you to have fun!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Get images based on TAG’ is closed to new replies.