Styling Media Fields

Hi SoloMornington,

Drupal Gardens added support for Flickr as described in our October release announcement.

May I also suggest that you check out our documentation for embedding audio, video and images on your site.

In addition, you can tweak your image style settings for thumbnails, and the like by going to Admin > Configuration > Media > Image Styles where you can override the default settings.

Further styling can be accomplished by adding your own custom CSS to the Advanced tab in ThemeBuilder.

Hope this info can point you in the right direction!

Best regards,

Thanks, Stacy, but this doesn't really help me. I guess no one at drupalgardens can figure out how the different display styles of media assets are supposed to work, at least not enough to write a documentation page on it. I can't find any documentation on d.o or any tutorials, either.

So it's kind of a non-feature to embed flickr images that you can't really control.

Hi SoloMornington,

It sounds like the image presets are not behaving properly in which case this would be happening with any third-party image service. We will need to take a look at the settings on your site, and investigate further to see what's exactly happening.

In addition, we have created feature requests for both modules you have suggested above. We are tracking the entity reference module suggestion at DG-2791, and the views reference module at DG-2792.

We'll be sure to post back here when have some updates for you.

Thanks for your patience!

Best regards, 

Hi SoloMornington,

After further investigation, we've come up with a solution to address both of the issues. The first issue being that you want the image to link back to the Flickr page, and the second issue that you need to control the image display size.

The problem seems to be that the image title is actually functioning as the anchor link that connects back to the Flickr page, yet you would like to not have the title displayed for aesthetic reasons. If you hide the title, then you hide the link back to the Flickr page.

We suggest that you make the image the link that connects to the Flickr page by creating a simple content type called, for example, "Photo". This content type simply has a body field. 

You can copy the embed code from Flickr, choosing the appropriate code for whatever size you would like it to be - small, medium, large. Then, paste this code as Raw HTML into the HTML tab of your WYSIWYG editor in the body field. You will need to create a new text format for Raw HTML if you have not done so already.

Once you set up this content type, you can add all of your images this way. Then, you can create a view of these photos, as a page or block display, that when clicked on will all link back to their Flickr pages without the ugly title.

You can also create a header within the View Display to contain the information that you already have in your plain vanilla image field.

The key is controlling the size of your images within Flickr before you bring them into the Gardens site. We highly recommend choosing a consistent size for all images for alignment purposes. Then, if you want to further control the sizing, you can use CSS to specifically target those image sizes. 

Keep in mind; however, that whatever size you bring the images into your site as, the browser will still recognize that original size first and then acknowledge the CSS to make the image smaller or bigger.

Hopefully this makes sense, and will lead you in the right direction. Let us know if you have further questions.

Thanks!

Thanks, Stacy.

The problem is that if I make a new content type for photos, I have to turn my main content type into a view that echos the node content type, with a few extra photos if they exist. This is bad design for a number of reasons, including poor performance (all nodes are views) and me providing support for my users ("I make a photo appear HOW again?")

Your suggestion might make a little more sense if we had Viewfield module available, because then I could do the embeds as content and then add a view of them to my node content type. It still leaves the problem of telling users how to do it.

I guess I'm just kind of blown away that there's no native support for this in Media/oEmbed module. I guess I'll poke around the issue queue for that.

Thanks again.

Hi SoloMornington,

Just to clarify, all content is a node of some sort. You would be adding embed code as content to the body field of the Photo content type.

All your users would need to do is Add Content, and then select the Photo content type and embed their code. The View would work on its own, and there would be no need for your users to get anywhere near the View's workings at all. Once the View is set up, it takes care of itself and your users can just concentrate on adding content.

If you're feeling restricted within Gardens, you always have the option of creating a site with the core Drupal 7 installation so that you have access to the Viewfield module, and the other two modules you've suggested.

Kind regards,

I appreciate your help, Stacy.

I actually designed this site as a stand-alone Drupal 7 site, but our team decided that we needed to host it somewhere where ownership could be transferred easily between the members, and Drupal Gardens was the answer.

Thanks much. :-)