Flickr photo too small and left-aligned in Twenty-Fourteen using shortcode
-
When I type the shortcode for a Flickr photo in a blog post using the Twenty-Fourteen theme, the picture is left-aligned and about half the width of the post. Could Automattic change the theme so Flickr photos are centered and fill the width of the post?
A link to a post that shows this is http://danielgreene.com/2014/07/07/beautiful-billowing-clouds-in-phoenix/
The first image is what I got when I went to Flickr, selected Share, selected 640×480 resolution, and pasted the HTML into the post (using the Text mode).
The second image is what I got when I simply posted the Flickr photo page URL [https://www.flickr.com/photos/danielgreene/14577394416] in a line by itself, as per the Flickr photos shortcode instructions in WordPress Support: http://en.support.wordpress.com/images/flickr-photos/.
(I normally wouldn’t have the image repeated; I only did that to show you the comparison, and I’ll change it back in a few days, after I get some responses.)
Just to see how a different theme would format a photo using the shortcode alone, I previewed my post in another theme (Isola), and saw that the photo was centered and filled the width of the post. I don’t want to switch themes right now, but I just wonder if there’s anything I or Automattic can do to make Twenty-Fourteen theme center and full-size Flickr photos entered using the shortcode.
The blog I need help with is: (visible only to logged in users)
-
Hi Daniel,
Since it is theme dependent, one way to change this would be via the Text Editor using HTML:
<img src="https://farm3.staticflickr.com/2915/14640544443_cbebc3fc8f_n.jpg" width="640" style="margin:auto;display:block;" />As seen above, that will increase the size of the image and then center the image as well with just the link to the Flickr image.
So essentially, what you can do is enter the Flickr link in the space labeled FLICKR LINK:
<img src="FLICKR LINK" width="640" style="margin:auto;display:block;" />After width, you can put in any number you want as that will determine the size of the image. Click Preview to see how it would look. Leave the style as is – this will center the image.
Make sure to do this in the text editor versus the Visual editor.
Let me know if you have any questions with this!
-
Thanks, Grace. I know how to do it with HTML; as you can see, the same photo is both in HTML and in simple URL for shortcode on the page I linked to.
I suppose I could pay extra to edit the CSS of Twenty-Fourteen, so I can fix the problem of the alignment and size.
My preference would be for Automattic to re-write the Twenty-Fourteen them so that a Flickr photo inserted into a post using the shortcode only would be centered and take up the same width as the text. I don’t think that’s asking for much, and I don’t think it would hurt anyone else’s design, since the image element is in a block by itself. It’s not going to knock anything out of the way on the right or left, and there’s no reason for it not to be centered.
-
P.S. I shouldn’t say “re-write”; I mean just tweak a line or two of code. The theme shows Flickr videos centered and the width of the text box, so there’s no reason the theme should cut the photos down to half the size and not center them.
-
Hi Daniel,
So currently, any image (Flickr embed, Getty Images, any image/media inserted from the Media Library and uploaded from your computer) inserted into a post or page would automatically default to left-aligned. We wouldn’t be able to automatically set this to center-aligned.
As for the size of the image it is dependent on the theme. Currently Twenty-Fourteen’s content width is fairly narrow; thus, the size of the Flickr embed is set to 320 px wide. However, if you want it to be entered with a default that is larger, you can switch to another theme like Tonal and it will embed at a width of 640 px.
After some discussion with our team, we found that it would be best to upload these images to your Media > Library page, so that you can center align and increase the size to your desire.
Cheers!
-
Thank you, Grace. I appreciate your consultation with other team members, and for giving me those informative details. I love the simplicity of embedding content simply by pasting a URL on a line by itself, and I think it would be nice if WordPress themes would set embedded photos to be at least as wide as they embedded YouTube videos, and Facebook, Google+, and Twitter posts. That is my request. However, I will accept that things are the way they are right now, and if I want more control over the presentation of my photos, I will upload them to my WordPress media library. Thanks again.
-
- The topic ‘Flickr photo too small and left-aligned in Twenty-Fourteen using shortcode’ is closed to new replies.
WordPress.com Forums 